如何呈现许可的Web字体？

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一般是如何工作的.

但在上面使用许可/商业字体的情况下,我没有看到在Dev Tools中下载任何字体文件,但文本是使用指定的字体呈现的.

有一个net请求,hello.myfonts.net/count/123d4d状态为200,响应content-type为"text/css",但响应正文中没有任何内容.

内部发生了什么？这是怎么回事？

Answer 1

我以前处理过这个问题,这是导入文件的作用:

1. 至于实际加载字体,它什么都不做.我之前(在测试时)已将其删除,并且字体从我的服务器加载正常.

2. 它计算CSS导入文件的次数(因此/count/在URL中).如果您阅读myfonts.com webfont许可证,大多数webfonts都会提供每月的综合浏览量上限.如果您通过该上限,myfonts将再次向您的帐户收费,或建议您购买具有更高上限的新许可.

所以我们真正拥有的是一个返回空CSS文件的API端点.每次加载CSS文件时,myfonts都会为每个页面查看次数添加+1,与您最后的哈希值相对应123d4d.

再一次,它与加载字体本身无关.您拥有服务器上的文件,它们将在引用完全停止时加载.