浏览器是否会下载 @font-face 语句中不必要的文件？

发布于 2024-12-24 17:58:06 字数 264 浏览 5 评论 0原文

我想使用“如果您有此系统字体 A，则使用它，否则下载并使用字体 B”的逻辑来选择网页中的字体。

我可以在 CSS 中执行此操作，如下所示：

@font-face {
  font-family: B;
  src: url('B.ttf');
}

p {
  font-family: A, B;
}

我的问题是：如果系统安装了字体 A（即渲染文档实际上从来不需要字体 B），是否下载了 B.ttf - 浏览器之间是否有所不同？

原文

I would like to choose fonts in a web page using logic along the lines of "if you have this system font A, use it, otherwise download and use font B".

I can do this in CSS like so:

@font-face {
  font-family: B;
  src: url('B.ttf');
}

p {
  font-family: A, B;
}

My question is: If the system has font A installed (i.e. font B is never actually required to render the document), is B.ttf downloaded or not - and does it vary between browsers?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

稳稳的幸福 2024-12-31 17:58:06

即使系统上提供了字体 A，并且浏览器不需要回退到字体 B，可能会请求文件 B.ttf。

释义自 CSS3字体模块规范，§4.7 字体加载指南，其中相关代码片段：

在字符后备情况下可能会下载字体的情况下，如果字体列表中列出但实际上并未用于给定的文本运行，则用户代理可以下载该字体。
@font-face {
  字体系列：GeometricModern；
  src: url(字体.ttf);
}

h2 {
  /* 可以为包含 h2 元素的页面下载字体，
     即使 Futura 在本地可用 */
  字体系列：Futura、GeometricModern、sans-serif；
}

由于这不是一项要求（即“可以”，而不是“必须”），因此即使不需要，供应商也可以选择其浏览器是否下载网络字体以供后备使用。据我所知，Firefox 会下载 B.ttf，而 Safari 和 Google Chrome 似乎不会（我什至还没有在 Opera 和 IE 中测试过）。

因此，看起来这种行为因浏览器而异，但在这种情况下没有对错之分。

The file B.ttf may be requested, even if font A is available on the system and the browser doesn't need to fall back to font B.

Paraphrased from the CSS3 Fonts module spec, §4.7 Font loading guidelines, with a relevant code snippet:

In cases where a font might be downloaded in character fallback cases, user agents may download a font if it's listed in a font list but is not actually used for a given text run.
@font-face {
  font-family: GeometricModern;
  src: url(font.ttf);
}

h2 {
  /* font may be downloaded for pages with h2 elements,
     even if Futura is available locally */
  font-family: Futura, GeometricModern, sans-serif;
}

Since it's not a requirement (i.e. "may", not "must"), it's the vendor's choice whether their browser downloads a web font for fallback use even if it's not required. As far as I know, Firefox will download B.ttf, and it appears that Safari and Google Chrome won't (I haven't even tested in Opera and IE yet).

So, it looks like this behavior varies between browsers — but there's no right or wrong in such a scenario.

回复收藏 0 原文

~没有更多了~