diff --git a/files/ja/web/css/font-synthesis-small-caps/index.md b/files/ja/web/css/font-synthesis-small-caps/index.md new file mode 100644 index 00000000000000..196aa20a58cc0e --- /dev/null +++ b/files/ja/web/css/font-synthesis-small-caps/index.md @@ -0,0 +1,95 @@ +--- +title: font-synthesis-small-caps +slug: Web/CSS/font-synthesis-small-caps +l10n: + sourceCommit: 28368ab728eed206d9069f5ba5b889e990ff810c +--- + +{{CSSRef}} + +**`font-synthesis-small-caps`** は [CSS](/ja/docs/Web/CSS) プロパティで、フォントファミリーにスモールキャップの書体がない場合に、ブラウザーがスモールキャップの書体を合成するかどうかを指定します。スモールキャップの字体は通常、大文字の形状を使用しますが、小文字のサイズに縮小されます。 + +すべての書体合成値を制御するために、多くの場合は一括指定プロパティ {{cssxref("font-synthesis")}} を使用した方が便利です。 + +## 構文 + +```css +/* キーワード値 */ +font-synthesis-small-caps: auto; +font-synthesis-small-caps: none; + +/* グローバル値 */ +font-synthesis-small-caps: inherit; +font-synthesis-small-caps: initial; +font-synthesis-small-caps: revert; +font-synthesis-small-caps: revert-layer; +font-synthesis-small-caps: unset; +``` + +### 値 + +- `auto` + - : 不足しているスモールキャップの書体は、必要に応じてブラウザーが合成する可能性があることを示します。 +- `none` + - : 不足しているスモールキャップの書体のブラウザーによる合成が許可されていないことを示します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### スモールキャップの書体の合成の無効化 + +この例は、 Montserrat フォントでブラウザーによるスモールキャップの書体の合成をオフにすることを示しています。 + +#### HTML + +```html-nolint +

+ これは既定の small-caps, + bold, oblique の書体です。 +

+ +

+ small-caps の書体はオフになりましたが、 boldoblique の書体はそうではありません。 +

+``` + +#### CSS + +```css +@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap"); + +.english { + font-family: "Montserrat", sans-serif; +} +.small-caps { + font-variant: small-caps; +} +.no-syn { + font-synthesis-small-caps: none; +} +``` + +#### 結果 + +{{EmbedLiveSample('Disabling synthesis of small-caps typeface', '', '100')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [font-synthesis](/ja/docs/Web/CSS/font-synthesis) shorthand, [font-synthesis-style](/ja/docs/Web/CSS/font-synthesis-style), [font-synthesis-weight](/ja/docs/Web/CSS/font-synthesis-weight) +- {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-weight")}} +- [CanvasRenderingContext2D: fontVariantCaps property](/ja/docs/Web/API/CanvasRenderingContext2D/fontVariantCaps) diff --git a/files/ja/web/css/font-synthesis-style/index.md b/files/ja/web/css/font-synthesis-style/index.md new file mode 100644 index 00000000000000..9844b0883cbe9a --- /dev/null +++ b/files/ja/web/css/font-synthesis-style/index.md @@ -0,0 +1,91 @@ +--- +title: font-synthesis-style +slug: Web/CSS/font-synthesis-style +l10n: + sourceCommit: 28368ab728eed206d9069f5ba5b889e990ff810c +--- + +{{CSSRef}} + +**`font-synthesis-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フォントファミリーに斜体書体がない場合に、ブラウザーが斜体書体を合成するかどうかを指定します。 + +すべての書体合成値を制御するために、多くの場合は一括指定プロパティ {{cssxref("font-synthesis")}} を使用した方が便利です。 + +## 構文 + +```css +/* キーワード値 */ +font-synthesis-style: auto; +font-synthesis-style: none; + +/* グローバル値 */ +font-synthesis-style: inherit; +font-synthesis-style: initial; +font-synthesis-style: revert; +font-synthesis-style: revert-layer; +font-synthesis-style: unset; +``` + +### 値 + +- `auto` + - : 不足している斜体書体は、必要に応じてブラウザーが合成する可能性があることを示します。 +- `none` + - : 不足している斜体書体のブラウザーによる合成が許可されていないことを示します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 斜体書体の合成の無効化 + +この例は、 Montserrat フォントでブラウザーによる斜体書体の合成をオフにすることを示しています。 + +#### HTML + +```html-nolint +

+ これは既定の oblique typeface と + bold typeface です。 +

+ +

+ oblique typeface はオフになりましたが、 bold typeface はそうでありません。 +

+``` + +#### CSS + +```css +@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap"); + +.english { + font-family: "Montserrat", sans-serif; +} +.no-syn { + font-synthesis-style: none; +} +``` + +#### 結果 + +{{EmbedLiveSample('Disabling synthesis of bold typeface', '', '100')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [font-synthesis](/ja/docs/Web/CSS/font-synthesis) shorthand, [font-synthesis-small-caps](/ja/docs/Web/CSS/font-synthesis-small-caps), [font-synthesis-weight](/ja/docs/Web/CSS/font-synthesis-weight) +- {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}} diff --git a/files/ja/web/css/font-synthesis-weight/index.md b/files/ja/web/css/font-synthesis-weight/index.md new file mode 100644 index 00000000000000..37036f871442a3 --- /dev/null +++ b/files/ja/web/css/font-synthesis-weight/index.md @@ -0,0 +1,90 @@ +--- +title: font-synthesis-weight +slug: Web/CSS/font-synthesis-weight +l10n: + sourceCommit: 28368ab728eed206d9069f5ba5b889e990ff810c +--- + +{{CSSRef}} + +**`font-synthesis-weight`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フォントファミリーに太字書体がない場合に、ブラウザーが合成するかどうかを指定します。 + +すべての書体合成値を制御するために、多くの場合は一括指定プロパティ {{cssxref("font-synthesis")}} を使用した方が便利です。 + +## 構文 + +```css +/* キーワード値 */ +font-synthesis-weight: auto; +font-synthesis-weight: none; + +/* グローバル値 */ +font-synthesis-weight: inherit; +font-synthesis-weight: initial; +font-synthesis-weight: revert; +font-synthesis-weight: revert-layer; +font-synthesis-weight: unset; +``` + +### 値 + +- `auto` + - : 不足している太字書体は、必要に応じてブラウザーが合成する可能性があることを示します。 +- `none` + - : 不足している太字書体のブラウザーによる合成が許可されていないことを示します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 太字書体の合成の無効化 + +この例は、 Montserrat フォントでブラウザーによる太字書体の合成をオフにすることを示しています。 + +#### HTML + +```html-nolint +

+ これは既定の bold typefaceoblique typeface です。 +

+ +

+ bold typeface はオフになりましたが、 oblique typeface はそうではありません。 +

+``` + +#### CSS + +```css +@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap"); + +.english { + font-family: "Montserrat", sans-serif; +} +.no-syn { + font-synthesis-weight: none; +} +``` + +#### 結果 + +{{EmbedLiveSample('Disabling synthesis of bold typeface', '', '100')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [font-synthesis](/ja/docs/Web/CSS/font-synthesis) 一括指定, [font-synthesis-small-caps](/ja/docs/Web/CSS/font-synthesis-small-caps), [font-synthesis-style](/ja/docs/Web/CSS/font-synthesis-style) +- {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}