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

最終更新日:2018年04月17日  (初回投稿日:2018年04月17日)

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
    デフォルト値weightstyle を半角スペースで区切っています。
    フォントファミリーに「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)ではこのようにプレビューされています。

フォントを「MS ゴシック」や「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 ゴシック", "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 以外は実装しているので、スマホ用サイトならすぐ使えそうです。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
10 | 2018/11 | 12
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.