こんにちは。
今回はfont-synthesisというcssプロパティを説明します。
という場面に出くわしたこともあるのではないでしょうか。そのような時はフォントが太字や斜体をもっていないのかもしれません。
今回は、そのような時に使えるfont-synthesisの
について説明します。
目次
font-synthesisとは
font-synthesisの読み方
font-synthesisは「フォント-シンセシス」と読みます。「synthesis（シンセシス）」は日本語では「合成」「統合」という意味です。
font-synthesisの説明
日本語の意味通り、太字や斜体が用意されていないフォントファミリーの場合に、ブラウザが合成していいかどうかを指定するCSSのプロパティです。
使う頻度は少ないプロパティです。
font-synthesisで利用できる値
font-synthesisでは以下の属性を使うことができます。
| 値 | 説明 |
|---|---|
| none | 太字およびイタリックの字体を合成しないことを示します。つまり、太字や斜体文字を自動生成しません。 |
| weight | 必要であれば、太字の字体を合成してよいことを示します。フォントファミリーに太字や斜体が無いとき、ブラウザは太字の合成はできますが斜体はできません。 |
| style | 必要であれば、イタリックの字体を合成してよいことを示します。フォントファミリーに太字や斜体が無いとき、ブラウザは太字の合成はできませんが、斜体はできます。 |
| weight style | デフォルト値です。フォントファミリーに太字や斜体が無いとき、ブラウザはどちらも合成することができます。 |
対応ブラウザ
対応ブラウザは以下の通りです。対応しているブラウザは少ないです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 非対応 |
| Edge | 非対応 |
| Firefox | 34 |
| Internet Explorer | 非対応 |
| Opera | 非対応 |
| Safari | 9 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 非対応 |
| Android版Chrome | 非対応 |
| Android版Firefox | 34 |
| Android 版 Opera | 非対応 |
| iOS版Safari | 9 |
| Samsung Internet | 非対応 |
font-synthesisの基本的な使い方
では、font-synthesisの使い方をみてみましょう。
font-synthesisの使い方
font-synthesisの使い方です。
書き方はCSSの基本に沿って
と書いてください。
まずは何も指定していない場合。
See the Pen
zYKEPNY by Sachiko (@yivliriy)
on CodePen.
日本語の太字や斜体を合成しないときの例です。
|
1 2 3 |
*:lang(ja) { font-synthesis: none; } |
See the Pen
zYKEPNY by Sachiko (@yivliriy)
on CodePen.
日本語の太字を合成し、斜体にしない時の例です。
|
1 2 3 |
*:lang(ja) { font-synthesis: weight; } |
See the Pen
zYKEPNY by Sachiko (@yivliriy)
on CodePen.
日本語の斜体を合成し、太字にしない時の例です。
|
1 2 3 |
*:lang(ja) { font-synthesis: style; } |
See the Pen
zYKEPNY by Sachiko (@yivliriy)
on CodePen.
日本語の太字も斜体も合成するときの例です。
|
1 |
*:lang(ja) { font-synthesis: weight style; } |
See the Pen
zYKEPNY by Sachiko (@yivliriy)
on CodePen.
もともとweight styleがデフォルトになっていますので、あえてfont-synthesisプロパティを使うときは何かを許可しない場合が多く、両方指定するために使うことはあまり見ないかもしれません。
*:lang(ja)
「*（アスタリスク）」はユニバーサルセレクターですべての要素という意味です。
:lang(〇〇) というセレクターは言語擬似クラスで、「要素の lang属性が〇〇になっているもの」。「ja」は日本語です。
font-synthesisと関連するプロパティ
font-style
font-styleとはフォントのスタイルを指定するプロパティです。
通常体 (normal)、筆記体 (italic)、斜体 (oblique) あります。
通常体 normal
font-styleの値をnormalにすると通常体で表示されます。
|
1 2 3 |
.style { font-style: normal; } |
筆記体 italic 、斜体 oblique
font-styleの値をitalicあるいはobliqueにすると、テキストが斜体で表示されます。（日本語のフォントではitalicもitalicも、ブラウザでは表示されるときには同じになります。）
|
1 2 3 |
.style { font-style: italic; } |
|
1 2 3 |
.style { font-style: oblique; } |
font-weight
font-weight は、フォントの太さ を指定するCSS のプロパティです。実際に表示されるフォントの太さは、現在設定されている font-family に依存する場合があります。
基本となるnormalとboldを使います。下記のように書くことができます。
normal（通常）
normalは通常の太さで、初期値に設定されています。
|
1 2 3 |
.style { font-weight:normal; } |
bold（太字）
|
1 2 3 |
.style { font-weight: bold; } |
bolder（相対的により1段階太い）
|
1 2 3 |
.style { font-weight: bolder; } |
lighter(相対的により1段階細い）
|
1 2 3 |
.style { font-weight: lighter; } |
font-synthesisの応用的な使い方
アラビア語などの特定の言語は、表示されるときに斜体になります。このような特定の言語を斜体とか太字にしたくない場合に、一回で指定できて便利です。
|
1 |
*:lang（ar）{フォント合成：なし; } |
arはアラビア語です。
まとめ
いかがでしたか？
今回は、フォントが太字や斜体を持っていないときに使えるfont-synthesisの
について説明しました。
対応しているブラウザが少ないので、あまり使う機会はないかもしれません。しかし、覚えておいて損はないでしょう。
参考文献：Ｗ3C 仕様書｜フォントモジュール
