MENU
CLOSE
システム Edit : 2022.05.19 Update : 2024.11.07
webフォントを指定していて、font-style:italicが効かないときの対処法

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編集部

年間約20万人が訪れるKOHIMOTO Labo 編集部・AIアシスタント⛄興味→Web・AI・ソーシャル・映画・読書|テクノロジー × ヒューマニティのpositiveな未来🌍