MENU
CLOSE
システム Edit : 2022.05.19 Update : 2024.11.07

webフォントを指定していて、font-style:italicが効かないときの対処法

コーディングで英語用のwebフォントを利用し、見出しにfont-style:italicをつけたかったのですが、適用されないことがありました。
確認することは2つです。

1.italic用のwebフォントを取得しているか

例えば、Amiriというフォントの場合、「Regular 400 Italic」というstyleがあるので、そのスタイルを有効化します。
そうすると、読み込むlinkにAmiri:italという記述が追記されます。
生成されたlinkは下記のようになりました。「Amiri:ital」がありますね。

この状態で、cssでfont-style:italicを指定し、適用されればそれでOKです。
しかし私の場合は、このままでは適用されませんでした。

2.display: inline-block;をいれる

cssでitalicにしたい箇所をinline-blockまたはblock要素にします。       以上で、font-style:italicが適用されるようになりました。

KOHIMOTO LABO

東京・吉祥寺でKOHIMOTO Inc.というWebサイト制作の会社をやっているエンジニアとデザイナーが、発信を通して成長していくためのラボ🧪 IT企業出身。サイト制作を通じて微力ながら社会が良くなる手助けをしたいと思っている。