[英]what is font-display CSS feature?
For my website, I am getting following feedback from Google's PageSpeed Insights: Leverage the font-display CSS feature to ensure text is user-visible while web fonts are loading.对于我的网站,我从 Google 的 PageSpeed Insights 得到以下反馈:利用字体显示 CSS 功能确保在加载 Web 字体时用户可以看到文本。 What does that mean?
这意味着什么?
CSS font-display
allows you to control how web fonts are swapped with system fonts while/after they load. CSS
font-display
允许您控制 Web 字体在加载时/加载后如何与系统字体交换。 Lighthouse is telling you that you're loading a large amount of font data using @font-face
so there will be lag (up to several seconds) where your content is blank while waiting for the fonts to load. Lighthouse 告诉您,您正在使用
@font-face
加载大量字体数据,因此在等待字体加载时您的内容为空白会出现延迟(最多几秒钟)。
You can change this so that a fallback font (from your local system) loads right away and then gets swapped with your web fonts once they're loaded.您可以更改此设置,以便立即加载后备字体(来自您的本地系统),然后在加载后与您的网络字体交换。 (be aware that your fonts may have different sizes and cause things to jump around when they load) .
(请注意,您的字体可能具有不同的大小,并导致加载时出现跳动) 。
Consider a structure like this:考虑这样的结构:
@font-face { font-family: "Open Sans Regular"; font-style: normal; src: url("fonts/OpenSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } p { font-family: "Open Sans Regular", Helvetica, Arial, Sans-Serif; }
font-display:swap;
means when the page renders, all paragraph tags will use the FIRST AVAILABLE fallback font until Open Sans Regular
has loaded.意味着当页面呈现时,所有段落标签将使用第一个可用的后备字体,直到
Open Sans Regular
加载完毕。 (In this case Helvetica on a Mac and Arial on Windows). (在这种情况下,Mac 上的 Helvetica 和 Windows 上的 Arial)。
This gives you initial content on the screen in several milliseconds instead of potentially waiting several seconds for a font to load.这使您可以在几毫秒内在屏幕上显示初始内容,而不是等待几秒钟来加载字体。
Also Preload web fonts Use to fetch your font files earlier.还预加载网络字体用于更早地获取您的字体文件。
Ensure text remains visible during webfont load 确保文本在 webfont 加载期间保持可见
Font Feature is a technique to use advanced text styles and effects as designed by the font developer.字体功能是一种使用字体开发人员设计的高级文本样式和效果的技术。 A font may support a number of features: some examples include different kinds of ligatures, tabular numbers, or small caps.This picture explain much better
一种字体可能支持多种功能:一些示例包括不同种类的连字、表格数字或小型大写字母。这张图片解释得更好
You can solve this issue by using @fontface or you can also try different setting of font-display
.您可以使用 @fontface 解决此问题,也可以尝试不同的
font-display
设置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.