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

WebプロダウションKOHIMOTO Inc.が発信を通して成長していくためのラボ🧪 IT企業出身。世界中の人へ発信できるWebサイトを通じて、社会がより良い方向へアップデートしていく為に日々学び、技術を生かしていきます。