js字体溢出字体变小_可变字体的性能优势

最新推荐文章于 2023-02-14 17:50:47 发布

weixin_26715991

最新推荐文章于 2023-02-14 17:50:47 发布

阅读量532

点赞数

文章标签： java python https

原文链接：https://uxdesign.cc/the-performance-benefits-of-variable-fonts-79af8c4ff56c

版权

js字体溢出字体变小

When we think about web fonts and their impact on the performance on our websites we often focus on three main areas:

当我们考虑网络字体及其对网站性能的影响时，我们通常将重点放在三个主要方面：

The number of font requests
字体请求数
Font file size
字体文件大小
Time to first render
第一次渲染的时间

I wanted to see how variable fonts faired in these situations and did a review comparing with standard fonts. Here are my results.

我想看看可变字体在这种情况下是如何公平的，并与标准字体进行了比较。这是我的结果。

减少请求数量 (Reducing the number of requests)

This can be accomplished several ways including caching, CDNs and reducing the number of style variations. I’m not going to get into the use of CDN’s or caching because it’s essentially the same process for standard fonts as it is for variable fonts. Instead, I will focus on reducing style variations.

这可以通过多种方式实现，包括缓存，CDN和减少样式变化的数量。我不打算使用CDN或缓存，因为它对于标准字体和可变字体本质上是相同的过程。相反，我将专注于减少样式变化。

In a world of standard fonts, reducing the number of styles reduces the number of requests because it results in fewer files and therefore fewer requests. Typically this meant that we’d have to plan our typography choices and weigh up the cost of design over the cost of performance and decide whether the cost of additional styles is worth the impact to performance.

在标准字体的世界中，减少样式的数量会减少请求的数量，因为这会导致文件减少，从而导致请求减少。通常，这意味着我们必须计划字体选择，权衡设计成本与性能成本，并决定其他样式的成本是否值得对性能产生影响。

With variable fonts, because they can contain multiple variations in the one file — this means we have immediately reduced the number of requests without having to question our designers about their typography choices.

使用可变字体，因为它们可以在一个文件中包含多个变体-这意味着我们立即减少了请求数量，而不必向我们的设计师询问他们的版式选择。

Variable fonts, in essence, reduce the number of requests simply by being a variable font. But if the font has all the information in it, what does that do to file size?

本质上，可变字体仅是可变字体，从而减少了请求数量。但是，如果字体中包含所有信息，那么这对文件大小有什么影响？

减小字体文件大小 (Reducing the font file size)

This can be achieved several ways, the first step is usually choosing the most efficient Webfont format like WOFF2 for example.

这可以通过多种方式实现，第一步通常是选择最有效的Webfont格式，例如WOFF2。

设定基准 (Setting a baseline)

I conducted a review of different font file sizes specifically using Source Sans Pro by Adobe because it’s open source and on Github.

我专门使用Adobe Source Sans Pro对不同字体文件的大小进行了审查，因为它是开源的，并且在Github上。

Image for post — Source Sans Pro OTF Comparison — Single Weight: 243kb, Variable Font 405kb

As a baseline, a single weight of the standard version of the font Source Sans Pro is approximately 243kb in OTF format and the size of the variable font in OTF format is 405kb. This makes the variable font 73% larger than a single weight of the standard Source Sans Pro font.

作为基准，Source Sans Pro字体的标准版本的单权重约为OTF格式的243kb，而OTF格式的可变字体的大小为405kb。这使可变字体比标准Source Sans Pro字体的单倍粗大73％。

But given that the variable font contains all the information for all the font weights the resulting combined file size of all the standard Source Sans Pro weights is approximately 1170kb.

但是，鉴于可变字体包含所有字体权重的所有信息，因此所有标准Source Sans Pro权重的合成文件大小约为1170kb。

That is nearly 3 times the size of the variable font.

这几乎是可变字体大小的3倍。

Even if you just wanted the bold and regular versions of the font, two versions are still larger than the single variable font.

即使您只想要字体的粗体和常规版本，两个版本仍比单个可变字体大。

OTF vs WOFF2 (OTF vs WOFF2)

OTF file sizes, however, are pretty large in comparison to the font compression you get from formats like WOFF and WOFF2.

但是，与从WOFF和WOFF2等格式获得的字体压缩相比，OTF文件的大小非常大。

So in comparison, we can gain significant reductions in file size by simply using WOFF2 versions of the fonts.

因此，相比之下，仅使用WOFF2版本的字体就可以大大减少文件大小。

What I did find interesting was how significant the savings were in the variable font. Dropping from 405kb down to 112kb, making it almost the same size as a single weight of Source Sans Pro (standard font).

我确实发现有趣的是，可变字体节省了多少钱。从405kb减少到112kb，使其大小几乎与Source Sans Pro(标准字体)的单重相同。

This took me a bit by surprise and I’m pretty confident saying this won’t be the case in all scenarios. But it’s pretty great to see how effective the WOFF2 compression can be on a variable font.

这让我感到有些惊讶，我非常有信心地说，并非在所有情况下都如此。但是，很高兴看到WOFF2压缩对可变字体的效果如何。

通过子集减少文件大小 (Reducing file size by subsetting)

With standard fonts, another way to reduce file size is by subsetting the font to remove unnecessary characters or reducing it to a specific language set like only Latin characters.

对于标准字体，减小文件大小的另一种方法是将字体设置为子字体以删除不必要的字符，或将其缩小为仅类似于拉丁字符的特定语言集。

This comes with some risks and can result in parts of your typography rendering as your fallback and not your font if you accidentally remove characters you need.

这会带来一些风险，如果不小心删除了所需的字符，可能会导致部分版式呈现为后备而不是字体。

You can subset fonts with tools like Glyphanger, by filament group, they have a great readme on the Github page and it works with both standard fonts and variable fonts.

您可以使用Glyphanger之类的工具将字体子集化为细丝组，在Github页面上它们具有丰富的自述文件，并且可以与标准字体和可变字体一起使用。

I ran a Glyphhanger over the standard and variable versions of Source Sans variable and subset it to uppercase and lowercase English characters, numbers and special characters like exclamation marks.

我对Source Sans变量的标准和变量版本运行了Glyphhanger，并将其子集化为大写和小写英文字符，数字和特殊字符(例如感叹号)。

This reduced the file size of the Single weight from 111kb down to 16kb (85% savings, nice). The variable font dropped from 112kb down to 27kb (75% savings, acceptable!).

这样可以将单重文件的文件大小从111kb减小到16kb(节省85％，不错)。可变字体从112kb降至27kb(节省了75％，可以接受！)。

Again, I was pretty surprised by this. I was expecting Source Sans Variable to be larger than this. Keeping in mind we typically use both a bold and regular version of a font a single variable font at 27kb is still smaller than two weights in the standard font. So that is a pretty great saving.

同样，我对此感到非常惊讶。我期望Source Sans Variable大于此值。请记住，我们通常同时使用粗体和常规字体，单个27kb的可变字体仍小于标准字体的两个粗细。因此，这是一个很大的节省。

It’s important to note at this point though that this is just my experience with Source Sans, it will vary between fonts and you may find your outcome is worse than using standard fonts. So don’t just jump in blindly, make sure you test and compare and do what is best for your project.

重要的是，尽管这只是我在Source Sans上的经验，但字体之间会有所不同，您可能会发现结果比使用标准字体更糟。因此，不要盲目地投入，请确保您进行测试和比较，然后做对项目最有利的事情。

其他文件大小注意事项 (Additional file size considerations)

Some additional things to consider about file size — a single larger font file will take longer to load than multiple smaller font files. With standard fonts because individually they are typically a smaller file size you might have your body text render quicker and then the bold text load, and so on. The benefit here is that because, individually, the files are smaller you may get your content sooner.

关于文件大小，还需要考虑一些其他事项-单个较大的字体文件将比多个较小的字体文件花费更长的时间。使用标准字体，因为通常它们通常是较小的文件大小可能会更快地显示正文文本，然后加载粗体文本，依此类推。这样做的好处是，由于文件较小，因此可以更快地获取内容。

With variable fonts you have to wait for the single file to load before any text is rendered — this can result in a longer delay. However, having to wait for all the font data to download before rendering the text avoids the problem where part of our text might load and affect the message while we wait for other font versions to load in. Also, because we only load the fonts in once, we are not forcing the page to re-redraw every time a new font is loaded.

使用可变字体，您必须等待单个文件加载后再呈现任何文本，这会导致更长的延迟。但是，在渲染文本之前必须等待所有字体数据下载，从而避免了当我们等待其他字体版本加载时部分文本可能加载并影响消息的问题。此外，因为我们仅加载了一次，我们不会强迫页面在每次加载新字体时重新绘制。

So when it comes to file size, the verdict on variable fonts is, “it depends”, because it is going to depend on your site, your requirements and the fonts you are using.

因此，就文件大小而言，对可变字体的判断是“取决于”，因为这将取决于您的站点，您的要求和所使用的字体。

减少第一次渲染的时间 (Reducing time to first render)

So finally let’s look at reducing the time to first render. This has an obvious performance benefit because it’s in the name, and as I just explained the larger single file can take slightly longer to load than an individual standard font. So even a short delay with a Flash of Invisible Text can make the user feel like a page is loading slower than it is. As a result, and in my opinion, we should aim for a Flash of Unstyled Text instead of a Flash of Invisible Text.

因此，最后让我们来看一下减少首次渲染的时间。这具有明显的性能优势，因为它就是名称，而且正如我刚刚解释的那样，较大的单个文件的加载时间可能比单个标准字体的加载时间稍长。因此，即使是不可见文本闪烁的短暂延迟，也可以使用户感到页面加载速度慢于页面加载速度。因此，我认为，我们的目标应该是无样式文本闪烁，而不是不可见文本闪烁。

不可见文字闪烁(FOIT) (Flash of Invisible Text (FOIT))

The “Flash of Invisible Text” is when we block or delay the font from loading until it’s available. So our page can look very empty until the fonts have loaded in.

“不可见文本的闪烁”是指我们阻止或延迟加载字体直到字体可用。因此，在加载字体之前，我们的页面可能看起来很空白。

无样式文本的闪烁(FOUT) (Flash of Unstyled Text (FOUT))

Flash of Unstyled Text (FOUT) is when we load a fallback font and switch or swap to our custom fonts when they are ready.

无样式文本(FOUT)的闪烁是当我们加载后备字体并在准备好它们时切换或交换到自定义字体时。

In my opinion, a flash of unstyled text is a better experience than not being able to read your content at all — so what we want to be able to do is embrace FOUT but try and limit the impacts as much as we can.

我认为，与完全无法阅读您的内容相比，闪现未样式化的文本是一种更好的体验-因此，我们希望能够做到的是拥抱FOUT，但要尽可能地限制影响。

A simple way to embrace FOUT is by using the font-display property with the value of “swap” — this will render our fallback font defined in our font stack and then swap in the custom font when it has loaded. There are other options for font-display, which I recommend you investigate, but for FOUT, swap is a good place to start.

包含FOUT的一种简单方法是使用font-display属性，其值为“ swap”-这将呈现我们在字体堆栈中定义的后备字体，然后在加载后交换自定义字体。建议您研究字体显示的其他选项，但是对于FOUT，交换是一个不错的起点。

font-display: swap;

One of the issues with FOUT is that as the fonts swap, we often see the layout shifts to accommodate for the different “sized” fonts.

FOUT的问题之一是，随着字体的交换，我们经常看到布局发生变化以适应不同的“大小”字体。

With Standard Fonts we can modify the line-height, size and letter-spacing to try and match our system and custom fonts to reduce that layout shifting. We can do this with a fantastic tool called Font Style Matcher, built by Monica Dinculescu, inspired by a fantastic blog post by Helen Holmes called Type is Your Right (seriously great article go read it).

使用标准字体，我们可以修改行高，大小和字母间距，以尝试匹配我们的系统字体和自定义字体，以减少布局偏移。我们可以使用由Monica Dinculescu构建的名为Font Style Matcher的出色工具来实现此目的，该工具的灵感来自海伦·霍姆斯(Helen Holmes)的一篇出色的博客文章，名为Type is Your Right (阅读这篇文章非常好)。

What I’m hoping to see is as variable fonts become more widely supported across Operating Systems we can reduce this layout shifting by using a variable system font as a fallback in our font stack.

我希望看到的是，随着可变字体在操作系统中得到更广泛的支持，我们可以通过使用可变系统字体作为字体堆栈的后备方式来减少这种布局偏移。

Imagine if we had system fonts with the ability to control for weight, width and optical size — we would be able to modify the font itself to match the size, and the space it takes up, much more closely with our custom fonts. Combining with the existing techniques of line-height, font size etc, we could create an incredibly smooth transition between the two fonts meaning less noticeable FOUT and less redraw due to less layout shifting.

想象一下，如果我们拥有能够控制粗细，宽度和光学尺寸的系统字体，那么我们将能够修改字体本身以匹配大小和占用的空间，从而与我们的自定义字体更加紧密地匹配。结合现有的行高，字体大小等技术，我们可以在两种字体之间创建令人难以置信的平滑过渡，这意味着更少的FOUT和更少的重绘(由于更少的布局偏移)。

This would be incredible, and I hope we get to this at some point.

这将是不可思议的，我希望我们能够做到这一点。

TL; DR可变字体性能 (TL;DR Variable Font Performance)

Variable fonts reduce the overall combined file size and automatically reduce the number of network requests by simply being a variable font.

可变字体减小了整体组合文件的大小，并且仅通过使用可变字体即可自动减少网络请求的数量。

Even if you consider the slightly larger file sizes, when combined with improved font compression formats like WOFF2, font subsetting and font loading techniques like font-display: swap; we end up in a situation where we can still get smaller overall font file sizes as well as a significant increase in stylistic opportunity.

即使考虑到文件大小稍大一些，如果与改进的字体压缩格式(如WOFF2)，字体子集和字体加载技术(如font-display: swap; 我们在一个情况下，我们仍然可以得到较小的整体的字体文件的大小，以及在文体机会显著上升结束。

If we can improve some of our pre-existing technical problems around performance we can start to shift our focus. We no longer need to trade-off design for performance.

如果我们可以改善性能方面的一些先前存在的技术问题，我们可以开始转移我们的关注点。我们不再需要权衡设计以获得性能。

It becomes an opportunity to figure out how we can use this technology to create better experiences for our users. Variable fonts offer so much variation, this means we can create experiences which better suit our devices, and environments, and adjust our fonts to create more accessible and legible text, without being concerned about how the increase in the number of styles is going to blow out our page size.

这使我们有机会弄清楚如何使用这项技术为用户创造更好的体验。可变字体提供了很多变化，这意味着我们可以创建更适合我们的设备和环境的体验，并调整字体以创建更易读和易读的文本，而不必担心样式数量的增加将如何受到打击我们的页面大小。