web设置字体粗细css_Web上使用CSS的可变字体

淩亂°似流年 2022-12-07 11:53 334阅读 0赞

web设置字体粗细css

Font variations is a new set of features defined as part of the OpenType specification. It allows for font files to contain multiple variation of a font within a single file, called a variable font. This in turns allows the use of one font file on the web that can achieve multiple font styles.

字体变化是作为OpenType规范的一部分定义的一组新功能。 它允许字体文件在单个文件中包含字体的多种变体，称为可变字体。 这又允许在网络上使用一个字体文件，该文件可以实现多种字体样式。

On top of the obvious savings in turns of data that needs to be sent over the wire to display the text on a page, variable fonts enable features such as animating or transitioning font styles and custom font styles, both of which are not possible with static fonts.

除了可以通过导线发送以在页面上显示文本所需的大量数据转换外，可变字体还支持动画或过渡字体样式和自定义字体样式等功能，而静态字体则无法实现字体。

Let’s go over some examples of using a variable font, and then break down how to use them on the web today.

让我们来看一些使用可变字体的示例，然后详细介绍如何在今天的网络上使用它们。

## 可变字体示例 **(**Variable Font Examples**)** ##

Note that you’ll need to use a [supporting browser][] to properly view the examples below.

请注意，您需要使用[支持的浏览器][supporting browser]来正确查看以下示例。

### 源无变量 **(**Source Sans Variable**)** ###

Source Sans is a popular free font that now comes with in a variable version. Hover over the text to see how the value for `font-weight` can be transitioned:

Source Sans是一种流行的免费字体，现在带有可变版本。 将鼠标悬停在文本上可以查看如何更改`font-weight`的值：

See the Pen [XWdaGLZ by alligatorio][] ([@alligatorio][alligatorio]) on [CodePen][].

请参阅[CodePen上的alligatorio][XWdaGLZ by alligatorio] ( [@alligatorio][alligatorio] )提供的[Pen XWdaGLZ][CodePen] 。

And this is achieved using some very simple CSS rules:

这是通过一些非常简单CSS规则实现的：

@font-face {
      font-family: 'Source Sans';
      src: url('/assets/fonts/variable/SourceSansVariable-Roman.ttf') format("truetype-variations");
      font-weight: 1 999;
    }
    
    .source-sans, .source-sans2, .source-sans3 {
      font-family: 'Source Sans';
      transition: font-weight .45s ease-out;
    }
    
    .source-sans:hover, .source-sans2:hover {
      font-weight: 999;
    }
    .source-sans3:hover {
      font-weight: 200;
    }

--------------------

### 自定义字体样式 **(**Custom font styles**)** ###

Here are some examples all using the same font, [Decovar][], a variable font that defines custom axes and allows for unique and stylized text:

以下是一些使用相同字体[Decovar的示例][Decovar] ，该字体是定义自定义轴并允许唯一且样式化的文本的可变字体：

See the Pen [RwaZdXX by alligatorio][] ([@alligatorio][alligatorio]) on [CodePen][].

请参阅[CodePen上的alligatorio][RwaZdXX by alligatorio] ( [@alligatorio][alligatorio] )提供的[Pen RwaZdXX][CodePen] 。

And here’s the CSS rules used for that:

这是用于此CSS规则：

@font-face {
      font-family: Decovar;
      src: url('/assets/fonts/variable/DecovarAlpha-VF.subset.ttf') format("truetype-variations");
    }
    
    .decovar, .decovar2, .decovar3 {
      font-family: Decovar;
    }
    
    .decovar {
      color: var(--green3);
      font-variation-settings: "BLDA" 506.944, "TRMC" 1000, "TRMK" 324.653;
    }
    .decovar2 {
      color: hotpink;
      font-variation-settings: "WMX2" 580.838, "TRMB" 1000;
    }
    .decovar3 {
      color: rebeccapurple;
      font-variation-settings: "TRMF" 159.18, "TRME" 1000;
    }

--------------------

Now that you’ve seen some real-life examples, let’s go over some of the concepts and how to make use of variable fonts in your own web pages.

既然您已经看到了一些真实的示例，那么让我们来看一些概念以及如何在自己的网页中使用可变字体。

## 字体轴 **(**Font Axes**)** ##

Variable fonts define their variations though axes of variation. There are 5 standard axes:

可变字体通过变体轴定义其变体。 有5个标准轴：

*  `ital`: Controls the italics. The value can be set using the `font-style` CSS property.
    
    `ital` ：控制斜体。 可以使用`font-style` CSS属性设置该值。
 *  `opsz`: Controls the font’s optical size. The value can be set using the `font-optical-sizing` CSS property.
    
    `opsz` ：控制字体的光学尺寸。 可以使用`font-optical-sizing` CSS属性设置该值。
 *  `slnt`: Controls the slant of the font. The value can be set using the `font-style` CSS property.
    
    `slnt` ：控制字体的倾斜度。 可以使用`font-style` CSS属性设置该值。
 *  `wght`: Controls the font’s weight. The value can be set using the `font-weight` CSS property.
    
    `wght` ：控制字体的粗细。 可以使用`font-weight` CSS属性设置该值。
 *  `wdth`: Controls the font’s width. The value can be set using the `font-stretch` CSS property.
    
    `wdth` ：控制字体的宽度。 可以使用`font-stretch` CSS属性设置该值。

Fonts can also specify custom axes, and these need to have a 4-letter uppercase name instead of the 4-letter lowercase names of the standard axes. The Decovar font demoed above is a prime example of a font using a multitude of custom axes.

字体也可以指定自定义轴，并且这些字体必须具有4个字母的大写字母名称，而不是标准轴的4个字母的小写字母名称。 上面演示的Decovar字体是使用多个自定义轴的字体的主要示例。

The standard axes can be set with well-known CSS properties (e.g.: `wdth` is set with `font-weight`), and the new CSS `font-variation-settings` is used to control the values for axes otherwise.

可以使用众所周知CSS属性设置标准轴(例如， `wdth`设置为`font-weight` )，否则，将使用新CSS `font-variation-settings`控制轴的值。

For example, here we define a style for the [NobotoFlex][] variable font:

例如，在这里我们为[NobotoFlex][]可变字体定义样式：

h1 {
      font-variation-settings: "BASE" 500, "SPAC" 200, "wght" 322, "HEIG" 456;
    }

Which could have alternatively been defined like this:

也可以这样定义：

h1 {
      font-weight: 322
      font-variation-settings: "BASE" 500, "SPAC" 200, "HEIG" 456;
    }

It’s a good idea to use the native CSS properties for the axes that have one.

对具有一个的轴使用本机CSS属性是一个好主意。

Note that fonts don’t have to implement all 5 standard axes, and instead you should consult the documentation of the font to know what axes you can control.

请注意，字体不必全部实现5个标准轴，而是应查阅字体的文档以了解可以控制的轴。

Note also how `font-weight` can take values anywhere between 1 and 999, compared to the 100-value increments we’re used to.

还请注意，与我们过去习惯使用100值的增量相比， `font-weight`如何可以采用介于1到999之间的值。

## 通过@ font-face使用可变字体 **(**Using Variable Fonts with @font-face**)** ##

Using variable fonts on the web involves defining [@font-face rules][font-face rules] that point to the variable font files. The following is a brief overview of how it’s done, but for there are [a few caveats][] you may want to learn about for cross-browser support.

在网络上使用可变字体需要定义指向可变字体文件的[@ font-face规则][font-face rules] 。 以下是其完成方式的简要概述，但是对于跨浏览器支持，您可能需要了解[一些注意事项][a few caveats] 。

Here for example we define two version for the `Source Sans` font family, one regular and one bold. Both versions make use of the same variable font file, but different font files as a fallback for browsers that don’t support variable fonts:

例如，在这里我们为`Source Sans`字体家族定义了两个版本，一个为常规字体，另一个为黑体。 对于不支持可变字体的浏览器，这两个版本都使用相同的可变字体文件，但使用不同的字体文件作为后备：

@font-face {
      font-family: 'Source Sans';
      src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
      src: url('/path/to/SourceSans.woff2') format("woff2");
      font-weight: 400;
    }
    
    @font-face {
      font-family: 'Source Sans';
      src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
      src: url('/path/to/SourceSansBold.woff2') format("woff2");
      font-weight: 900;
    }

And it can now be used within your CSS rules as usual:

现在，它可以照常在您CSS规则内使用：

h1 {
      font-family: 'Source Sans';
      font-weight: 900;
    }
    
    h2 {
      font-family: 'Source Sans';
      font-weight: 400;
    }

--------------------

You can also specify a range in your @font-face rules, to retain the ability to use all the possible values within your regular CSS rules:

您还可以在@ font-face规则中指定范围，以保留使用常规CSS规则中所有可能值的能力：

With the above, we can now use any value between 1 and 999 for the `font-weight` property. Non-supporting browsers will use a font-weight value of **normal**.

通过上面的操作，我们现在可以使用1到999之间的任何值作为`font-weight`属性。 不支持的浏览器将使用**normal**的font-weight值。

## 可用字体 **(**Available Fonts**)** ##

You can find and play with most of the currently available variable fonts on [V-fonts.com][]. A few notable Open Source ones are `Barlow`, `Mutador Sans`, `Source Sans`, `Amstelvar` and `Cabin VF`.

您可以在[V-fonts.com][]上找到并使用大多数当前可用的可变字体。 一些`Mutador Sans`开源软件包括`Barlow` ， `Mutador Sans` ， `Source Sans` ， `Amstelvar`和`Cabin VF` 。

Some are also available through Google Fonts as [early access fonts][].

有些还可以通过Google字体作为[抢先使用字体获得][early access fonts] 。

## TTF转WOFF2 **(**TTF to WOFF2**)** ##

Font files will often be provided in the TrueType format (ttf), but for the web it’s a much better idea to compress the font file to the WOFF2 format, to save on space. You can use a tool like [FontTools][] to compress a font file as WOFF2. More user-friendly GUI or online tools will surely become available really soon.

字体文件通常以TrueType格式( ttf )提供，但是对于Web来说，将字体文件压缩为WOFF2格式是一个更好的主意，以节省空间。 您可以使用诸如[FontTools之][FontTools]类的工具将字体文件压缩为WOFF2。 肯定会很快提供更多用户友好的GUI或在线工具。

## 浏览器支持 **(**Browser Support**)** ##

Support for variable fonts is already [pretty good][], so in theory you can start using them today. There are a few caveats with support however, and some things are still being ironed-out for their usage within CSS as part of the [CSS Fonts Module Level 4][]. Here’s a [nice summary][] what’s still in flux at the moment.

对可变字体的支持已经[相当不错了][pretty good] ，因此从理论上讲，您今天就可以开始使用它们了。 但是，有一些警告需要支持，并且作为[CSS Fonts Module Level 4的][CSS Fonts Module Level 4]一部分，仍需要解决一些在CSS中使用它们的问题。 这是一个[很好的总结][nice summary] ，目前仍在变化中。

## 资源和工具 **(**Resources and Tools**)** ##

Here’s some further reading material if you want to expand your understanding of using variable fonts on the web:

如果您想加深对在网络上使用可变字体的理解，请阅读以下一些阅读材料：

*  [Get started with variable fonts][] by [Richard Rutter][]
    
    [理查德·拉特][Richard Rutter] ( [Richard Rutter)][Richard Rutter] [开始使用可变字体][Get started with variable fonts]
 *  [Introduction to variable fonts on the web][]
    
    [网络上可变字体简介][Introduction to variable fonts on the web]
 *  [One File, Many Options: Using Variable Fonts on the Web][One File_ Many Options_ Using Variable Fonts on the Web]
    
    [一个文件，多种选择：在网络上使用可变字体][One File_ Many Options_ Using Variable Fonts on the Web]

And here are two tools that allow you to easily test out and find variable fonts:

这是两个工具，可让您轻松测试并查找可变字体：

*  [Axis-Praxis][]
    
    [轴心][Axis-Praxis]
 *  [V-Fonts.com][V-fonts.com]
    
    [V-Fonts.com][V-fonts.com]

> 翻译自: [https://www.digitalocean.com/community/tutorials/css-variable-fonts][https_www.digitalocean.com_community_tutorials_css-variable-fonts]

web设置字体粗细css

[supporting browser]: https://www.axis-praxis.org/blog/2017-04-05/17/how-to-get-variable-fonts-working-in-safari-chrome-and-firefox-macos
[XWdaGLZ by alligatorio]: https://codepen.io/alligatorio/pen/XWdaGLZ
[alligatorio]: https://codepen.io/alligatorio
[CodePen]: https://codepen.io
[Decovar]: https://www.typenetwork.com/brochure/decovar-a-decorative-variable-font-by-david-berlow
[RwaZdXX by alligatorio]: https://codepen.io/alligatorio/pen/RwaZdXX
[NobotoFlex]: https://github.com/Manuel87/NobotoFlex
[font-face rules]: https://www.digitalocean.com/community/tutorials/css-font-face
[a few caveats]: https://medium.com/clear-left-thinking/how-to-use-variable-fonts-in-the-real-world-e6d73065a604
[V-fonts.com]: https://v-fonts.com/
[early access fonts]: https://fonts.google.com/earlyaccess
[FontTools]: https://pypi.org/project/FontTools/
[pretty good]: https://caniuse.com/#feat=variable-fonts
[CSS Fonts Module Level 4]: https://www.w3.org/TR/css-fonts-4/
[nice summary]: https://medium.com/@clagnut/upcoming-changes-to-the-css-for-variable-fonts-4494b3b7ecdc
[Get started with variable fonts]: https://medium.com/@clagnut/get-started-with-variable-fonts-c055fd73ecd7
[Richard Rutter]: https://twitter.com/clagnut
[Introduction to variable fonts on the web]: https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts/
[One File_ Many Options_ Using Variable Fonts on the Web]: https://css-tricks.com/one-file-many-options-using-variable-fonts-web/
[Axis-Praxis]: https://www.axis-praxis.org/
[https_www.digitalocean.com_community_tutorials_css-variable-fonts]: https://www.digitalocean.com/community/tutorials/css-variable-fonts