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

最新推荐文章于 2024-09-03 08:08:41 发布

cukw6666

最新推荐文章于 2024-09-03 08:08:41 发布

阅读量2.4k

点赞数

文章标签： java python css 大数据 web

原文链接：https://www.digitalocean.com/community/tutorials/css-variable-fonts

版权

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.

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

源无变量 (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) on CodePen.

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

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的示例，该字体是定义自定义轴并允许唯一且样式化的文本的可变字体：

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

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

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 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规则。以下是其完成方式的简要概述，但是对于跨浏览器支持，您可能需要了解一些注意事项。

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规则中所有可能值的能力：

@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: 1 999;
}

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字体作为抢先使用字体获得。

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之类的工具将字体文件压缩为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.

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