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

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');
}

根据源URL中提到的，项目的webfonts文件夹中有eot、woff和ttf文件。

我了解@font-face和webfonts的一般工作原理。但在上面提到的使用经许可/商业字体的情况下，我没有看到任何下载的字体文件，但是文本确实使用指定的字体呈现。

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

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

- Johnbabu Koppolu

---

此问题似乎与许可证有关，因此被认为是不适当的。 - Jukka K. Korpela

好的，我会尽力做到最好。以下是需要翻译的内容：@JukkaK.Korpela - 请读一下我的问题 - 我只想知道字体的渲染方式，字体文件是如何隐藏的，这与许可条款无关。 - Johnbabu Koppolu

我认为你误解了@font-face的工作原理 - (at)font-face声明通过加载指定的文件来呈现Web字体。如果您没有看到它们下载，有一些可能性 - 首先它们被缓存（仍应显示），或者您在本地安装了相同的字体，在这种情况下，浏览器只使用该字体。 (at)import不影响字体的呈现，它只是用于在文件顶部注册页面视图以使您的字体正常工作。 - Mark

Answer 1

我之前遇到过这个问题，下面是导入的文件的作用：

1. 实际上，导入的文件并不会加载字体。在测试时，我已经省略了它，但字体仍能从我的服务器中成功加载。

2. 这个文件计算CSS引用次数（因此URL中包含“/count/”）。如果阅读了myfonts.com网页字体许可协议，大多数网页字体都有每月页面浏览量上限。如果超过了这个限制，myfonts将要求再次收费或建议您购买具有更高限制的新许可证。

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

再次强调，它与加载字体本身无关。您的服务器上已经有文件，只要引用即可加载。

- TristanZimmerman

---

CSS文件中MyFonts的评论声称“@import必须位于文件顶部，否则CSS将无法工作”（指涉到计数脚本），这实际上并不是真的吗？他们只是在虚张声势，以确保您计算浏览量吗？ 这句话的意思是：MyFonts在CSS文件中的评论声称，如果@import不在文件顶部，CSS就不能正常工作（这与计数脚本有关）。你问这是否真的如此，他们只是为了让你计算浏览量而吓唬人吗？ - Bradley Flood

技术上讲，这是不正确的。虽然它可以工作，但他们希望人们包含它以获得准确的页面浏览量。一种道德的方法是通过JavaScript _异步地_加载hello.myfonts.net URL。这样，MyFonts仍然可以获得他们的页面浏览量，而且你的整个样式表不会被页面计数器URI（!）阻止。 - Phil Ricketts

+1. @TristanZimmerman，你说得对。我在较慢的网络上测试我的网站时发现导入字体会阻止整个页面的呈现。不明白为什么myfonts.net会关心页面浏览量，毕竟我已经买了这个字体。 - NM Pennypacker

不是重点，@NickM只是说如果你为字体付费，你可以期望一个没有阻挡追踪器的字体。 - Urs

你好，myfonts.net 最近几天好像无法访问，有人知道为什么吗？请翻译该内容。 - plarner7