Mar. 25th,2020
プロパティについて
概要
“font-synthesis”プロパティはテキストを表示するために使用するフォントに斜体や太字がない場合にユーザー・エージェントが合成しても良いかどうかを指定する以下のプロパティの一括指定プロパティです。
選択したフォントのバリエーションとして斜体や太字が用意されていない場合、既定ではユーザー・エージェント(ブラウザなど)が通常の書体から太字と斜体を生成して代用します。
サンプルコード
p { font-synthesis: none;}
値
| 値 | 説明 |
|---|---|
| none | 太字と斜体の合成を許可しない |
| weight | 太字の合成を許可する |
| style | 斜体の合成を許可する |
small-caps |
スモールキャピタルの合成を許可する |
| 共通キーワード |
太字と斜体、スモールキャピタルのうち複数合成して良い場合には“weight”と“style”、“small-caps”をホワイトスペースで区切って記述します。順番は自由です。
font-synthesis: weight style small-caps;
また、“font-synthesis”プロパティの値は個別指定プロパティを以下のように指定した場合と一致します。
| “font-synthesis” | “font-synthesis-weight” | “font-synthesis-style” | “font-synthesis-small-caps” |
|---|---|---|---|
| “none” | “none” | “none” | “none” |
| “weight” | “auto” | “none” | “none” |
| “style” | “none” | “auto” | “none” |
| “small-caps” | “none” | “none” | “auto” |
| “weight style” | “auto” | “auto” | “none” |
| “weight small-caps” | “auto” | “none” | “auto” |
| “style small-caps” | “none” | “auto” | “auto” |
| “weight style small-caps” | “auto” | “auto” | “auto” |
使用例
太字のみ合成を許可する
<p>
彼女は「<q class="font-italic">猫は上のかぎり黒くてことはみな白き</q>」と記していた。つまり彼女は<b class="font-bold">おなかが白くて背中が黒い猫が一番良い</b>と思っていたのだ。しかし、HanakoはJag föredrar kalikokatterと言い放った。
</p>
.font-italic { font-style: italic;}
.font-bold { font-weight: bold;}
p {
font-variant-caps: small-caps;
font-synthesis: weight;
}
彼女は「猫は上のかぎり黒くてことはみな白き
」と記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと思っていたのだ。しかし、HanakoはJag föredrar kalikokatterと言い放った。
斜体のみ合成を許可する
<p>
彼女は「<q class="font-italic">猫は上のかぎり黒くてことはみな白き</q>」と記していた。つまり彼女は<b class="font-bold">おなかが白くて背中が黒い猫が一番良い</b>と思っていたのだ。しかし、HanakoはJag föredrar kalikokatterと言い放った。
</p>
.font-italic { font-style: italic;}
.font-bold { font-weight: bold;}
p {
font-variant-caps: small-caps;
font-synthesis: style;
}
彼女は「猫は上のかぎり黒くてことはみな白き
」と記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと思っていたのだ。しかし、HanakoはJag föredrar kalikokatterと言い放った。
スモールキャピタルのみ合成を許可する
<p>
彼女は「<q class="font-italic">猫は上のかぎり黒くてことはみな白き</q>」と記していた。つまり彼女は<b class="font-bold">おなかが白くて背中が黒い猫が一番良い</b>と思っていたのだ。しかし、HanakoはJag föredrar kalikokatterと言い放った。
</p>
.font-italic { font-style: italic;}
.font-bold { font-weight: bold;}
p {
font-variant-caps: small-caps;
font-synthesis: small-caps;
}
彼女は「猫は上のかぎり黒くてことはみな白き
」と記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと思っていたのだ。しかし、HanakoはJag föredrar kalikokatterと言い放った。
太字と斜体、スモールキャピタルの合成を許可しない
<p>
彼女は「<q class="font-italic">猫は上のかぎり黒くてことはみな白き</q>」と記していた。つまり彼女は<b class="font-bold">おなかが白くて背中が黒い猫が一番良い</b>と思っていたのだ。しかし、HanakoはJag föredrar kalikokatterと言い放った。
</p>
.font-italic { font-style: italic;}
.font-bold { font-weight: bold;}
p {
font-variant-caps: small-caps;
font-synthesis: none;
}
彼女は「猫は上のかぎり黒くてことはみな白き
」と記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと思っていたのだ。しかし、HanakoはJag föredrar kalikokatterと言い放った。
太字と斜体、スモールキャピタルの合成を許可する
<p>
彼女は「<q class="font-italic">猫は上のかぎり黒くてことはみな白き</q>」と記していた。つまり彼女は<b class="font-bold">おなかが白くて背中が黒い猫が一番良い</b>と思っていたのだ。しかし、HanakoはJag föredrar kalikokatterと言い放った。
</p>
.font-italic { font-style: italic;}
.font-bold { font-weight: bold;}
p {
font-variant-caps: small-caps;
font-synthesis: weight style small-caps;
}
彼女は「猫は上のかぎり黒くてことはみな白き
」と記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと思っていたのだ。しかし、HanakoはJag föredrar kalikokatterと言い放った。
細かく指定する
<p>
彼女は「<q class="font-italic">猫は上のかぎり黒くてことはみな白き</q>」と記していた。つまり彼女は<b class="font-bold">おなかが白くて背中が黒い猫が一番良い</b>と思っていたのだ。しかし、HanakoはJag föredrar kalikokatterと言い放った。
</p>
.font-italic { font-style: italic;}
.font-bold { font-weight: bold;}
p {
font-variant-caps: small-caps;
font-synthesis: weight style;
}
彼女は「猫は上のかぎり黒くてことはみな白き
」と記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと思っていたのだ。しかし、HanakoはJag föredrar kalikokatterと言い放った。
.font-italic { font-style: italic;}
.font-bold { font-weight: bold;}
p {
font-variant-caps: small-caps;
font-synthesis: weight small-caps;
}
彼女は「猫は上のかぎり黒くてことはみな白き
」と記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと思っていたのだ。しかし、HanakoはJag föredrar kalikokatterと言い放った。
.font-italic { font-style: italic;}
.font-bold { font-weight: bold;}
p {
font-variant-caps: small-caps;
font-synthesis: style small-caps;
}
彼女は「猫は上のかぎり黒くてことはみな白き
」と記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと思っていたのだ。しかし、HanakoはJag föredrar kalikokatterと言い放った。
