css - 许可的网络字体是如何呈现的？

Question

我正在查看一个元素的源代码，其中使用了来自 myfonts.com 的许可字体。

css 文件包含这个 -

  /* @import must be at top of file, otherwise CSS will not work */
    @import url("//hello.myfonts.net/count/123d4d");

   @font-face {
  font-family: 'SoliPx';
  src: url('webfonts/123D4D_1_0.eot');
  src: url('webfonts/123D4D_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/123D4D_1_0.woff') format('woff'),url('webfonts/123D4D_1_0.ttf') format('truetype');
}

并且如源网址中所述 - 在元素的本地 webfonts 文件夹中有 eot、woff、ttf 文件。

我知道@font-face 和 webfonts 的一般工作原理。

但在上面使用许可/商业字体的情况下，我没有在开发工具中看到任何下载的字体文件，但文本是使用指定字体呈现的。

有一个网络请求发送到 hello.myfonts.net/count/123d4d，状态为 200，响应 content-type 为“text/css”，但没有响应在响应正文中。

内部发生了什么？这是如何运作的？

Answer 1

我之前处理过这个问题，下面是导入文件的作用:

1. 就实际加载字体而言，它什么都不做。我之前(在测试时)将其遗漏了，并且字体可以从我的服务器正常加载。

2. 它计算文件被您的 CSS 导入的次数(因此 URL 中的 /count/)。如果您阅读 myfonts.com webfont 许可证，大多数 webfonts 都有每月的页面浏览量上限。如果您超过该上限，myfonts 将要再次向您的帐户收费，或建议您购买上限更高的新许可证。

所以我们真正拥有的是一个返回空 CSS 文件的 API 端点。每次加载该 CSS 文件时，myfonts 都会将 +1 添加到与末尾哈希对应的帐户的每月页面浏览量，在您的例子中为 123d4d。

再次声明，它与加载字体本身无关。您的服务器上有这些文件，它们将在引用时加载——句号。