knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

メイリオで斜体を実装

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

正確に申しますと、英数字は斜体にできるのですが、日本語の文字(漢字カナ)は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')";
}