このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

font-synthesis:太字と斜体の生成

記事Mar. 25th,2020
フォントに斜体や太字がない場合にそれらを合成して良いかを指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 font-synthesis: auto;
適用対象 すべての要素
継承 する
パーセント値 パーセント値は指定できません
計算値 指定されたキーワード
アニメーション 離散

font-synthesis”プロパティはテキストを表示するために使用するフォントに斜体や太字がない場合にユーザー・エージェントが合成しても良いかどうかを指定する以下のプロパティの一括指定プロパティです。

選択したフォントのバリエーションとして斜体や太字が用意されていない場合、既定ではユーザー・エージェント(ブラウザなど)が通常の書体から太字と斜体を生成して代用します。

サンプルコード

p { font-synthesis: none;}

説明
none 太字と斜体の合成を許可しない
weight 太字の合成を許可する
style 斜体の合成を許可する
共通キーワード

太字と斜体をどちらも合成して良い場合には“weight”と“style”を半角スペース(“ ”)で区切って両方記述します。順番は自由です。

font-synthesis: weight style;

また、“font-synthesis”プロパティの値は個別指定プロパティを以下のように指定した場合と一致します。

font-synthesis font-synthesis-weight font-synthesis-style
none none none
weight auto none
style none auto
weight style auto auto

使用例

太字と斜体の合成を許可する

<p>
<q class="font-italic">猫は上のかぎり黒くてことはみな白き</q>」と記していた。つまり彼女は<b class="font-bold">おなかが白くて背中が黒い猫が一番良い</b>と言っているのだ。
</p>
.font-italic { font-style: italic;}
.font-bold { font-weight: bold;}

p { font-synthesis: weight style;}

猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。

太字の合成を許可しない

<p>
<q class="font-italic">猫は上のかぎり黒くてことはみな白き</q>」と記していた。つまり彼女は<b class="font-bold">おなかが白くて背中が黒い猫が一番良い</b>と言っているのだ。
</p>
.font-italic { font-style: italic;}
.font-bold { font-weight: bold;}

p { font-synthesis: weight;}

猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。

斜体の合成を許可する

<p>
<q class="font-italic">猫は上のかぎり黒くてことはみな白き</q>」と記していた。つまり彼女は<b class="font-bold">おなかが白くて背中が黒い猫が一番良い</b>と言っているのだ。
</p>
.font-italic { font-style: italic;}
.font-bold { font-weight: bold;}

p { font-synthesis: style;}

猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。

太字と斜体の合成を許可しない

<p>
<q class="font-italic">猫は上のかぎり黒くてことはみな白き</q>」と記していた。つまり彼女は<b class="font-bold">おなかが白くて背中が黒い猫が一番良い</b>と言っているのだ。
</p>
.font-italic { font-style: italic;}
.font-bold { font-weight: bold;}

p { font-synthesis: none;}

猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク