js字体溢出字体变小

In this article, we’ll take a look at the exciting new possibilities surrounding variable fonts — now bundled with the OpenType scalable font format — which allows a single font to behave like multiple fonts.

在本文中，我们将研究围绕可变字体的各种令人兴奋的新可能性-现在已与OpenType可缩放字体格式捆绑在一起-允许单个字体表现为多种字体。

我们如何来到这里 (How We Got Here)

When HTML was created, fonts and styles were controlled exclusively by the settings of each web browser. In the mid ’90s, the first typefaces for screen-based media were created: Georgia and Verdana. These, together with the system fonts — Arial, Times New Roman, and Helvetica — were the only fonts available for web browsers (not exactly the only ones, but the ones we could find in every operating system).

创建HTML时，字体和样式仅由每个Web浏览器的设置控制。 在90年代中期，创建了第一类基于屏幕的媒体字体：乔治亚州和韦尔达纳。 这些字体和系统字体(Arial，Times New Roman和Helvetica)一起是可用于Web浏览器的唯一字体(并非唯一的字体，而是我们可以在每个操作系统中找到的字体)。

With the evolution of web browsers, innovations like the <font> tag on Netscape Navigator and the first CSS specification allowed web pages to control what font was displayed. However, these fonts needed to be installed on the user’s computer.

随着Web浏览器的发展， Netscape Navigator上的<font>标记和第一个CSS规范等创新使Web页可以控制显示的字体。 但是，这些字体需要安装在用户的计算机上。

In 1998, the CSS working group proposed the support of the @font-face rule to allow any typeface to be rendered on web pages. IE4 implemented the technology but the distribution of fonts to every user’s browser raised licensing and piracy issues.

1998年，CSS工作组提议支持@font-face规则，以允许在网页上呈现任何字体。 IE4实施了该技术，但是将字体分配给每个用户的浏览器却引发了许可和盗版问题。

The early 2000s saw the rise of image replacement techniques which substituted HTML content with styled-text images. Each piece of text had to be sliced in programs like Photoshop. This technique had the major advantage of allowing designers to use any typeface available without having to deal with font licensing.

2000年代初，图像替换技术兴起，该技术将HTML内容替换为样式文本图像。 每段文字都必须在Photoshop之类的程序中进行切片。 该技术的主要优点是允许设计人员使用任何可用的字体，而无需处理字体许可。

In 2008, @font-face finally made a comeback when Apple Safari and Mozilla Firefox implemented it. This came out of the necessity of providing a simple way for designers and developers to use custom fonts rather than inaccessible images.

2008年，当Apple Safari和Mozilla Firefox实施@font-face终于卷土重来。 这是因为必须为设计人员和开发人员提供一种使用自定义字体而不是无法访问的图像的简单方法。

It wasn’t until the arrival of the CSS3 Fonts Module in 2012 that font downloading became viable. Once implemented, a font downloaded by a web page could only be used on that page and not copied to the operating system. Font downloading allowed remote fonts to be downloaded and used by the browser, meaning that web designers could now use fonts that were not installed on the user’s computer. When web designers found the font they wished to use, they just needed to include the font file on the web server, and it would be automatically downloaded to the user when needed. These fonts were referenced using the @font-face rule.

直到2012年CSS3字体模块出现，字体下载才变得可行。 一旦实现，网页下载的字体只能在该页面上使用，而不能复制到操作系统。 字体下载允许浏览器下载和使用远程字体，这意味着Web设计人员现在可以使用用户计算机上未安装的字体。 当Web设计人员找到他们希望使用的字体时，他们只需要在Web服务器上包括字体文件，然后在需要时将其自动下载给用户。 这些字体是使用@font-face规则引用的。

To use the @font-face rule we have to define a font name and point to the font file:

要使用@font-face规则，我们必须定义字体名称并指向字体文件：

@font-face {
font-family: Avenir Next Variable;
src: url(AvenirNext_Variable.woff);
}

The font file can be one of five different formats: TTF, WOFF, WOFF2, SVG or EOT. Each has its own advantages and disadvantages. Putting it simply, EOT was created by Microsoft and only is supported by Internet Explorer. TTF is the basic type font created by Microsoft and Apple, and it works almost perfectly everywhere. SVG is based on image replacement techniques and is only suitable for the Web. Finally, WOFF and WOFF2 were also created exclusively for the Web and are basically TTF files with extra compression.

字体文件可以是以下五种格式之一：TTF，WOFF，WOFF2，SVG或EOT。 每种都有自己的优点和缺点 。 简而言之，EOT由Microsoft创建，并且仅受Internet Explorer支持。 TTF是Microsoft和Apple创建的基本字体，它几乎可以在任何地方正常工作。 SVG基于图像替换技术，仅适用于Web。 最后，WOFF和WOFF2也是专门为Web创建的，基本上是经过额外压缩的TTF文件。

可变字体 (Variable Fonts)

Version 1.8 of OpenType (the computer scalable font format) was released in 2016. A brand new technology shipped with it: OpenType font variations, also known as variable fonts.

OpenType 1.8版(计算机可缩放字体格式)于2016年发布。它附带了一项全新技术：OpenType字体变体，也称为可变字体 。

This technology allows a single font to behave like multiple fonts. It’s done by defining variations within the font. These variations come from the fact that each character only has one outline. The points that construct this outline have instructions on how they should behave. It’s not necessary to define multiple font weights because they can be interpolated between very narrow and very wide definitions. This also makes it possible to generate styles in between — for example, semi-bold and bold. These variations may act along one or more axes of the font. On the image below, we have an example of this outline interpolation on the letter A.

这项技术允许单个字体的行为类似于多种字体。 通过定义字体内的变体来完成。 这些变化来自每个字符只有一个轮廓的事实。 构成此大纲的要点对它们的行为方式进行了说明。 不必定义多个字体粗细，因为可以在非常窄和非常宽的定义之间进行插值。 这样还可以生成介于两者之间的样式，例如，半粗体和粗体。 这些变化可能沿字体的一个或多个轴起作用。 在下图上，我们在字母A上有一个轮廓插值的示例。

为什么可变字体相关？ (Why are Variable Fonts Relevant?)

Variable fonts can bring both simplicity to our font structure and performance improvements. Take for example a situation where our website needs five font styles. It would be significantly smaller and faster to provide a single variable font capable of rendering those five styles than to have to load five different font files.

可变字体可以为我们的字体结构带来简化，并提高性能。 以我们的网站需要五种字体样式的情况为例。 提供能够呈现这五种样式的单一可变字体比必须加载五个不同的字体文件要小得多，而且速度更快。

使用可变字体 (Using Variable Fonts)

There are currently two different ways to use variable fonts. First, we’ll look at the modern way of implementing those. The CSS specification strongly prefers using font-optical-sizing, font-style, font-weight and font-stretch for controlling any of the standard axes.

当前有两种使用可变字体的不同方法。 首先，我们将研究实现这些目标的现代方法。 CSS规范强烈建议使用font-optical-sizing ， font-style ， font-weight和font-stretch来控制任何标准轴。

font-optical-sizing (font-optical-sizing)

This property allows developers to control whether or not browsers render text with slightly different visual representations to optimize viewing at different sizes. It can take the value none, for when the browser cannot modify the shape of glyphs, or auto for when it can. On a browser that supports font-optical-sizing, a font where the value is set to auto can vary like the font in the image below:

此属性使开发人员可以控制浏览器是否以稍微不同的视觉表示来呈现文本，以优化不同大小的查看。 当浏览器无法修改字形的形状时，可以采用none值；在可以的情况下，可以采用auto值。 在支持font-optical-sizing的浏览器上，将值设置为auto的字体可能会有所不同，如下图所示：

With the value set to none there would be no variation to the font.

将该值设置为none ，字体将没有变化。

font-style (font-style)

This property specifies whether a font should be styled with a normal, italic, or oblique face from its font family. It can take the normal, italic or oblique values.

此属性指定是使用字体系列中的普通，斜体还是斜面来设置字体样式。 它可以采用normal ， italic或oblique值。

font-weight (font-weight)

This property specifies the weight (or boldness) of the font. One thing to note is that, with normal fonts, named instances can be defined. For example, bold is the same as font-weight: 700 or extra-light is the same as font-weight: 200. The font-weight property can also be any number between 1 and 1000, but when using variable fonts, due to the interpolarity, we can have a much finer granularity. For example, a value like font-weight: 200.01 is now possible.

此属性指定字体的粗细(或粗体)。 需要注意的一件事是，使用普通字体可以定义命名实例。 例如， bold与font-weight: 700相同，或者extra-light与font-weight: 200 。 font-weight属性也可以是1到1000之间的任何数字，但是当使用可变字体时，由于极性之间的关系，我们可以具有更好的粒度。 例如，现在可以使用诸如font-weight: 200.01类的值。

font-stretch (font-stretch)

This property selects a normal, condensed, or expanded face from a font. Just like the font-weight property, it can be a named instance like extra-condensed or normal or a percentage between 0% and 100%. Also, named instances will map to known percentages. For example, extra-condensed will map to 62.5%.

此属性从字体中选择普通，压缩或扩展的面Kong。 就像font-weight属性一样，它可以是一个命名实例，例如extra-condensed或normal或0％到100％之间的百分比。 同样，命名实例将映射到已知百分比。 例如， extra-condensed将映射为62.5％。

For this example, I created a very simple page with a single <h1> heading and <p> paragraph.

对于此示例，我创建了一个非常简单的页面，其中包含单个<h1>标题和<p>段落。

See the Pen Variable Fonts HTML by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )提供的Pen Variable Fonts HTML 。

Currently, our unstyled webpage looks like this:

目前，我们未样式化的网页如下所示：

To use a variable font, we must find a suitable file. The v-fonts project provides a font repository where we can search and experiment with all type of variable fonts. I decided to use the AvenirNext font and link it from its official GitHub page.

要使用可变字体，我们必须找到合适的文件。 v-fonts项目提供了一个字体库，我们可以在其中搜索和尝试所有类型的可变字体。 我决定使用AvenirNext字体，并从其GitHub官方页面进行链接。

Then we need to create a CSS file to load this new font:

然后，我们需要创建一个CSS文件来加载此新字体：

@font-face {
font-family: 'Avenir Next Variable';
src: url('AvenirNext_Variable.ttf') format('truetype');
}
body {
font-family: 'Avenir Next Variable', sans-serif;
}

See the Pen Loaded variable font by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的Pen Loaded可变字体 。

Due to browser support issues, this example will only apply font variations in Safari and Chrome.

由于浏览器支持问题，此示例将仅在Safari和Chrome中应用字体变体。

With our font loaded, we can now use the font-weight property to manipulate the weight axis of our variable font.

加载字体后，我们现在可以使用font-weight属性来控制可变字体的权重轴。

h1 {
font-family: 'Avenir Next Variable';
font-weight: 430;
}

See the Pen SourceSans variable font by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )提供的Pen SourceSans可变字体 。

Most of the time we’ll also need two different font files: one for italic and one for regular fonts (roman). This happens because the construction of these fonts can be radically different.

大多数时候，我们还需要两个不同的字体文件：一个用于斜体，一个用于常规字体(罗马)。 发生这种情况是因为这些字体的构造可能完全不同。

使用字体变化设置 (Using font-variation-settings)

The second way of using variable fonts is by using the font-variation-settings CSS property. This property was introduced to provide control over OpenType or TrueType font variations, by specifying the four-letter axis names of the features you want to vary along with their variation values. Currently, we have access to the following aspects of the font:

使用可变字体的第二种方法是使用font-variation-settings CSS属性。 引入此属性是为了控制OpenType或TrueType字体变体 ，方法是指定要变化的要素的四个字母的轴名称及其变体值。 当前，我们可以访问字体的以下方面：

• wght — weight, which is identical to the font-weight CSS property. The value can be anything from 1 to 999.

  wght —粗细，与font-weight CSS属性相同。 取值范围是1到999。

• wdth — width, which is identical to by the font-stretch CSS property. It can take a keyword or a percentage value. This axis is normally defined by the font designer to expand or condense elegantly.

  wdth —宽度，与font-stretch CSS属性相同。 它可以包含关键字或百分比值。 该轴通常由字体设计者定义，以优雅地扩展或压缩。

• opsz — optical sizing, which can be turned on and off using the font-optical-sizing property.

  opsz —光学尺寸调整，可以使用font-optical-sizing属性打开和关闭。

• ital — italicization, which is controlled by the font-style CSS property when is set to italic.

  ital —斜体，当设置为italic时，由font-style CSS属性控制。

• slnt — slant, which is identical to the font-style CSS property when it’s set to oblique. It will default to a 20 degree slant, but it can also accept a specified degree between -90deg and 90deg.

  slnt —倾斜，设置为oblique时，它与font-style CSS属性相同。 它的默认倾斜角度为20度，但也可以接受-90度到90度之间的指定角度。

According to the specification, this property is a low-level feature designed to handle special cases where no other way to enable or access an OpenType font feature exists. Because of that, we should try to use @font-face instead.

根据规范 ，此属性是低级功能，旨在处理在没有其他启用或访问OpenType字体功能的特殊情况下的特殊情况。 因此，我们应该尝试使用@font-face代替。

Using the same webpage and font as above, let’s try to set the weight and width on our font using the low-level controller:

使用与上述相同的网页和字体，让我们尝试使用低级控制器设置字体的粗细和宽度：

p {
font-variation-settings: 'wght' 630, 'wdth' 88;
}

See the Pen Variable fonts 1 by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的Pen Variable字体1 。

The declaration is equivalent to the following CSS declaration:

该声明等效于以下CSS声明：

p {
font-weight: 630;
font-stretch: 88;
}

性能 (Performance)

Performance is a key advantage of variable fonts. The AvenirNext_Variable.ttf font file is only 89kB but creates a range of weights. A comparable standard font may have a smaller file but would only support one weight and style. Further options require additional files and raise the page weight accordingly.

性能是可变字体的主要优势。 AvenirNext_Variable.ttf字体文件只有89kB，但是会产生一定范围的权重。 可比的标准字体可能文件较小，但仅支持一种粗细和样式。 其他选项需要其他文件，并相应地增加页面权重。

But we can go even further. When we talked about font formats, we said that WOFF2 files are essentially TTF files with extra compression. WOFF2 files are smaller because they use custom preprocessing and compression algorithms to deliver ~30% file-size reduction over other formats.

但是我们可以走得更远。 当我们谈论字体格式时，我们说WOFF2文件本质上是具有额外压缩功能的TTF文件。 WOFF2文件较小，因为它们使用自定义的预处理和压缩算法来提供比其他格式约30％的文件大小减少。

Google offers a command line tool that will compress our file converting it to a woff2 format.

Google提供了一个命令行工具，该工具将压缩我们的文件，将其转换为woff2格式。

On the tool’s official GitHub page, we can find all the information about it. To install it on a Unix environment, we can use the following commands:

在该工具的官方GitHub页面上 ，我们可以找到有关它的所有信息。 要将其安装在Unix环境中，我们可以使用以下命令：

git clone --recursive https://github.com/google/woff2.git
cd woff2
make clean all

After installing it, we can use it to compress our variable font file by using:

安装后，我们可以使用它来压缩可变字体文件，方法是：

woff2_compress AvenirNext_Variable.ttf

And we end up with a 42kb file, which halved the file size. To use this file, we just need to modify the sourced file and its format to accommodate this new file:

最后我们得到一个42kb的文件，该文件减少了一半。 要使用此文件，我们只需要修改源文件及其格式以适应这个新文件：

src: url('AvenirNext_Variable.woff2') format('woff2');

We now have a single 42Kb file which could be used for all the font weights on our page. The only downside to the woff2 format is that it’s not supported by Internet Explorer.

现在，我们有了一个42Kb的文件，该文件可用于页面上的所有字体粗细。 woff2格式的唯一缺点是Internet Explorer不支持它。

为不同的浏览器提供不同的文件 (Serving Different Files for Different Browsers)

While some modern browsers already support variable fonts (Firefox developer editions have some level of support, Chrome 62, Chrome Android, Safari iOS, and Safari), there might be the case where we find one that doesn’t.

尽管某些现代浏览器已经支持可变字体(Firefox开发人员版本具有一定程度的支持，Chrome 62，Chrome Android，Safari iOS和Safari)，但在某些情况下，我们可能会发现不支持这种字体。

To get around this, we’ll need to either serve non-variable for those browsers or use an operating system font fallback.

为了解决这个问题，我们需要为这些浏览器提供非变量服务，或者使用操作系统字体回退。

Browsers that support variable fonts will download the file marked as format('woff2-variations'), while browsers that don’t will download the single style font marked as format('ttf'). This is possible because we can repeat references to variables in each rule. If the first fails, the second will be loaded. Just like the following:

支持可变字体的浏览器将下载标记为format('woff2-variations') ，而不支持可变字体的浏览器将下载标记为format('ttf')的单一样式字体。 这是可能的，因为我们可以在每个规则中重复引用变量。 如果第一个失败，将加载第二个。 就像下面这样：

@font-face {
font-family: 'Avenir Next Variable';
src: url('AvenirNext_Variable.woff2') format('woff2-variations');
src: url('AvenirNextLTPro-Bold.otf') format('truetype');
}
html {
font-family: 'Avenir Next Variable', sans-serif;
}
h1 {
font-family: 'Avenir Next Variable';
font-weight: 430;
}
h2 {
font-family: 'Avenir Next Variable';
font-weight: 630;
}

The next example uses a different file format from the one we’re working with, but uses the same principle:

下一个示例使用与我们正在使用的文件格式不同的文件格式，但是使用相同的原理：

See the Pen Multiple fonts by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的Pen Multiple字体 。

If we check the result on a browser that supports variable fonts, like Chrome, we can see the following:

如果我们在支持可变字体的浏览器(例如Chrome)上检查结果，则可以看到以下内容：

On a browser that doesn’t support variable fonts, like Firefox, the second font will be loaded and the result will look like this:

在不支持可变字体的浏览器(如Firefox)上，将加载第二种字体，结果将如下所示：

But if we still have to serve non-variable fonts to browsers that don’t support variable ones, don’t we lose all the performance we just gained with the variable font? If a browser can only load the standard font, we lose the performance and rendering benefits of variable fonts. In those situations, it may be preferable to fallback to a comparable operating system font rather than substitute it with many fixed fonts.

但是，如果我们仍然必须为不支持可变字体的浏览器提供非可变字体，那么我们是否会失去使用可变字体获得的所有性能？ 如果浏览器只能加载标准字体，我们将失去可变字体的性能和呈现优势。 在那种情况下，最好退回到可比的操作系统字体，而不是用许多固定字体代替。

结论 (Conclusion)

Despite being available for several years now, variable fonts are still in their infancy. Browser support is scarce and there are few fonts to choose from. However, the potential is enormous, and variable fonts will permit better performance while simplifying development. For example, SitePoint’s own front page currently loads eight font files with a total of 273kB. Variable fonts could reduce this dependency and cut page weight further.

尽管现在已经使用了几年，但可变字体仍处于起步阶段。 浏览器支持稀缺，几乎没有字体可供选择。 但是，潜力是巨大的，可变字体将在简化开发的同时提高性能。 例如，SitePoint自己的首页当前加载八个字体文件，总大小为273kB。 可变字体可以减少这种依赖性并进一步减少页面重量。

翻译自: https://www.sitepoint.com/variable-fonts-introduction/

js字体溢出字体变小