悩み多き　エディターの斜体ボタンとCSS

ブログサービスや、WordPress等、WEBページを作るエディタには、大抵 iというボタンがあります。フォントを斜めに表示して強調するためのボタンなのですが、これがなかなか悩ましい問題を含んでいます。

例えば、メイリオというよく使われるフォントがありますが、このフォントは、日本語の斜体がありません。

日本語は斜体にならず　アルファベットは斜体になります。(chrome,edgeの場合、firefoxは斜体になる）

日本語 Meiryo

abc

iボタンを多用する人はほとんどいないと思いますが、日本語環境でiを押したテキストは、ある時には、周りの文字と全く変わらず、ある時には、斜体になって表現される。といった問題を引き起こします。

日本語 "Yu Gothic"

たぶん、メイリオは日本語には、斜体はないよ。という考えがもとになっているのだと思いますが、他のフォントは、斜体になったりするので、「斜体は無い」「いいじゃん」のどちらかの立場に立たないと、スタイルの実装ができないことになります。

CSSで、em要素のメイリオを強制的に斜体にしたり、しなかったり　それは自由にできるのですが、どういった実装がいいのかなぁなんて思い始めると意外と結論が出ません。

日本語 Meiryo を斜体に変更

<em style="font-family: iMeiryo; font-style: italic;">日本語 Meiryo を斜体に変更</em>

@font-face {
 font-family:iMeiryo;
 src: local('Meiryo');
}

日本語 Meiryo を斜体に変更

<em style="font-family:Meiryo;" class="italic">日本語 Meiryo を斜体に変更</em>

.italic{
 display:inline-block;
 -webkit-transform: skewX(-15deg);
 -ms-transform: skewX(-15deg);
 transform: skewX(-15deg);
}

CSS note