From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/css_fonts/index.html | 140 +++++++++++++ .../css/css_fonts/opentype_fonts_guide/index.html | 219 ++++++++++++++++++++ .../css/css_fonts/variable_fonts_guide/index.html | 221 +++++++++++++++++++++ 3 files changed, 580 insertions(+) create mode 100644 files/zh-cn/web/css/css_fonts/index.html create mode 100644 files/zh-cn/web/css/css_fonts/opentype_fonts_guide/index.html create mode 100644 files/zh-cn/web/css/css_fonts/variable_fonts_guide/index.html (limited to 'files/zh-cn/web/css/css_fonts') diff --git a/files/zh-cn/web/css/css_fonts/index.html b/files/zh-cn/web/css/css_fonts/index.html new file mode 100644 index 0000000000..940c9fb0d0 --- /dev/null +++ b/files/zh-cn/web/css/css_fonts/index.html @@ -0,0 +1,140 @@ +--- +title: CSS Fonts +slug: Web/CSS/CSS_Fonts +translation_of: Web/CSS/CSS_Fonts +--- +
{{CSSRef}}
+ +

CSS Fonts 是一个CSS模块，它定义字体相关的属性和字体资源是如何加载的。它允许定义一个字体的样式，如字体样式、尺寸大小或字体宽度，以及要使用的字形的变体（加粗、斜体等），对于一个字符有几个字形的字体。

+ +

参考文献

+ +

属性

+ +
+ +
+ +

使用规则

+ +
+
{{cssxref("@font-face")}}
+
+
+
    +
  • {{cssxref("@font-face/font-family", "font-family")}}
    • +
  • {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}
    • +
  • {{cssxref("@font-face/font-style", "font-style")}}
    • +
  • {{cssxref("@font-face/font-variant", "font-variant")}}
    • +
  • {{cssxref("@font-face/font-weight", "font-weight")}}
    • +
  • {{cssxref("@font-face/font-stretch", "font-stretch")}}
    • +
  • {{cssxref("@font-face/src", "src")}}
    • +
  • {{cssxref("@font-face/unicode-range", "unicode-range")}}
    • +
+
+
+
{{cssxref("@font-feature-values")}}
+
+ +

Guide

+ +

None.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts')}}{{Spec2('CSS3 Fonts')}} 
{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#font', '')}}{{Spec2('CSS1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.01.0 (1.0)3.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/zh-cn/web/css/css_fonts/opentype_fonts_guide/index.html b/files/zh-cn/web/css/css_fonts/opentype_fonts_guide/index.html new file mode 100644 index 0000000000..ae65c0d099 --- /dev/null +++ b/files/zh-cn/web/css/css_fonts/opentype_fonts_guide/index.html @@ -0,0 +1,219 @@ +--- +title: OpenType 字体特性指南 +slug: Web/CSS/CSS_Fonts/OpenType_fonts_guide +translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide +--- +
 
+ +
{{CSSRef}}
+ +

字体特性（font feature）或变体（variant）指的是在同一个 OpenType 字体中包含的不同的字形或字母风格。 它包括了连字（ligature，由字符组合而成的特殊字形，如“fi”或“ffl” ），字偶距（kerning，调整特定字母组合的间距），分数形式，数字风格，和一票其他内容。这些都被称为 OpenType 特性，而且可以通过特定属性和一种底层属性指定（见 {{cssxref("font-feature-settings")}}）来控制。本文将介绍在 CSS 中使用 OpenType 字体特性的全部内容。

+ +

某些字体中启用了这些特性的一或多个（通常是字偶距 [kerning] 和默认连字），而其他特性留给设计师或开发者选择性地在特定场景中启用。

+ +

除了连字或齐行数字（数字排列均匀，而“老式”数字的看起来像小写字母）等广泛应用的特性，还有非常特殊的一部分，如样式集（stylistic set，可能含有几种特定的字形变体 [variant]，它们可以一起使用），甚至是特定的东亚文字的字形变化。最后一种情况，使用变更的字形对于恰当的表达非常必要，所以这些属性比起大部分样式集更加重要，也超过其他大部分 OpenType 特性。

+ +
+

注意：CSS 定义了很多的属性用以改变字体特性，然鹅很多没有完全实现。这里给出了所有属性的定义，但是大部分都只能用底层属性 {{cssxref("font-feature-settings")}} 来控制。可以同时使用两种方式定义 CSS，但是可能太笨重了。而只使用 font-feature-settings 控制一切的问题是，每次你要变动一个特性，就必须处理整个字符串（类似于用 {{cssxref("font-variation-settings")}} 操纵变量字体）。

+
+ +

了解字体的可用特性

+ +

有时，最麻烦的问题在于你没有字体的说明文档（许多字体设计师和厂商会提供样张和 CSS 范例，以便用户了解字体特性）。不过，有一些网站可以方便地显示出字体特性。例如，访问 wakamaifondue.com，把你的字体文件拖到圈里（页面上有提示），过一会就可以得到该字体文件功能、特性的完整报告。Axis-praxis.org 也提供类似的功能，只需点击一下字体特性，就可以在相应的文本块中打开或关闭这些特性。

+ +

为什么使用字体特性？

+ +

花工夫来了解和使用这些字体特性有些麻烦，因而提出这样的问题也是很正常的。问题的答案是，特定的字体特性可以使网站更有用、更易读、更优美：

+ + + +

虽说一个网站即使不用上述任何一个特性，也不会变得没用，但这里的每一种特性都可以令网站更便于使用，并因其对细节的关注而令人印象深刻。

+ +
+

OpenType 特性就像字体中的密室。打开它们，你将发现，你可以让字体或微妙或显著地展现出它的另一面。并非所有 OpenType 特性都可以不分场合地使用，但有些特性对于优秀的字体排印是至关重要的。——Tim Brown（Adobe 字体排印负责人）

+
+ +

有时它是实质，而不仅是样式

+ +

在有些情况下（比如 {{cssxref("font-variant-east-asian")}}），OpenType 特性直接关系到特定字符的不同形式，涉及意义和易读性的差别。此时，字体特性不再只是为了美观，而成为内容本身不可或缺的一部分。

+ +

字体特性

+ +

开发者需要考虑许多不同的字体特性。在这里，我们根据 W3C 规范的主要属性和选项将它们分门别类加以介绍。

+ +
+

提示：下列示例将展示各个属性及其组合，以及与之等价的底层语法。由于浏览器实现的差异，等价语法的效果可能不完全一致；但大多数情况下，两种示例是一模一样的。展示所用的字体有 Playfair Display，Source Serif Pro，IBM Plex Serif，Dancing Script，以及 Kokoro。以上字体均可获取并自由使用（大多可以从 Google Fonts 或其他字体服务中获取）。

+
+ +

字偶距（{{cssxref("font-kerning")}}）

+ +

字偶距（kerning）指的是特定字偶（字符组合）内部的间距。字偶距调整特性是默认打开的（OpenType 规范推荐）。应当注意的是，如果对文本同时设置了字偶距和词距（{{cssxref("letter-spacing")}}），词距调整会在字偶距调整之后进行。

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

Alternates ({{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.

+ +

More about alternates

+ + + +

连字（{{cssxref("font-variant-ligatures")}}）

+ +

为了让两个或以上的字符（在间距、审美方面）显得更匀称，可以把它们替换成另一种字形，即连字（ligature）。最常见的连字包括“fi，fl，ffl”之类的字母连字；此外，也有许多其他类型的连字。有些连字经常使用，称为常用连字（common ligatures）；也有一些连字更为特殊，比如“任意连字（discretionary ligatures）”、“历史连字（historical ligatures）”和“上下文连字（contextual alternates）”。尽管后几种在技术上不算是连字，但在“将特定字母组合一起出现时替换成另一种字形”这一点上，它们和连字是基本一致的。

+ +

尽管连字在文字中更为常用，以下示例也展示了如何用连字功能生成箭头：

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

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

+ +

位置变体用于调用排版中的上标和下标字形。设计这些上标、下标字形，是为了在不改变基线和行距的条件下，配合前后的文本使用。这是“位置”字体特性相比 {{htmlelement("sub")}} 或 {{htmlelement("sup")}} 元素的优势之一。

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

大写字母（{{cssxref("font-variant-caps")}}）

+ +

OpenType 特性最常用的情形之一，就是用来正确地呈现小型大写字母（small caps）。小型大写字母，是指尺寸经过调整，可以和小写字母更好搭配的大写字母，一般用于缩写词。

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

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

+ +

字体中通常包含几种不同风格的数字：

+ + + +

数字风格也和字距有关。比例（proportional）字距是一般设定；而表格（tabular）字距可以让数字对齐排列，不受字宽差异的影响，用在需要对齐数字的财务表格中尤为合适。

+ +

本属性支持两种分数形式：

+ + + +

本属性也支持序数（比如“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")}}）

+ +

本属性定义了以上所有属性的简写语法。设定 normal 值可以将所有属性重置为初始值。设定 none 值会把 font-variant-ligatures 设定为 none ，并重置其他属性为初始值。（这里的意思是说，如果字偶距特性是默认打开的，即使 {{cssxref("font-variant")}} 设置为 none，字偶距特性依然是打开的。）

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

Font feature settings

+ +

{{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;
+}
+ +

More on font-feature-settings codes

+ + + +

Using CSS feature detection for implementation

+ +

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 OpenType 特性演示

+ + + +

Web 字体分析工具

+ + + +

W3C 规范

+ + + +

其他资源

+ + diff --git a/files/zh-cn/web/css/css_fonts/variable_fonts_guide/index.html b/files/zh-cn/web/css/css_fonts/variable_fonts_guide/index.html new file mode 100644 index 0000000000..a79dba1cc3 --- /dev/null +++ b/files/zh-cn/web/css/css_fonts/variable_fonts_guide/index.html @@ -0,0 +1,221 @@ +--- +title: Variable fonts guide +slug: Web/CSS/CSS_Fonts/Variable_Fonts_Guide +tags: + - CSS + - web字体 + - 可变字体 + - 字体 + - 文本 +translation_of: Web/CSS/CSS_Fonts/Variable_Fonts_Guide +--- +

可变字体（Variable fonts）是OpenType字体规范上的演进，它允许将同一字体的多个变体统合进单独的字体文件中。从而无需再将不同字宽、字重或不同样式的字体分割成不同的字体文件。你只需通过CSS与一行{{cssxref("@font-face")}}引用，即可获取包含在这个单一文件中的各种字体变体。本文将介绍如何在Web中使用可变字体。

+ +
+

警告: 为了能够在您的操作系统上正确地使用可变字体，请确定您的操作系统已经升级到最新版本。例如各Linux发行版，应将Freetype升级到最新版本。10.13版本之前的macOS不支持可变字体。如果您的操作系统没有升级到最新版，您将无法在网页和Firefox Developer Tools中使用可变字体。

+
+ +

可变字体：何谓与何异

+ +

为了更好的理解可变字体有什么不同，我们有必要回顾一下什么是非可变字体，并对二者进行一番比较。

+ +

标准（静态）字体

+ +

过去，一个字体家族往往由大量独立字体文件组成，每个字体文件都代表某一特定的宽度/字重/样式的组合。因此你会看到有单独的字体文件叫做“Roboto Regular”、“Roboto Bold”，或是“Roboto Bold Italic”——这意味着你可能需要20或30个不同的字体文件才能算是有了一整个字体家族（对于有着不同宽度的大型字体来说，这个数量还要翻上几倍）。

+ +

在这样的情景下，为了在一个单纯显示进行正文展示的页面中使用一个字体，你至少需要四个字体文件：常规、斜体、加粗、斜体加粗。如果你想添加更多的字重，比如让题注更轻或让额外强调的地方更重，意味着你需要更多文件。这就导致了更多大量HTTP请求的产生，同时也需要下载更多的数据（通常每个文件至少有20k或更多）。

+ +

可变字体

+ +

通过使用可变字体，所有这些情况的排列组合都可以被装进一个文件中。这个文件可能比常规的单个字体文件大一些，但通常情况下，都不会大于，并且常常是小于你因为要展示正文所需要下载的四个文件的尺寸总和。使用可变字体的优势是你可以直接使用所有可用的字重、宽度和样式的字体，而不必像过去一样仅仅受限于使用其中单独的某一种。

+ +

这允许使用常见的排版技术，例如在不同的字重中设置不同大小的标题，以便在每种大小下都具有更好的可读性，或者在数据密集展示时使用稍窄一点的字体宽度。相比之下，在杂志的印刷系统中，在整个出版物中使用10-15种或更多不同的字重和宽度组合是很典型的——这比目前在web上的典型样式提供了更广泛的样式范围(或者仅从性能方面考虑确实很实用)。

+ +

关于字体系列，字重和变体的说明

+ +

您可能注意到，我们一直在讨论为每种权重和样式(即粗体，斜体以及斜体加粗)创建特定的字体文件，而不是依赖于浏览器来合成它们。这样做的原因，是大多数字体对于粗体和斜体都有非常特殊的设计，它们通常包含完全不同的字符(例如，小写字母的“a”和“g”在斜体中常常是完全不同的)。在使用非可变字体时，为了最准确地反映字体设计，避免浏览器之间的差异以及它们如何合成或不合成不同的样式，在需要的地方加载特定的字体文件会更为准确。

+ +

您可能还会发现一些可变字体分为两个文件：一个用于正体及其所有变体，另一个包含斜体变体。 有时这样做是为了在不需要或不使用斜体的情况下减小整体文件大小。 在所有情况下，仍然可以通过通用的  {{cssxref("font-family")}}  名称链接它们，以便您可以使用相同的font-family和相应的  {{cssxref("font-style")}} 来调用它们。

+ +

介绍“可变轴” (variation axis)

+ +

可变字体新格式的核心是可变轴的概念，其描述了字体设计中某一特性的允许变化范围。 例如‘字重轴’描述了字体的粗细；“宽度轴”描述了字体的宽窄；“斜体轴”描述是否使用斜体字形并且可相应地开关；等。请注意，轴既可以是范围选择又可以是开关选择。字重可能在1-999之间，而斜体可能只是简单的0或1（关闭或打开）。

+ +

如规范中所定义，存在两种变形轴，注册轴和自定义轴：

+ + + +

注册轴和现有的CSS属性

+ +

在本节中，我们将通过示例和相应的CSS来演示已定义的五个注册轴。 在可能的情况下，包括标准语法和低级语法。 较低级语法({{cssxref("font-variation-settings")}})是为了测试对可变字体支持的早期实现而实现的第一个机制，并且需要使用五个注册轴之外的新轴或自定义轴。 但是，W3C的意图是在其他属性可用时不使用此语法。 因此，应尽可能使用相应的属性，font-variation-settings的低级语法仅用于设置值不可用的值或轴。

+ +

注意

+ +
    +
  1. +

    当使用 font-variation-settings 时，请务必注意轴名称区分大小写。 注册轴名称必须为小写，自定义轴必须为大写。 例如：

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

    wght (weight) 是一个注册轴， GRAD (grade) 是一个自定义轴。

    +
    2. +
  2. +

    如果您使用 font-variation-settings 设置了值并想要更改其中一个值，则必须重新声明所有值。 您可以通过对各个值使用CSS自定义属性（CSS变量）来解决此限制，并只需修改单个自定义属性的值。 该指南末尾有示例代码。

    +
    3. +
+ +

字重

+ +

字重（由 wght 标签表示）是定义了字形的笔画粗细范围（在印刷术语中称为轻重）的设计轴。 很长一段时间，CSS都能够通过 {{cssxref("font-weight")}}) 这个采用100到900之间的以100为增量的数字值以及类似于 normal 或 bold 等这样有相应数字值的别名（在这种情况下为400和700）的关键字的属性来实现。在处理非可变或可变字体时仍然会用到这些数值或关键字，但对于可变字体，1到1000之间的任何数字都是有效的。

+ +

应该注意的是，此时 @font-face 声明中没有办法将变量字体变形轴上的特定点“映射”到关键字 bold （或任何其他关键字）。 这通常可以很容易地解决，但在编写CSS时需要额外的步骤：

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

可以通过编辑下面实例的CSS来使用字重值。

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

字宽

+ +

字宽（由 wdth 标签表示）定义字形可以是多窄或多宽（印刷术语中称为压缩或扩展）的设计轴。 这通常在CSS中通过使用 {{cssxref("font-stretch")}}  属性设置，该属性值表示为高于或低于“正常”的百分比（100％），任何大于0的数字在技术上都是有效的 - 尽管它的范围更有可能是接近100％的，例如75％-125％。 如果提供的数字值超出了字体编码的范围，浏览器应该以允许的最接近值渲染字体。

+ +
+

注意: 在使用 font-variation-settings 时不需要使用%。

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

可以通过编辑下面实例的CSS来使用字宽值。

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

斜体

+ +

Italic（ital）轴的工作方式不同，因为它仅可以打开或关闭; 而没有中间值。 斜体设计通常包括与其正体截然不同的字形，因此在从正体到斜体的过渡中，通常会发生许多字形（或字符）替换。 Italic 和oblique 通常可以互换使用，但事实上实际上是完全不同的。 在这种情况下，Oblique 定义为术语 slant （参见下面的部分），并且字体通常具有一个或另一个斜体，但不是两者都有。

+ +

在CSS中，使用 {{cssxref("font-style")}} 属性对文本应用italic 和oblique 。

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

可以通过编辑下面实例的CSS来使用斜体值。

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

倾斜

+ +

Slant（由 slnt 标签表示），或者它经常被称为“oblique” - 与真正的斜体不同之处在于它改变了字体的角度但不执行任何类型的字符替换。 它也是可变的，因为它表示为数值范围。 这允许字体沿该轴的任何位置变化。 允许的范围通常为0（直立）到20度 — 可以使用该范围内的任何数值，因此字体可以倾斜一点点。 但是，-90-90度的任何值都是有效的。

+ +
+

注意: 在使用 font-variation-settings 时不需要使用 deg  这个关键字。

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

可以通过编辑下面实例的CSS来使用slant/oblique值。

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

视觉尺寸（Optical sizes）

+ +

这是数字字体和CSS的新功能，但其实对应于设计加工金属活字中的一项古老技艺。 视觉尺寸是指基于物理尺寸改变字形的整体笔画厚度的做法。 如果尺寸非常小（例如等于10或12px），则字符将具有整体较粗的笔画，可能还会进行其他小的修改，以确保以较小的物理尺寸复制和可读性。 相反，当使用更大尺寸（如48或60px）时，笔画的粗细重量可能会有更大的变化，外观会更接近原始设计意图。

+ +

虽然这样做最初是为了在油墨和纸张印刷过程中提供补偿（小尺寸铅字上非常细的线会很难印上，导致字形外观残损），但现在它很好地转化为在数字显示中对屏幕质量和物理尺寸渲染的补偿。

+ +

光学尺寸值通常旨在根据 font-size自动应用，但也可以使用较低级别的 font-variation-settings 语法进行操作。

+ +

创建了一个在CSS中中支持可变字体的新属性 {{cssxref("font-optical-sizing")}} 。 使用 font-optical-sizing 时，唯一允许的值是 auto 或 none - 因此该属性仅允许打开或关闭光学尺寸。 但是，当使用 font-variation-settings: 'opsz' <num>时，您可以使用数值。 在大多数情况下，您可能希望将 font-size（正在渲染的类型的物理大小）与 opsz 值（使用 auto时应用光学尺寸的方式）进行匹配。 提供了特定值，以便在必要时（为了易认性，美观或其他原因 ）可以应用特定值来覆盖默认值。

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

可以通过编辑下面实例的CSS来使用视觉尺寸值。

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

自定义轴

+ +

自定义轴可以是字体设计师想象的任何设计变化轴。 可能有一些会变得相当普遍，甚至演变成注册轴。

+ +

Grade

+ +

由于在字体设计方面有着众所周知的历史，等级可能会成为更常见的自定义轴之一。设计不同等级的字体通常是根据预期的用途和印刷技术来进行的。 “等级”一词指的是字体设计的相对重量或密度，但与传统的“重量”不同之处在于文本占据的物理空间不会改变，因此改变文本等级并不会改变文本或其周围元素的整体布局。 这使得等级成为有用的变化轴，因为它可以变化或动画而不会引起文本本身的回流。

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

可以通过编辑下面实例的CSS来使用字体等级值。

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

使用可变字体: 改变 @font-face

+ +

加载可变字体的语法与其他web字体非常相似，但有一些显著的差异，这些差异是通过对现代浏览器中可用的传统{{cssxref("@font-face")}}语法的升级提供的。

+ +

基本语法是相同的，但是字体技术是不一样的，并且可变字体可以提供像对 font-weight 和 font-stretch 等描述符的允许范围，而不是根据加载的字体文件来命名。

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

注意: 并非所有浏览器都实现了字体格式的完整语法，因此请仔细测试。 如果您将字体格式设置为仅文件格式，而不是格式变体（即 woff2 而不是 woff2-variations），那么支持可变字体的所有浏览器仍将渲染它们，但如果可能，最好使用正确的语法。

+
+ +
+

注意: 如果使用适当的属性（即 font-weight或 font-stretch），提供 font-weight， font-stretch和 font-style的值范围将使浏览器不会尝试渲染超出该范围的轴，但不会阻止您通过 font-variation-settings 使用无效值，因此请小心使用。

+
+ +

使用旧版本浏览器

+ +

可以使用CSS特性查询检查是否支持可变字体（请参阅 {{cssxref("@supports")}}），因此在生产中，可以在特性查询块内使用可变字体。

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

示例页面

+ +

以下示例页面展示了构造CSS的两种不同方法。 第一种方法尽可能使用标准属性。 第二个示例使用CSS自定义属性设置 font-variation-settings 字符串的值，并展示如何通过覆盖单个变量而不是重写整个字符串来更轻松地更新单个变量值。 请注意 h2上的悬停效果，它只会改变等级轴自定义属性值。

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

资源

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