コーディングで英語用のwebフォントを利用し、見出しにfont-style:italicをつけたかったのですが、適用されないことがありました。
確認することは２つです。
１．italic用のwebフォントを取得しているか
例えば、Amiriというフォントの場合、「Regular 400 Italic」というstyleがあるので、そのスタイルを有効化します。
そうすると、読み込むlinkにAmiri:italという記述が追記されます。
生成されたlinkは下記のようになりました。「Amiri:ital」がありますね。
|
1 |
<link href="https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"> |
この状態で、cssでfont-style:italicを指定し、適用されればそれでOKです。
しかし私の場合は、このままでは適用されませんでした。
２．display: inline-block;をいれる
cssでitalicにしたい箇所をinline-blockまたはblock要素にします。
|
1 2 3 4 5 6 |
<style> .italic { font-style: italic; display: inline-block; } </style> |
以上で、font-style:italicが適用されるようになりました。
