Liberty

以下のようにフォントを指定しました。

font-family: ‘AmericanTypewriter-Light’, sans-serif;

このフォントは本来こんな感じ。

なんかオシャレ。

でも、実際に表示されたのは、、

太すぎる・・・。sans-serifではないようだけど、AmericanTypewriter-Lightじゃなくて、AmericanTypewriterでも割り当てられたのかな・・・？

と思っていました。でも、実はコレ、このフォントを割り当てているHTML要素のfont-weightがデフォルトでboldになっているのが原因っぽい。

上の例は、<h1>タグに記述した文字列だったんですが、CSSでfont-weight: lighter;を指定することで本来のフォントが表示されました！

<h2>でも同様だったので見出しタグなどの文字列を強調する前提の要素はデフォルトでbold設定になっているのかも。

ブログランキングに参加していますので、僕のモチベアップの為にもバナーを押していただけると嬉しいです！(※別タブで開きます)