メイリオはCSSでイタリック（斜体）が効かない

Tweet

Category css 2017/02/20

問題

CSSで文字が斜体になりません！

答え

メイリオではならないそうです。
https://www.microsoft.com/typography/fonts/family.aspx?FID=323

font-style:italic;

を指定しても、斜めにならないです。

なお、英数字だけはイタリックになるので、日本語、半角英数字が混在していると、まっすぐだったり斜体になったりが混在します。

斜体用フォントを表示させるのではなく、単純に斜めに変形するのであれば CSSのtransform で可能。

CSS

.transform-italic {
    -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')";
}

DEMO

font-family:meiryo を斜めに変形して表示する

これは文字が入っているボックスを変形しているので、spanではなくpやdivに適用するとよいです

また、複数行にまたがると
若干変な感じになってきます。
ご注意ください。