From d0cb652b48ed2b14ff74e14938d04e0fa4e651e8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 3 Nov 2021 11:17:27 +0900 Subject: CSS Fonts のガイドを変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/css_fonts/opentype_fonts_guide/index.html | 235 ------------------ .../css/css_fonts/opentype_fonts_guide/index.md | 235 ++++++++++++++++++ .../css/css_fonts/variable_fonts_guide/index.html | 262 --------------------- .../css/css_fonts/variable_fonts_guide/index.md | 262 +++++++++++++++++++++ 4 files changed, 497 insertions(+), 497 deletions(-) delete mode 100644 files/ja/web/css/css_fonts/opentype_fonts_guide/index.html create mode 100644 files/ja/web/css/css_fonts/opentype_fonts_guide/index.md delete mode 100644 files/ja/web/css/css_fonts/variable_fonts_guide/index.html create mode 100644 files/ja/web/css/css_fonts/variable_fonts_guide/index.md (limited to 'files/ja/web/css/css_fonts') diff --git a/files/ja/web/css/css_fonts/opentype_fonts_guide/index.html b/files/ja/web/css/css_fonts/opentype_fonts_guide/index.html deleted file mode 100644 index 27d674de65..0000000000 --- a/files/ja/web/css/css_fonts/opentype_fonts_guide/index.html +++ /dev/null @@ -1,235 +0,0 @@ ---- -title: OpenTypeフォント機能の手引き -slug: Web/CSS/CSS_Fonts/OpenType_fonts_guide -tags: - - CSS - - Fonts - - Text -translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide ---- -

{{CSSRef}}

- -

フォントの機能及び派生とは，OpenTypeフォントに含まれる異なるグリフや文字様式を指します。これらには合字（「fi」又は「ffl」といった文字を組み合わせた特殊なグリフ），文字詰め（特定の字形の組の間隔の調整），分数，数字様式，及びその他多数が含まれます。これらは全てOpenType機能と呼ばれており，Web上での利用には特定のプロパティ郡及び低級制御プロパティの一つを介します――{{cssxref("font-feature-settings")}}。本稿ではCSSにおけるOpenTypeフォント機能の利用について，知っていなければならない全てを提供します。

- -

幾つかのフォントでは，前述の機能の内一つ又は複数個が既定で有効です（一般的な例: 字詰め及び既定合字）が，他の機能については，デザイナー又は開発者に，個別の事案で有効にするか否かの選択肢が委ねられています。

- -

In addition to broad feature sets like ligatures or lining figures (numerals that line up evenly as opposed to 'oldstyle', which look more like lower-case letters), there are also very specific ones such as stylistic sets (which might include several specific variants of glyphs meant to be used together), alternates (which might be one or more variants of the letter 'a'), or even language-specific alterations for East Asian languages. In the latter case, these alterations are actually necessary to properly express the language, so they go beyond the more stylistic preference of most other OpenType features.

- -
-

注意: There are many CSS attributes defined to leverage font features, but unfortunately many are not fully implemented. They are all defined and shown here, but many will only work using the lower-level {{cssxref("font-feature-settings")}} property. It's possible to write CSS to work both ways but this can become cumbersome. The issue with simply using font-feature-settings for everything is that every time you want to change one of the individual features, you have to redefine the entire string (similar to manipulating variable fonts with {{cssxref("font-variation-settings")}}).

-
- -

フォント機能の可用性を知る

- -

This is sometimes the trickiest thing to work out if you don't have any documentation that came with the fonts (many type designers and foundries will provide sample pages and CSS just for this very reason). But there are some sites that make it easier to figure out. You can visit wakamaifondue.com, drop your font file on the circle where instructed and in a few moments you'll have a full report on all the capabilities and features of your font. Axis-praxis.org also offers a similar capability, with the ability to click on the features to turn them on or off in a given text block.

- -

機能を利用する理由

- -

Given that these features take a bit of work to discover and use, it may seem a fair question to ask why one would bother to use them. The answer lies in the specific features that will make a site more useful, readable, and polished:

- - - -

While none of these features individually will render a site useless due to their absence, each of them in turn can make a site easier to use and more memorable for its attention to detail.

- -
-

OpenType 機能は、フォント内の隠し部屋にたとえられます。隠し部屋の扉を開ければ、フォントの外観や振る舞いを少し、あるいは劇的に変えるための方法がわかります。すべての OpenType 機能が常に利用に適しているわけではありませんが、一部の機能は優れたタイポグラフィを実現するために不可欠です。――OpenType機能の使用 - アドビ

-
- -

単なる様式ではなく，意味が丸ごと変わる場合も

- -

時として――{{cssxref("font-variant-east-asian")}}のように――OpenType機能は或る種のグリフ異形を用いるのに直接結び付いており，意味や可読性に影響を与える可能性があります。そのような場合，OpenType機能は単に細かな見栄えを調整する以上の，寧ろ内容そのものに不可欠な部分を役めます。

- -

フォント機能

- -

There are a number of different features to consider. They are grouped and explained here according to the main attributes and options covered in the W3C specifications.

- -
-

Note: The examples below show the properties and some example combinations, along with the lower-level syntax equivalents. They may not match exactly due to browser implementation inconsistencies, but in many cases the first example will match the second. The typefaces shown are Playfair Display, Source Serif Pro, IBM Plex Serif, Dancing Script, and Kokoro (all available and free to use, most are on Google Fonts and other services).

-
- -

字詰め ({{cssxref("font-kerning")}})

- -

This refers to the spacing between specific glyph pairings. This is generally on by default (as recommended by the OpenType specification). It should be noted that if {{cssxref("letter-spacing")}} is also set on your text, that is applied after kerning.

- -
{{EmbedGHLiveSample("css-examples/font-features/font-kerning.html", '100%', 520)}}
- -

代替 ({{cssxref("font-variant-alternates")}})

- -

Fonts can supply a number of different alternatives for various glyphs, such as different styles of lower case 'a' or more or less elaborate swashes in a script typeface. This property can activate an entire set of alternates or just a specific one, depending on the values supplied.The example below is showing several different aspects of working with alternate characters. Fonts with alternate glyphs can make them available across the board or individually in separate stylistic sets, or even individual characters. In this example you can see two different typefaces, and the introduction of the {{cssxref("@font-feature-values")}} at-rule. This is used to define shortcuts or named options that can be defined per font family. This way you can create a named option that applies to only a single font, or one that is shared and can be applied more generally

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}}
- -

In this case, @stylistic(alternates) will show all the alternate characters for either font). Applying this to just the word 'My' alters the way the 'M' renders, and applying @styleset(alt-a) only changes the lower case 'a'.

- -

Try changing the line

- -
font-variant-alternates: styleset(alt-a);
- -

to

- -
font-variant-alternates: styleset(alt-g);
-
- -

and notice that the lower case 'a' reverts to its regular form and the lower case 'g' changes instead.

- -

代替フォントについての詳細

- - - -

合字 ({{cssxref("font-variant-ligatures")}})

- -

Ligatures are glyphs that replace two or more separate glyphs in order to represent them more smoothly (from a spacing or aesthetic perspective). Some of the most common are letters like 'fi', 'fl', or 'ffl' — but there are many other possibilities. There are the most frequent ones (referred to as common ligatures), and there are also more specialized categories like 'discretionary ligatures', 'historical ligatures', and 'contextual alternates'. While these last ones are not technically ligatures, they are generally similar in that they replace specific combinations of letters when they appear together.

- -

While more common in script typefaces, in the below example they are used to create arrows:

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-ligatures.html", '100%', 540)}}
- -

位置 ({{cssxref("font-variant-position")}})

- -

Position variants are used to enable typographic superscript and subscript glyphs. These are designed to work with the surrounding text without altering the baseline or line spacing. This is one of the key benefits over using the {{htmlelement("sub")}} or {{cssxref("sup")}} elements.

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-position.html", '100%', 550)}}
- -

大・小文字 ({{cssxref("font-variant-caps")}})

- -

OpenType機能のより一般的な使用例の一つに，小英大文字の適切な使用があります。小英大文字とは，大文字を，小文字列の内でより適切に収まるような大きさにしたものであり，一般に頭文字及び略語に対して用います。

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-caps.html", '100%', 620)}}
- -

数字 ({{cssxref("font-variant-numeric")}})

- -

フォントに一般的に含まれる数字には，幾つか異なる様式があります。

- - - -

There is also the notion of spacing. Proportional spacing is the normal setting, whereas tabular spacing lines up numerals evenly regardless of character width, making it more appropriate for lining up tables of numbers in financial tables.

- -

本プロパティは二種類の分数に対応しています:

- - - -

序数にも対応しており（「1st」や「3rd」など），斜線付きゼロがフォントに存在するならば数字のゼロはそれになります。

- -

線引き及び旧式の数字

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric.html", '100%', 560)}}
- -

分数・序数・及び斜線付きゼロ

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-frac.html", '100%', 600)}}
- -

東亜 ({{cssxref("font-variant-east-asian")}})

- -

この機能を使ってフォント内の種々の代替形式グリフを参照できます。次の例ではOpenType文字集合'jis78'のみが有効化されたグリフの文字列を示しています。チェック欄のチェックを外すとより多くの文字が表示されます。

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}}
- -
-

注意: これらのグリフはフォント見本から複製したものであり，意味を成す文を意図していません。

-
- -

フォント変種（簡略構文）({{Cssxref("font-variant")}})

- -

This is the shorthand syntax for defining all of the above. Setting a value of normal resets all properties to their initial value. Setting a value of none sets font-variant-ligatures to none and all other properties to their initial value. (Meaning that if kerning is on by default, it will still be on even with a value of none being supplied here.)

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}}
- -

フォント機能の設定

- -

{{cssxref("font-feature-settings")}} is the 'low level syntax' that allows explicit access to every named available OpenType feature. This gives a lot of control, but has some disadvantages in how it impacts inheritance and — as mentioned above — if you wish to change one setting, you have to redeclare the entire string (unless you're using CSS custom properties to set the values). Because of this, it's best to use the standard properties shown above wherever possible.

- -

There a huge number of possible features. You can see examples of a number of them above, and there are several resources available for finding more of them.

- -

The general syntax looks like this:

- -
.small-caps {
-  font-feature-settings: "smcp", "c2sc";
-}
-
- -

According to the specification you can either supply just the 4-character feature code or supply a 1 following the code (for enabling that feature) or a 0 (zero) to disable it. This is helpful if you have a feature like ligatures enabled by default but you would like to turn them off, like so:

- -
.no-ligatures {
-  font-feature-settings: "liga" 0, "dlig" 0;
-}
- -

font-feature-settingsプロパティの詳細

- - - -

実装に対してCSS機能検出を用いる

- -

Since not all properties are evenly implemented, it's good practice to set up your CSS using feature detection to utilize the correct properties, with {{cssxref("font-feature-settings")}} as the fallback.

- -

For example, small caps can be set several ways, but if you want to ensure that no matter what the underlying capitalization is that you end up with everything in small caps, it requires 2 settings with font-feature-settings versus a single property value using {{cssxref("font-variant-caps")}}.

- -
.small-caps {
-   font-feature-settings: "smcp", "c2sc";
-}
-
-@supports (font-variant-caps: all-small-caps) {
-   .small-caps {
-       font-feature-settings: normal;
-       font-variant-caps: all-small-caps;
-   }
-}
-
- -

関連項目

- -

CSSによるCSSのOpenType機能の実演

- - - -

Webフォント解析ツール

- - - -

W3C標準:

- - - -

その他の文献

- - diff --git a/files/ja/web/css/css_fonts/opentype_fonts_guide/index.md b/files/ja/web/css/css_fonts/opentype_fonts_guide/index.md new file mode 100644 index 0000000000..27d674de65 --- /dev/null +++ b/files/ja/web/css/css_fonts/opentype_fonts_guide/index.md @@ -0,0 +1,235 @@ +--- +title: OpenTypeフォント機能の手引き +slug: Web/CSS/CSS_Fonts/OpenType_fonts_guide +tags: + - CSS + - Fonts + - Text +translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide +--- +

{{CSSRef}}

+ +

フォントの機能及び派生とは，OpenTypeフォントに含まれる異なるグリフや文字様式を指します。これらには合字（「fi」又は「ffl」といった文字を組み合わせた特殊なグリフ），文字詰め（特定の字形の組の間隔の調整），分数，数字様式，及びその他多数が含まれます。これらは全てOpenType機能と呼ばれており，Web上での利用には特定のプロパティ郡及び低級制御プロパティの一つを介します――{{cssxref("font-feature-settings")}}。本稿ではCSSにおけるOpenTypeフォント機能の利用について，知っていなければならない全てを提供します。

+ +

幾つかのフォントでは，前述の機能の内一つ又は複数個が既定で有効です（一般的な例: 字詰め及び既定合字）が，他の機能については，デザイナー又は開発者に，個別の事案で有効にするか否かの選択肢が委ねられています。

+ +

In addition to broad feature sets like ligatures or lining figures (numerals that line up evenly as opposed to 'oldstyle', which look more like lower-case letters), there are also very specific ones such as stylistic sets (which might include several specific variants of glyphs meant to be used together), alternates (which might be one or more variants of the letter 'a'), or even language-specific alterations for East Asian languages. In the latter case, these alterations are actually necessary to properly express the language, so they go beyond the more stylistic preference of most other OpenType features.

+ +
+

注意: There are many CSS attributes defined to leverage font features, but unfortunately many are not fully implemented. They are all defined and shown here, but many will only work using the lower-level {{cssxref("font-feature-settings")}} property. It's possible to write CSS to work both ways but this can become cumbersome. The issue with simply using font-feature-settings for everything is that every time you want to change one of the individual features, you have to redefine the entire string (similar to manipulating variable fonts with {{cssxref("font-variation-settings")}}).

+
+ +

フォント機能の可用性を知る

+ +

This is sometimes the trickiest thing to work out if you don't have any documentation that came with the fonts (many type designers and foundries will provide sample pages and CSS just for this very reason). But there are some sites that make it easier to figure out. You can visit wakamaifondue.com, drop your font file on the circle where instructed and in a few moments you'll have a full report on all the capabilities and features of your font. Axis-praxis.org also offers a similar capability, with the ability to click on the features to turn them on or off in a given text block.

+ +

機能を利用する理由

+ +

Given that these features take a bit of work to discover and use, it may seem a fair question to ask why one would bother to use them. The answer lies in the specific features that will make a site more useful, readable, and polished:

+ + + +

While none of these features individually will render a site useless due to their absence, each of them in turn can make a site easier to use and more memorable for its attention to detail.

+ +
+

OpenType 機能は、フォント内の隠し部屋にたとえられます。隠し部屋の扉を開ければ、フォントの外観や振る舞いを少し、あるいは劇的に変えるための方法がわかります。すべての OpenType 機能が常に利用に適しているわけではありませんが、一部の機能は優れたタイポグラフィを実現するために不可欠です。――OpenType機能の使用 - アドビ

+
+ +

単なる様式ではなく，意味が丸ごと変わる場合も

+ +

時として――{{cssxref("font-variant-east-asian")}}のように――OpenType機能は或る種のグリフ異形を用いるのに直接結び付いており，意味や可読性に影響を与える可能性があります。そのような場合，OpenType機能は単に細かな見栄えを調整する以上の，寧ろ内容そのものに不可欠な部分を役めます。

+ +

フォント機能

+ +

There are a number of different features to consider. They are grouped and explained here according to the main attributes and options covered in the W3C specifications.

+ +
+

Note: The examples below show the properties and some example combinations, along with the lower-level syntax equivalents. They may not match exactly due to browser implementation inconsistencies, but in many cases the first example will match the second. The typefaces shown are Playfair Display, Source Serif Pro, IBM Plex Serif, Dancing Script, and Kokoro (all available and free to use, most are on Google Fonts and other services).

+
+ +

字詰め ({{cssxref("font-kerning")}})

+ +

This refers to the spacing between specific glyph pairings. This is generally on by default (as recommended by the OpenType specification). It should be noted that if {{cssxref("letter-spacing")}} is also set on your text, that is applied after kerning.

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-kerning.html", '100%', 520)}}
+ +

代替 ({{cssxref("font-variant-alternates")}})

+ +

Fonts can supply a number of different alternatives for various glyphs, such as different styles of lower case 'a' or more or less elaborate swashes in a script typeface. This property can activate an entire set of alternates or just a specific one, depending on the values supplied.The example below is showing several different aspects of working with alternate characters. Fonts with alternate glyphs can make them available across the board or individually in separate stylistic sets, or even individual characters. In this example you can see two different typefaces, and the introduction of the {{cssxref("@font-feature-values")}} at-rule. This is used to define shortcuts or named options that can be defined per font family. This way you can create a named option that applies to only a single font, or one that is shared and can be applied more generally

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}}
+ +

In this case, @stylistic(alternates) will show all the alternate characters for either font). Applying this to just the word 'My' alters the way the 'M' renders, and applying @styleset(alt-a) only changes the lower case 'a'.

+ +

Try changing the line

+ +
font-variant-alternates: styleset(alt-a);
+ +

to

+ +
font-variant-alternates: styleset(alt-g);
+
+ +

and notice that the lower case 'a' reverts to its regular form and the lower case 'g' changes instead.

+ +

代替フォントについての詳細

+ + + +

合字 ({{cssxref("font-variant-ligatures")}})

+ +

Ligatures are glyphs that replace two or more separate glyphs in order to represent them more smoothly (from a spacing or aesthetic perspective). Some of the most common are letters like 'fi', 'fl', or 'ffl' — but there are many other possibilities. There are the most frequent ones (referred to as common ligatures), and there are also more specialized categories like 'discretionary ligatures', 'historical ligatures', and 'contextual alternates'. While these last ones are not technically ligatures, they are generally similar in that they replace specific combinations of letters when they appear together.

+ +

While more common in script typefaces, in the below example they are used to create arrows:

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-ligatures.html", '100%', 540)}}
+ +

位置 ({{cssxref("font-variant-position")}})

+ +

Position variants are used to enable typographic superscript and subscript glyphs. These are designed to work with the surrounding text without altering the baseline or line spacing. This is one of the key benefits over using the {{htmlelement("sub")}} or {{cssxref("sup")}} elements.

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-position.html", '100%', 550)}}
+ +

大・小文字 ({{cssxref("font-variant-caps")}})

+ +

OpenType機能のより一般的な使用例の一つに，小英大文字の適切な使用があります。小英大文字とは，大文字を，小文字列の内でより適切に収まるような大きさにしたものであり，一般に頭文字及び略語に対して用います。

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-caps.html", '100%', 620)}}
+ +

数字 ({{cssxref("font-variant-numeric")}})

+ +

フォントに一般的に含まれる数字には，幾つか異なる様式があります。

+ + + +

There is also the notion of spacing. Proportional spacing is the normal setting, whereas tabular spacing lines up numerals evenly regardless of character width, making it more appropriate for lining up tables of numbers in financial tables.

+ +

本プロパティは二種類の分数に対応しています:

+ + + +

序数にも対応しており（「1st」や「3rd」など），斜線付きゼロがフォントに存在するならば数字のゼロはそれになります。

+ +

線引き及び旧式の数字

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric.html", '100%', 560)}}
+ +

分数・序数・及び斜線付きゼロ

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-frac.html", '100%', 600)}}
+ +

東亜 ({{cssxref("font-variant-east-asian")}})

+ +

この機能を使ってフォント内の種々の代替形式グリフを参照できます。次の例ではOpenType文字集合'jis78'のみが有効化されたグリフの文字列を示しています。チェック欄のチェックを外すとより多くの文字が表示されます。

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}}
+ +
+

注意: これらのグリフはフォント見本から複製したものであり，意味を成す文を意図していません。

+
+ +

フォント変種（簡略構文）({{Cssxref("font-variant")}})

+ +

This is the shorthand syntax for defining all of the above. Setting a value of normal resets all properties to their initial value. Setting a value of none sets font-variant-ligatures to none and all other properties to their initial value. (Meaning that if kerning is on by default, it will still be on even with a value of none being supplied here.)

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}}
+ +

フォント機能の設定

+ +

{{cssxref("font-feature-settings")}} is the 'low level syntax' that allows explicit access to every named available OpenType feature. This gives a lot of control, but has some disadvantages in how it impacts inheritance and — as mentioned above — if you wish to change one setting, you have to redeclare the entire string (unless you're using CSS custom properties to set the values). Because of this, it's best to use the standard properties shown above wherever possible.

+ +

There a huge number of possible features. You can see examples of a number of them above, and there are several resources available for finding more of them.

+ +

The general syntax looks like this:

+ +
.small-caps {
+  font-feature-settings: "smcp", "c2sc";
+}
+
+ +

According to the specification you can either supply just the 4-character feature code or supply a 1 following the code (for enabling that feature) or a 0 (zero) to disable it. This is helpful if you have a feature like ligatures enabled by default but you would like to turn them off, like so:

+ +
.no-ligatures {
+  font-feature-settings: "liga" 0, "dlig" 0;
+}
+ +

font-feature-settingsプロパティの詳細

+ + + +

実装に対してCSS機能検出を用いる

+ +

Since not all properties are evenly implemented, it's good practice to set up your CSS using feature detection to utilize the correct properties, with {{cssxref("font-feature-settings")}} as the fallback.

+ +

For example, small caps can be set several ways, but if you want to ensure that no matter what the underlying capitalization is that you end up with everything in small caps, it requires 2 settings with font-feature-settings versus a single property value using {{cssxref("font-variant-caps")}}.

+ +
.small-caps {
+   font-feature-settings: "smcp", "c2sc";
+}
+
+@supports (font-variant-caps: all-small-caps) {
+   .small-caps {
+       font-feature-settings: normal;
+       font-variant-caps: all-small-caps;
+   }
+}
+
+ +

関連項目

+ +

CSSによるCSSのOpenType機能の実演

+ + + +

Webフォント解析ツール

+ + + +

W3C標準:

+ + + +

その他の文献

+ + diff --git a/files/ja/web/css/css_fonts/variable_fonts_guide/index.html b/files/ja/web/css/css_fonts/variable_fonts_guide/index.html deleted file mode 100644 index f5be8ef59b..0000000000 --- a/files/ja/web/css/css_fonts/variable_fonts_guide/index.html +++ /dev/null @@ -1,262 +0,0 @@ ---- -title: バリアブルフォントガイド -slug: Web/CSS/CSS_Fonts/Variable_Fonts_Guide -tags: - - CSS - - Fonts - - Guide - - Text - - variable fonts - - web fonts -translation_of: Web/CSS/CSS_Fonts/Variable_Fonts_Guide ---- -
{{CSSRef}}
- -

バリアブルフォントは幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを 1 つのファイルに組み込むことができる OpenType フォント仕様の進化版です。CSS および単一の {{cssxref("@font-face")}} 参照を介して、特定のフォントファイルに含まれるすべてのバリエーションにアクセスできます。この記事では、バリアブルフォントの使用を開始するために知っておく必要があるすべての内容を説明します。

- -
-

警告: OS でバリアブルフォントを使用するには、最新のフォントであることを確認してください。たとえば、Linux 系の OS には最新の Linux Freetype バージョンが必要であり、10.13 より前の macOS はバリアブルフォントに対応していません。OS が最新でない場合、ウェブページや Firefox 開発ツールでバリアブルフォントを使用できません。

-
- -

バリアブルフォント: 何であるか、何が違うのか

- -

バリアブルフォントの違いをよりよく理解するためには、バリアブルでないフォントが何であり、どのように比較するかを確認するのがいいでしょう。

- -

標準 (または静的) フォント

- -

以前は、一つの書体がいくつもの個別のフォントとして作成され、それぞれのフォントが特定の幅/太さ/スタイルの組み合わせを表していました。したがって 'Roboto Regular'、'Roboto Bold'、'Roboto Bold Italic' のように個別のファイルがありました。— すなわち、完全な書体を表すのに 20～30 に及ぶ異なるフォントファイルで表していました (幅の異なる大きな書体の数倍になる場合もありました)。

- -

このようなシナリオでは、サイトで一般的に使用される書体を本文に使用するためには、少なくとも通常、イタリック、太字、太字イタリックの 4 つのファイルが必要になります。キャプションには細字を、強調には太字を、といったように、より多くの太さをを追加したい場合は、さらにいくつかのファイルが必要になります。その結果、HTTP リクエストが多くなり、ダウンロードされるデータも多くなります (通常は 1 ファイルあたり約 20k 以上)。

- -

バリアブルフォント

- -

バリアブルフォントでは、それらのすべての組み合わせを 1 つのファイルに収めることができます。そのファイルは単一のフォントよりも大きくなりますが、たいていの場合は、本文の表示用に読み込んだ 4 つのファイルよりも小さいか、同じくらいのサイズになります。バリアブルフォントを選択する利点は、以前は別々に読み込んでいたものをいくつかだけに制限されるのではなく、利用可能な太さや幅、スタイルの全範囲にアクセスできることです。

- -

これにより、各サイズでの読みやすさを高めるために異なるサイズの見出しを異なる太さで設定したり、データの多い表示には幅をやや狭くしたりするなど、一般的な書体技術が可能になります。比較のために、雑誌の書体システムでは、出版物全体で10～15種類以上の異なる太さと幅の組み合わせを使用するのが一般的で、現在のウェブ上の一般的なスタイルよりもはるかに幅広いスタイルを提供しています (実際にはパフォーマンスの理由だけで実用的です)。

- -

フォントファミリ、太さ、バリアントについての注意

- -

それぞれの太さやスタイル (太字、イタリック、太字イタリックなど) をブラウザーが合成することに頼るのではなく、個別に特定のフォントファイルを持つという話をしてきたことに気づくかもしれません。その理由は、ほとんどの書体は太字と斜体についてとても特殊なデザインを持っており、その中にはまったく異なる文字が含まれていることが多いからです (例えば、小文字の 'a' と 'g' は斜体ではかなり異なることが多いです)。書体デザインを最も正確に反映させ、ブラウザーによる違いや、異なるスタイルを合成するかどうかの違いを避けるためには、バリアブルではないフォントを使用する場合には、必要な場所に具体的なフォントファイルを読み込む方が正確です。

- -

また、バリアブルフォントによっては 2 つのファイルに分割されていることに気づくかもしれません。 1 つは直立とそのすべての変化形、もう 1 つはイタリックの変化形を含むファイルです。これは、イタリック体を必要としない場合や使用しない場合に、全体のファイルサイズを小さくするために行われることがあります。いずれの場合も、共通の {{cssxref("font-family")}} 名でそれらをリンクさせることができるので、同じ font-family と適切な {{cssxref("font-style")}} を使ってそれらを呼び出すことができます。

- -

「バリエーション軸」の紹介

- -

新しい可変フォントフォーマットの中核をなすのは、書体デザインの特定の側面の許容範囲を記述するバリエーション軸の概念です。すなわち、「太さ軸」は書体の太さや細さを表し、「幅軸」は書体の幅が広いか狭いかを表し、「イタリック軸」はイタリック体の書体であるかどうかを表し、それに応じてオン/オフを切り替えることができます。軸は範囲またはバイナリの選択が可能であることに注意してください。重みは 1-999 の範囲ですが、イタリックは単純に 0 か 1 (オフかオンか) です。

- -

As defined in the specification, there are two kinds of axes: registered and custom:

- - - -

登録済みの軸と既存の CSS 属性

- -

In this section we'll demonstrate the five registered axes defined with examples and the corresponding CSS. Where possible, both the standard and lower-level syntax are included. The lower-level syntax ({{cssxref("font-variation-settings")}}) was the first mechanism implemented in order to test the early implementations of variable font support, and is necessary to utilize new or custom axes beyond the five registered ones. However, the W3C’s intent was for this syntax not to be used when other attributes are available. Therefore wherever possible, the appropriate property should be used, with the lower-level syntax of font-variation-settings only being used to set values or axes not available otherwise.

- -

注

- -
    -
  1. -

    When using font-variation-settings it is important to note that axis names are case-sensitive. The registered axis names must be in lower case, and custom axes must be in upper case. For example:

    - - 
    font-variation-settings: 'wght' 375, 'GRAD' 88;
    - -

    wght (weight) is a registered axis, and GRAD (grade) is a custom one.

    -
    2. -
  2. -

    If you have set values using font-variation-settings and want to change one of those values, you must redeclare all of them (in the same way as when you set OpenType font features using {{cssxref("font-feature-settings")}}). You can work around this limitation by using CSS Custom Properties (CSS variables) for the individual values, and simply modifying the value of an individual custom property. Example code follows at the end of the guide.

    -
    3. -
- -

太さ

- -

Weight (represented by the wght tag) defines the design axis of how thin or thick (light or heavy, in typical typographic terms) the strokes of the letterforms can be. For a long time in CSS there has existed the ability to specify this via the {{cssxref("font-weight")}} property, which takes numeric values ranging from 100 to 900 in increments of 100, and keywords like normal or bold, which are simply aliases for their corresponding numeric values (400 and 700 in this case). These are still applied when dealing with non-variable or variable fonts, but with variable ones, any number from 1 to 1000 is now valid.

- -

It should be noted that at this point there is no way in the @font-face declaration to 'map' a specific point on the variation axis of a variable font to the keyword bold (or any other keyword). This can generally be resolved fairly easily, but does require an extra step in writing your CSS:

- -
font-weight: 375;
-
-font-variation-settings: 'wght' 375;
- -

The following live example's CSS can be edited to allow you to play with font weight values.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}
- -

幅

- -

Width (represented by the wdth tag) defines the design axis of how narrow or wide (condensed or extended, in typographic terms) the letterforms can be. This is typically set in CSS using the {{cssxref("font-stretch")}} property, with values expressed as a percentage above or below ‘normal’ (100%), any number greater than 0 is technically valid—though it is far more likely that the range would fall closer to the 100% mark, such as 75%-125%. If a number value supplied is outside the range encoded in the font, the browser should render the font at the closest value allowed.

- -
-

注: The % symbol is not used when utilizing font-variation-settings.

-
- -
font-stretch: 115%;
-
-font-variation-settings: 'wdth' 115;
-
- -

The following live example's CSS can be edited to allow you to play with font width values.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/width.html", '100%', 520)}}
- -

イタリック

- -

The Italic (ital) axis works differently in that it is either on or off; there is no in-between. Italic designs often include dramatically different letterforms from their upright counterparts, so in the transition from upright to italic, a number of glyph (or character) substitutions usually occur. Italic and oblique are often used somewhat interchangeably, but in truth are actually quite different. Oblique is defined in this context with the term slant (see the below section), and a typeface would typically have one or the other, but not both.

- -

In CSS, both italic and oblique are applied to text using the {{cssxref("font-style")}} property. Also note the introduction of font-synthesis: none;—which will prevent browsers from accidentally applying the variation axis and a synthesized italic. This can be used to prevent faux-bolding as well.

- -
font-style: italic;
-
-font-variation-settings: 'ital' 1;
-
-font-synthesis: none;
- -

The following live example's CSS can be edited to allow you to play with font italics.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/italic.html", '100%', 520)}}
- -

傾き

- -

Slant (represented by the slnt tag), or as it's often referred to, 'oblique' — is different to true italics in that it changes the angle of the letterforms but doesn’t perform any kind of character substitution. It is also variable, in that it is expressed as a numeric range. This allows the font to be varied anywhere along that axis. The allowed range is generally 0 (upright) to 20 degrees — any number value along that range can be supplied, so the font can be slanted just a tiny bit. However, any value from -90–90 degrees is valid.

- -
-

注: The deg keyword is not used when utilizing font-variation-settings.

-
- -
font-style: oblique 14deg;
-
-font-variation-settings: 'slnt' 14;
- -

The following live example's CSS can be edited to allow you to play with font slant/oblique values.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}
- -

Optical size

- -

This is something new to digital fonts and CSS, but is actually a centuries-old technique in designing and creating metal type. Optical sizing refers to the practice of varying the overall stroke thickness of letterforms based on physical size. If the size was very small (such as an equivalent to 10 or 12px), the characters would have an overall thicker stroke, and perhaps other small modifications to ensure that it would reproduce and be readable at a physically smaller size. Conversely, when a much larger size was being used (like 48 or 60px), there might be much greater variation in thick and thin stroke weights, showing the typeface design more in line with the original intent.

- -

While this was originally done to compensate for the ink and paper printing process (very thin lines at small sizes often didn’t print, giving the letterforms a broken appearance), it translates well to digital displays when compensating for screen quality and physical size rendering.

- -

Optical size values are generally intended to be automatically applied corresponding to font-size, but can also be manipulated using the lower-level font-variation-settings syntax.

- -

There is a new attribute, {{cssxref("font-optical-sizing")}}, created to support variable fonts in CSS. When using font-optical-sizing, the only allowed values are auto or none — so this attribute only allows for turning optical sizing on or off. However when using font-variation-settings: 'opsz' <num>, you can supply a numeric value. In most cases you would want to match the font-size (the physical size the type is being rendered) with the opsz value (which is how optical sizing is intended to be applied when using auto). The option to provide a specific value is provided so that should it be necessary to override the default — for legibility, aesthetic, or some other reason — a specific value can be applied.

- -
font-optical-sizing: auto;
-
-font-variation-settings: 'opsz' 36;
- -

The following live example's CSS can be edited to allow you to play with optical size values.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/optical-sizing.html", '100%', 1020)}}
- -

カスタム軸

- -

Custom axes are just that: they can be any axis of design variation that the typeface designer imagines. There may be some that become fairly common — or even become registered — but only time will tell.

- -

グレード

- -

Grade may become one of the more common custom axes as it has a known history in typeface design. The practice of designing different grades of a typeface was often done in reaction to intended use and printing technique. The term 'grade' refers to the relative weight or density of the typeface design, but differs from traditional 'weight' in that the physical space the text occupies does not change, so changing the text grade doesn't change the overall layout of the text or elements around it. This makes grade a useful axis of variation as it can be varied or animated without causing reflow of the text itself.

- -
font-variation-settings: 'GRAD' 88;
- -

The following live example's CSS can be edited to allow you to play with font grade values.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/grade.html", '100%', 520)}}
- -

バリアブルフォントの使用: @font-face の変更

- -

The syntax for loading variable fonts is very similar to any other web font, with a few notable differences, which are provided via upgrades to the traditional {{cssxref("@font-face")}} syntax now available in modern browsers.

- -

The basic syntax is the same, but the font technology can be specified, and allowable ranges for descriptors like font-weight and font-stretch can be supplied, rather than named according to the font file being loaded.

- -

標準の直立の (ローマン) フォントの例

- -
@font-face {
- font-family: 'MyVariableFontName';
- src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
- font-weight: 125 950;
- font-stretch: 75% 125%;
- font-style: normal;
-}
-
- -

Example for a font that includes both upright and italics:

- -
@font-face {
- font-family: 'MyVariableFontName';
- src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
- font-weight: 125 950;
- font-stretch: 75% 125%;
- font-style: oblique 0deg 20deg;
-}
- -
-

注: there is no set specific value for the upper-end degree measurement in this case; they simply indicate that there is an axis so the browser can know to render upright or italic (remember that italics are only on or off)

-
- -

Example for a font that contains only italics and no upright characters:

- -
@font-face {
- font-family: 'MyVariableFontName';
- src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
- font-weight: 125 950;
- font-stretch: 75% 125%;
- font-style: italic;
-}
- -

Example for a font that contains an oblique (slant) axis:

- -
@font-face {
- font-family: 'MyVariableFontName';
- src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
- font-weight: 125 950;
- font-stretch: 75% 125%;
- font-style: oblique 0deg 12deg;
-}
- -
-

注: Not all browsers have implemented the full syntax for font format, so test carefully. All browsers that support variable fonts will still render them if you set the format to just the file format, rather than format-variations (i.e. woff2 instead of woff2-variations), but it’s best to use the proper syntax if possible.

-
- -
-

注: Supplying value ranges for font-weight, font-stretch, and font-style will keep the browser from attempting to render an axis outside that range if you are using the appropriate attribute (i.e. font-weight or font-stretch), but will not block you from supplying an invalid value via font-variation-settings, so use with care.

-
- -

古いブラウザーでの作業

- -

Variable font support can be checked with CSS Feature Queries (see {{cssxref("@supports")}}), so it's possible to use variable fonts in production and scope the CSS calling the variable fonts inside a feature query block.

- -
h1 {
- font-family: some-non-variable-font-family;
-}
-
-@supports (font-variation-settings: 'wdth' 115) {
- h1 {
-    font-family: some-variable-font-family;
- }
-}
- -

サンプルページ

- -

The following example pages show two different ways to structure your CSS. The first uses the standard attributes wherever possible. The second example uses CSS Custom Properties to set values for a font-variation-settings string, and shows how you can more easily update single variable values by overriding a single variable rather than rewriting the whole string. Note the hover effect on the h2, which only alters the grade axis custom property value.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/sample-page.html", '100%', 1220)}}
- -

リソース

- - diff --git a/files/ja/web/css/css_fonts/variable_fonts_guide/index.md b/files/ja/web/css/css_fonts/variable_fonts_guide/index.md new file mode 100644 index 0000000000..f5be8ef59b --- /dev/null +++ b/files/ja/web/css/css_fonts/variable_fonts_guide/index.md @@ -0,0 +1,262 @@ +--- +title: バリアブルフォントガイド +slug: Web/CSS/CSS_Fonts/Variable_Fonts_Guide +tags: + - CSS + - Fonts + - Guide + - Text + - variable fonts + - web fonts +translation_of: Web/CSS/CSS_Fonts/Variable_Fonts_Guide +--- +
{{CSSRef}}
+ +

バリアブルフォントは幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを 1 つのファイルに組み込むことができる OpenType フォント仕様の進化版です。CSS および単一の {{cssxref("@font-face")}} 参照を介して、特定のフォントファイルに含まれるすべてのバリエーションにアクセスできます。この記事では、バリアブルフォントの使用を開始するために知っておく必要があるすべての内容を説明します。

+ +
+

警告: OS でバリアブルフォントを使用するには、最新のフォントであることを確認してください。たとえば、Linux 系の OS には最新の Linux Freetype バージョンが必要であり、10.13 より前の macOS はバリアブルフォントに対応していません。OS が最新でない場合、ウェブページや Firefox 開発ツールでバリアブルフォントを使用できません。

+
+ +

バリアブルフォント: 何であるか、何が違うのか

+ +

バリアブルフォントの違いをよりよく理解するためには、バリアブルでないフォントが何であり、どのように比較するかを確認するのがいいでしょう。

+ +

標準 (または静的) フォント

+ +

以前は、一つの書体がいくつもの個別のフォントとして作成され、それぞれのフォントが特定の幅/太さ/スタイルの組み合わせを表していました。したがって 'Roboto Regular'、'Roboto Bold'、'Roboto Bold Italic' のように個別のファイルがありました。— すなわち、完全な書体を表すのに 20～30 に及ぶ異なるフォントファイルで表していました (幅の異なる大きな書体の数倍になる場合もありました)。

+ +

このようなシナリオでは、サイトで一般的に使用される書体を本文に使用するためには、少なくとも通常、イタリック、太字、太字イタリックの 4 つのファイルが必要になります。キャプションには細字を、強調には太字を、といったように、より多くの太さをを追加したい場合は、さらにいくつかのファイルが必要になります。その結果、HTTP リクエストが多くなり、ダウンロードされるデータも多くなります (通常は 1 ファイルあたり約 20k 以上)。

+ +

バリアブルフォント

+ +

バリアブルフォントでは、それらのすべての組み合わせを 1 つのファイルに収めることができます。そのファイルは単一のフォントよりも大きくなりますが、たいていの場合は、本文の表示用に読み込んだ 4 つのファイルよりも小さいか、同じくらいのサイズになります。バリアブルフォントを選択する利点は、以前は別々に読み込んでいたものをいくつかだけに制限されるのではなく、利用可能な太さや幅、スタイルの全範囲にアクセスできることです。

+ +

これにより、各サイズでの読みやすさを高めるために異なるサイズの見出しを異なる太さで設定したり、データの多い表示には幅をやや狭くしたりするなど、一般的な書体技術が可能になります。比較のために、雑誌の書体システムでは、出版物全体で10～15種類以上の異なる太さと幅の組み合わせを使用するのが一般的で、現在のウェブ上の一般的なスタイルよりもはるかに幅広いスタイルを提供しています (実際にはパフォーマンスの理由だけで実用的です)。

+ +

フォントファミリ、太さ、バリアントについての注意

+ +

それぞれの太さやスタイル (太字、イタリック、太字イタリックなど) をブラウザーが合成することに頼るのではなく、個別に特定のフォントファイルを持つという話をしてきたことに気づくかもしれません。その理由は、ほとんどの書体は太字と斜体についてとても特殊なデザインを持っており、その中にはまったく異なる文字が含まれていることが多いからです (例えば、小文字の 'a' と 'g' は斜体ではかなり異なることが多いです)。書体デザインを最も正確に反映させ、ブラウザーによる違いや、異なるスタイルを合成するかどうかの違いを避けるためには、バリアブルではないフォントを使用する場合には、必要な場所に具体的なフォントファイルを読み込む方が正確です。

+ +

また、バリアブルフォントによっては 2 つのファイルに分割されていることに気づくかもしれません。 1 つは直立とそのすべての変化形、もう 1 つはイタリックの変化形を含むファイルです。これは、イタリック体を必要としない場合や使用しない場合に、全体のファイルサイズを小さくするために行われることがあります。いずれの場合も、共通の {{cssxref("font-family")}} 名でそれらをリンクさせることができるので、同じ font-family と適切な {{cssxref("font-style")}} を使ってそれらを呼び出すことができます。

+ +

「バリエーション軸」の紹介

+ +

新しい可変フォントフォーマットの中核をなすのは、書体デザインの特定の側面の許容範囲を記述するバリエーション軸の概念です。すなわち、「太さ軸」は書体の太さや細さを表し、「幅軸」は書体の幅が広いか狭いかを表し、「イタリック軸」はイタリック体の書体であるかどうかを表し、それに応じてオン/オフを切り替えることができます。軸は範囲またはバイナリの選択が可能であることに注意してください。重みは 1-999 の範囲ですが、イタリックは単純に 0 か 1 (オフかオンか) です。

+ +

As defined in the specification, there are two kinds of axes: registered and custom:

+ + + +

登録済みの軸と既存の CSS 属性

+ +

In this section we'll demonstrate the five registered axes defined with examples and the corresponding CSS. Where possible, both the standard and lower-level syntax are included. The lower-level syntax ({{cssxref("font-variation-settings")}}) was the first mechanism implemented in order to test the early implementations of variable font support, and is necessary to utilize new or custom axes beyond the five registered ones. However, the W3C’s intent was for this syntax not to be used when other attributes are available. Therefore wherever possible, the appropriate property should be used, with the lower-level syntax of font-variation-settings only being used to set values or axes not available otherwise.

+ +

注

+ +
    +
  1. +

    When using font-variation-settings it is important to note that axis names are case-sensitive. The registered axis names must be in lower case, and custom axes must be in upper case. For example:

    + + 
    font-variation-settings: 'wght' 375, 'GRAD' 88;
    + +

    wght (weight) is a registered axis, and GRAD (grade) is a custom one.

    +
    2. +
  2. +

    If you have set values using font-variation-settings and want to change one of those values, you must redeclare all of them (in the same way as when you set OpenType font features using {{cssxref("font-feature-settings")}}). You can work around this limitation by using CSS Custom Properties (CSS variables) for the individual values, and simply modifying the value of an individual custom property. Example code follows at the end of the guide.

    +
    3. +
+ +

太さ

+ +

Weight (represented by the wght tag) defines the design axis of how thin or thick (light or heavy, in typical typographic terms) the strokes of the letterforms can be. For a long time in CSS there has existed the ability to specify this via the {{cssxref("font-weight")}} property, which takes numeric values ranging from 100 to 900 in increments of 100, and keywords like normal or bold, which are simply aliases for their corresponding numeric values (400 and 700 in this case). These are still applied when dealing with non-variable or variable fonts, but with variable ones, any number from 1 to 1000 is now valid.

+ +

It should be noted that at this point there is no way in the @font-face declaration to 'map' a specific point on the variation axis of a variable font to the keyword bold (or any other keyword). This can generally be resolved fairly easily, but does require an extra step in writing your CSS:

+ +
font-weight: 375;
+
+font-variation-settings: 'wght' 375;
+ +

The following live example's CSS can be edited to allow you to play with font weight values.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}
+ +

幅

+ +

Width (represented by the wdth tag) defines the design axis of how narrow or wide (condensed or extended, in typographic terms) the letterforms can be. This is typically set in CSS using the {{cssxref("font-stretch")}} property, with values expressed as a percentage above or below ‘normal’ (100%), any number greater than 0 is technically valid—though it is far more likely that the range would fall closer to the 100% mark, such as 75%-125%. If a number value supplied is outside the range encoded in the font, the browser should render the font at the closest value allowed.

+ +
+

注: The % symbol is not used when utilizing font-variation-settings.

+
+ +
font-stretch: 115%;
+
+font-variation-settings: 'wdth' 115;
+
+ +

The following live example's CSS can be edited to allow you to play with font width values.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/width.html", '100%', 520)}}
+ +

イタリック

+ +

The Italic (ital) axis works differently in that it is either on or off; there is no in-between. Italic designs often include dramatically different letterforms from their upright counterparts, so in the transition from upright to italic, a number of glyph (or character) substitutions usually occur. Italic and oblique are often used somewhat interchangeably, but in truth are actually quite different. Oblique is defined in this context with the term slant (see the below section), and a typeface would typically have one or the other, but not both.

+ +

In CSS, both italic and oblique are applied to text using the {{cssxref("font-style")}} property. Also note the introduction of font-synthesis: none;—which will prevent browsers from accidentally applying the variation axis and a synthesized italic. This can be used to prevent faux-bolding as well.

+ +
font-style: italic;
+
+font-variation-settings: 'ital' 1;
+
+font-synthesis: none;
+ +

The following live example's CSS can be edited to allow you to play with font italics.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/italic.html", '100%', 520)}}
+ +

傾き

+ +

Slant (represented by the slnt tag), or as it's often referred to, 'oblique' — is different to true italics in that it changes the angle of the letterforms but doesn’t perform any kind of character substitution. It is also variable, in that it is expressed as a numeric range. This allows the font to be varied anywhere along that axis. The allowed range is generally 0 (upright) to 20 degrees — any number value along that range can be supplied, so the font can be slanted just a tiny bit. However, any value from -90–90 degrees is valid.

+ +
+

注: The deg keyword is not used when utilizing font-variation-settings.

+
+ +
font-style: oblique 14deg;
+
+font-variation-settings: 'slnt' 14;
+ +

The following live example's CSS can be edited to allow you to play with font slant/oblique values.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}
+ +

Optical size

+ +

This is something new to digital fonts and CSS, but is actually a centuries-old technique in designing and creating metal type. Optical sizing refers to the practice of varying the overall stroke thickness of letterforms based on physical size. If the size was very small (such as an equivalent to 10 or 12px), the characters would have an overall thicker stroke, and perhaps other small modifications to ensure that it would reproduce and be readable at a physically smaller size. Conversely, when a much larger size was being used (like 48 or 60px), there might be much greater variation in thick and thin stroke weights, showing the typeface design more in line with the original intent.

+ +

While this was originally done to compensate for the ink and paper printing process (very thin lines at small sizes often didn’t print, giving the letterforms a broken appearance), it translates well to digital displays when compensating for screen quality and physical size rendering.

+ +

Optical size values are generally intended to be automatically applied corresponding to font-size, but can also be manipulated using the lower-level font-variation-settings syntax.

+ +

There is a new attribute, {{cssxref("font-optical-sizing")}}, created to support variable fonts in CSS. When using font-optical-sizing, the only allowed values are auto or none — so this attribute only allows for turning optical sizing on or off. However when using font-variation-settings: 'opsz' <num>, you can supply a numeric value. In most cases you would want to match the font-size (the physical size the type is being rendered) with the opsz value (which is how optical sizing is intended to be applied when using auto). The option to provide a specific value is provided so that should it be necessary to override the default — for legibility, aesthetic, or some other reason — a specific value can be applied.

+ +
font-optical-sizing: auto;
+
+font-variation-settings: 'opsz' 36;
+ +

The following live example's CSS can be edited to allow you to play with optical size values.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/optical-sizing.html", '100%', 1020)}}
+ +

カスタム軸

+ +

Custom axes are just that: they can be any axis of design variation that the typeface designer imagines. There may be some that become fairly common — or even become registered — but only time will tell.

+ +

グレード

+ +

Grade may become one of the more common custom axes as it has a known history in typeface design. The practice of designing different grades of a typeface was often done in reaction to intended use and printing technique. The term 'grade' refers to the relative weight or density of the typeface design, but differs from traditional 'weight' in that the physical space the text occupies does not change, so changing the text grade doesn't change the overall layout of the text or elements around it. This makes grade a useful axis of variation as it can be varied or animated without causing reflow of the text itself.

+ +
font-variation-settings: 'GRAD' 88;
+ +

The following live example's CSS can be edited to allow you to play with font grade values.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/grade.html", '100%', 520)}}
+ +

バリアブルフォントの使用: @font-face の変更

+ +

The syntax for loading variable fonts is very similar to any other web font, with a few notable differences, which are provided via upgrades to the traditional {{cssxref("@font-face")}} syntax now available in modern browsers.

+ +

The basic syntax is the same, but the font technology can be specified, and allowable ranges for descriptors like font-weight and font-stretch can be supplied, rather than named according to the font file being loaded.

+ +

標準の直立の (ローマン) フォントの例

+ +
@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: normal;
+}
+
+ +

Example for a font that includes both upright and italics:

+ +
@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: oblique 0deg 20deg;
+}
+ +
+

注: there is no set specific value for the upper-end degree measurement in this case; they simply indicate that there is an axis so the browser can know to render upright or italic (remember that italics are only on or off)

+
+ +

Example for a font that contains only italics and no upright characters:

+ +
@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: italic;
+}
+ +

Example for a font that contains an oblique (slant) axis:

+ +
@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: oblique 0deg 12deg;
+}
+ +
+

注: Not all browsers have implemented the full syntax for font format, so test carefully. All browsers that support variable fonts will still render them if you set the format to just the file format, rather than format-variations (i.e. woff2 instead of woff2-variations), but it’s best to use the proper syntax if possible.

+
+ +
+

注: Supplying value ranges for font-weight, font-stretch, and font-style will keep the browser from attempting to render an axis outside that range if you are using the appropriate attribute (i.e. font-weight or font-stretch), but will not block you from supplying an invalid value via font-variation-settings, so use with care.

+
+ +

古いブラウザーでの作業

+ +

Variable font support can be checked with CSS Feature Queries (see {{cssxref("@supports")}}), so it's possible to use variable fonts in production and scope the CSS calling the variable fonts inside a feature query block.

+ +
h1 {
+ font-family: some-non-variable-font-family;
+}
+
+@supports (font-variation-settings: 'wdth' 115) {
+ h1 {
+    font-family: some-variable-font-family;
+ }
+}
+ +

サンプルページ

+ +

The following example pages show two different ways to structure your CSS. The first uses the standard attributes wherever possible. The second example uses CSS Custom Properties to set values for a font-variation-settings string, and shows how you can more easily update single variable values by overriding a single variable rather than rewriting the whole string. Note the hover effect on the h2, which only alters the grade axis custom property value.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/sample-page.html", '100%', 1220)}}
+ +

リソース

+ + -- cgit v1.2.3-54-g00ecf