font-synthesis-weight
font-synthesis-weight は CSS のプロパティで、フォントファミリーに太字書体がない場合に、ブラウザーが合成するかどうかを指定します。
すべての書体合成値を制御するために、多くの場合は一括指定プロパティ font-synthesis を使用した方が便利です。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 97 | 97 | 111 | 16.4 | 97 | 16.4 | |
auto | 97 | 97 | 111 | 16.4 | 97 | 16.4 |
none | 97 | 97 | 111 | 16.4 | 97 | 16.4 |
基本構文
CSS
.precise-weight {
font-synthesis-weight: none;
}
.flexible {
font-synthesis-weight: auto;
}ライブデモ
実務での使いどころ
-
Webフォントの太字品質管理
Webフォントで必要なウェイトをすべて読み込み、合成太字を無効にしてフォントデザイナーの意図した太字表示を使用します。
注意点
- 合成を無効にすると、該当ウェイトのフォントファイルがない場合にstrong要素の太字が表示されなくなります。
アクセシビリティ
- strong要素の太字が視覚的に表示されない場合でも、スクリーンリーダーは強調として認識します。視覚的な代替手段の提供を検討してください。