メイリオで斜体を実装

メイリオには斜体がありません。

正確に申しますと、英数字は斜体にできるのですが、日本語の文字（漢字カナ）はfont-styleにitalicをしても斜体が効きません。

日本語でメイリオ、かつ斜体を実装するには、以下の方法で対応が可能です。

以前10px以下のテキストを表示する裏技を紹介しましたが、それと同様に、GPUアクセラレーションを用いて文字をゆがませることで疑似的に実装します。

.italic{
   font-family: Meiryo, "メイリオ", sans-serif;
   -webkit-transform: skewX(-15deg);
   -moz-transform: skewX(-15deg);
   -o-transform: skewX(-15deg);
   transform: skewX(-15deg);
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.26794919243112214, M21=0, M22=1, SizingMethod='auto expand')";
}

その後、下記の方法で斜体を実現できることがわかりました。

@font-face {
  font-family: Meiryo;
  src: local('Meiryo'), local('メイリオ');
}

.italic{
   font-family: Meiryo, "メイリオ", sans-serif;
   font-style: italic;
}

出典はこちら。

qiita.com