Post by account_disabled on Jan 31, 2024 7:08:05 GMT
本文是与SiteGround合作创建的系列文章的一部分。感谢您对合作伙伴的支持,使 SitePoint 成为可能。 Pause Next Unmute Current Time 0:07 / Duration 2:00 Fullscreen 现在 67% 的网页使用自定义字体。然而,流行和广泛采用并不是没有一些性能和用户体验相关的问题。 在本文中,我将介绍 Web 字体的常用使用和加载方式的不足之处,并向您指出经过充分测试的解决方法和未来基于标准的解决方案。 为什么要自定义网页字体? 用户访问您的网站是为了获取内容。因此,出色的版式在网络上至关重要:可读性、易读性和精心设计的版式设计是品牌认知度和信息成功的必要条件。 实现美观排版的最佳方法是加载自定义 Web 字体,即用户设备上尚未安装的字体文件。 Learn to Code with JavaScript 由于浏览器对 CSS@font-face规则的支持已变得普遍,因此在网站中使用自定义 Web 字体的情况突飞猛进。但是,字体的文件大小可能很大,并且在网站上加载额外的资源不会不对性能产生负面影响。 由于文件大小肯定是一个问题,因此关注自定义 Web 字体的加载方式成为首要问题。
隐形文本闪光 (FOIT) 是怎么回事? 使用自定义 Web 字体的最常见方法是指定 CSS 声明中使用的字体@font-face,并使浏览器保持默认行为。这并不理想。由于有关字体的信息位于 CSS 中,因此默认情况下浏览器会延迟加载字体,直到解析 CSS。那不是 WhatsApp 号码数据 全部。正如扎克·莱瑟曼 (Zach Leatherman)所明确指出的那样,要触发字体下载,除了有效声明之外,还必须满足许多条件@font-face: font-family使用内部相同指定的 HTML 节点@font-face 在 Webkit 和 Blink 浏览器中,该节点不能为空 在支持 unicode 范围描述符的浏览器中@font-face,内容也必须匹配指定的 unicode 范围。 如果满足上述所有要点,浏览器就会开始下载字体。这意味着浏览器不仅需要解析 CSS 代码,还需要解析网站的文本内容才能触发字体下载。然而,当字体开始加载时,网络用户可能会遇到可怕的“隐形文本闪烁”(简称FOIT) 。 FOIT:页面位于同时字体正在 Firefox v.52 上加载。 文字是看不见的。 FOIT:页面位于 同时字体正在 Firefox v.52 上加载。文字是看不见的。 FOIT:在 Firefox v.52 上加载字体后,位于 的页面。 文字已变得可见 FOIT:在 Firefox v.52 上加载字体后,位于 的页面。文本变得可见。 换句话说,一旦浏览器开始下载字体,所有文本就会变得不可见。
因此,用户会在一段时间内观看没有文字的屏幕,而在低于标准的网络条件下,这可能会让人感觉像是永远。此外,不同浏览器处理FOIT的方式也有所不同: Blink 和 Firefox 浏览器通过引入三秒超时来解决 FOIT:字体加载期间文本最多消失三秒。如果字体在此时间范围内尚未加载,网站将显示后备字体,一旦完全加载,该字体随后将替换为自定义字体。这种行为产生了所谓的FOUT(另一个缩写词):Flash Of Unstyled Text。 Safari、默认的 Android 浏览器和 Blackberry 不使用超时,但在加载自定义字体之前不会显示任何文本。如果出现任何问题并且字体未加载,用户将在屏幕上留下不可见的文本。 IE/Edge浏览器不会隐藏文本,而是立即显示后备字体,这似乎是微软更好的设计决策。 Learn to Code with JavaScript 虽然在网站上阅读文本时字体突然改变并不是最好的用户体验,但在字体加载时盯着空白屏幕听起来更糟糕。理想情况下,工作方法应同时克服 FOUT 和 FOIT。然而,尽管这是一个悬而未决的问题,但许多专家一致认为 FOUT 比 FOIT 好得多。 解决与加载字体相关的问题涉及优化文件大小和控制默认浏览器行为,以消除 FOIT 并最大限度地减少 FOUT 的不和谐影响。 让我们一次仔细地研究每一项任务。
隐形文本闪光 (FOIT) 是怎么回事? 使用自定义 Web 字体的最常见方法是指定 CSS 声明中使用的字体@font-face,并使浏览器保持默认行为。这并不理想。由于有关字体的信息位于 CSS 中,因此默认情况下浏览器会延迟加载字体,直到解析 CSS。那不是 WhatsApp 号码数据 全部。正如扎克·莱瑟曼 (Zach Leatherman)所明确指出的那样,要触发字体下载,除了有效声明之外,还必须满足许多条件@font-face: font-family使用内部相同指定的 HTML 节点@font-face 在 Webkit 和 Blink 浏览器中,该节点不能为空 在支持 unicode 范围描述符的浏览器中@font-face,内容也必须匹配指定的 unicode 范围。 如果满足上述所有要点,浏览器就会开始下载字体。这意味着浏览器不仅需要解析 CSS 代码,还需要解析网站的文本内容才能触发字体下载。然而,当字体开始加载时,网络用户可能会遇到可怕的“隐形文本闪烁”(简称FOIT) 。 FOIT:页面位于同时字体正在 Firefox v.52 上加载。 文字是看不见的。 FOIT:页面位于 同时字体正在 Firefox v.52 上加载。文字是看不见的。 FOIT:在 Firefox v.52 上加载字体后,位于 的页面。 文字已变得可见 FOIT:在 Firefox v.52 上加载字体后,位于 的页面。文本变得可见。 换句话说,一旦浏览器开始下载字体,所有文本就会变得不可见。
因此,用户会在一段时间内观看没有文字的屏幕,而在低于标准的网络条件下,这可能会让人感觉像是永远。此外,不同浏览器处理FOIT的方式也有所不同: Blink 和 Firefox 浏览器通过引入三秒超时来解决 FOIT:字体加载期间文本最多消失三秒。如果字体在此时间范围内尚未加载,网站将显示后备字体,一旦完全加载,该字体随后将替换为自定义字体。这种行为产生了所谓的FOUT(另一个缩写词):Flash Of Unstyled Text。 Safari、默认的 Android 浏览器和 Blackberry 不使用超时,但在加载自定义字体之前不会显示任何文本。如果出现任何问题并且字体未加载,用户将在屏幕上留下不可见的文本。 IE/Edge浏览器不会隐藏文本,而是立即显示后备字体,这似乎是微软更好的设计决策。 Learn to Code with JavaScript 虽然在网站上阅读文本时字体突然改变并不是最好的用户体验,但在字体加载时盯着空白屏幕听起来更糟糕。理想情况下,工作方法应同时克服 FOUT 和 FOIT。然而,尽管这是一个悬而未决的问题,但许多专家一致认为 FOUT 比 FOIT 好得多。 解决与加载字体相关的问题涉及优化文件大小和控制默认浏览器行为,以消除 FOIT 并最大限度地减少 FOUT 的不和谐影响。 让我们一次仔细地研究每一项任务。