Welcome to ほんっとに! INDEX をご利用ください

はじめての人にもわかりやすくHTMLの組み方を書いています。CSSも基本からやってみましょう。
サイトの編集ができるようになる手助けになれば…と思っています。HTML5+CSS3ベースです。

はじめてのHTML INDEX
HTMLについて [1]から順に読みたい、特定の記事を読みたいってときは、このINDEXからGO!
CSS3レイアウトも時々登場します。
HTML要素 索引
HTML要素のアルファベット別INDEXです。
特定のHTML要素について調べたいときには、わりと便利です。
はじめてのCSS INDEX
CSSについて【1】から読みたい、CSSの特定の記事を読みたいときは、こちらからGO!
(はじめてのHTML での CSSの使用例も、ここでINDEXにまとめました。ご利用ください)

サイト内検索はこちらからどうぞ

【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 以外は実装しているので、スマホ用サイトならすぐ使えそうです。

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

関連記事

スポンサーリンク

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
03 | 2018/04 | 05
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.