意外と奥深いCSSのfont-weightの話 - ICS MEDIA

普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理

[inazuma2073]

日本語なら特にフォント周りがCSSで思い通りになることはないのでweight400か800しか指定してない。それでもCSSは悪くないんや！

[eartht]

こだわると数人日消し飛ぶ、使う側は苦労の工数ほどは恩恵を受けていない。要件の時点でフォントルールはゆるくしておくべき

[strawberryhunter]

いつの間にか日本語でも一部のフォントでは単なるboldではないfont-weightが効くようになったの感慨深い。

[chocodoughnut]

代替ウェイトの仕組みは知らなかった。

[Phenomenon]

うわーめんどくさいー

[shimokiyo]

フォント界隈は相変わらずめんどくさいからな

[tasukuchan]

“まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理のことです。アンチエイリアスをかけることで、文字が滑らかになり、読み

[Shinwiki]

PhotoshopっていまWYSIWYGエディタかなんかに使えるの？

[yarumato]

“font-weight: normal は400と同じ意味ですが、100、600、900のウェイトしかないとき、400に一番近い600のウェイトが採用されない。適用される太さは100のものになる。”