【28】ボールドやイタリックを合成するか決める font-synthesis

font-synthesisプロパティは、フォントファミリーの中に「ボールド・イタリック」が無い場合に、ブラウザが合成してよいかを制御するプロパティです。
synthesis（シンセシス）は「合成」と言う意味。

このプロパティは今のところ Firefox しか実装してないっぽいです。Can I Use に項目すら無いw ので実装状況はわかりませんが。（2018年4月記）

本日のINDEX

1. font-synthesisプロパティの値
2. font-synthesisプロパティの使い方
   1. font-synthesis の実際の利用シーン

参考：
・CSS Fonts Module Level 3 | W3C Candidate Recommendation
・font-synthesis - CSS | MDN

font-synthesisプロパティの値

font-synthesisプロパティの値
キーワード	none　weight　style weight style がデフォルト値
グローバル値	font-synthesis: inherit; 親の値を継承（コレ書かなくても継承するけど） font-synthesis: initial; 継承した親の値を解消しデフォルト値に戻す font-synthesis: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	全部

font-synthesisプロパティの使い方

font-synthesisプロパティの値の使い方は、以下の4パターン。

• font-synthesis: weight style
  デフォルト値。weight と style を半角スペースで区切っています。
  フォントファミリーに「bold・italic」が無いとき、ブラウザが合成するのを どっちも許可する。
• font-synthesis: weight
  フォントファミリーに「bold・italic」が無いとき、ブラウザは「bold」の合成はOKだが「italic」はダメ。
• font-synthesis: style
  フォントファミリーに「bold・italic」が無いとき、ブラウザは「bold」ダメ「italic」はOK。
• font-synthesis: none
  フォントファミリーに「bold・italic」が無いとき、ブラウザはどっちも合成不可。

試してみます。（Firefox で見てください）

font-synthesis: weight style
This property controls whether user agents are allowed to synthesize bold or oblique font faces when a font family lacks bold or italic faces.

font-synthesis: weight
This property controls whether user agents are allowed to synthesize bold or oblique font faces when a font family lacks bold or italic faces.

font-synthesis: style
This property controls whether user agents are allowed to synthesize bold or oblique font faces when a font family lacks bold or italic faces.

font-synthesis: none
This property controls whether user agents are allowed to synthesize bold or oblique font faces when a font family lacks bold or italic faces.

Firefox（Mac）ではこのようにプレビューされています。

フォントを「ＭＳ ゴシック」や「Osaka」にしたら効きました。それ以外だと Firefox でも動作しなかった。
フォントファミリーの中に、もともとボールドやイタリックがあると効かないのかな？

上のサンプルのソースコードはこちら。
font-synthesis は <p>要素に直接指定しています。

<div class="mihon">
  <p style="font-synthesis: weight style">
    <span class="green">font-synthesis: weight style</span><br>
    This property controls whether user agents are ...</p>
  <p style="font-synthesis: weight">
    <span class="green">font-synthesis: weight</span><br>
    This property controls whether user agents are ...</p>
  <p style="font-synthesis: style">
    <span class="green">font-synthesis: style</span><br>
    This property controls whether user agents are ...</p>
  <p style="font-synthesis: none">
    <span class="green">font-synthesis: none</span><br>
    This property controls whether user agents are ...</p>
</div>
<style>
.mihon p {
	font-weight:bold;
	font-style: italic;
	font-family: Osaka,"ＭＳ ゴシック", "MS Gothic", sans-serif;
	margin:1.5em 0;
	}
.green {color:#579961}
</style>

font-synthesis の実際の利用シーン

W3C の仕様書に以下の例が出ています。
ある特定の言語のフォントで、斜体とかボールドにしたくない場合に、一発指定できて便利、という使い方がオススメみたいです。

/*アラビア語の「斜体・ボールド」の合成を無効にしています*/
*:lang(ar) { font-synthesis: none; }

:lang(◯◯) というセレクタは「言語擬似クラス」と言って、「要素の lang属性が◯◯になっているもの」をセレクタにします。「ar」はアラビア語です。
「*（アスタリスク）」は ユニバーサルセレクタ と言って、全部の要素という意味。
ということで、上のサンプルは「lang属性がアラビア語になっている全要素」をセレクタにして、ボールドもイタリックもNGにしています。

この font-synthesisプロパティも、前回のfont-size-adjustプロパティと同様、Firefox しか対応していないのが難点...。勧告時に残るかな〜？（2018年4月記）

次回予告

次回は 自動でカーニングしてくれる font-kerningプロパティを使ってみます。
これは IE11, Edge 以外は実装しているので、スマホ用サイトならすぐ使えそうです。