7

这篇文章：网络字体什么时候加载，你可以预加载它们吗？，说使用本地来利用已经加载的字体。我找不到任何其他方式来预加载网络字体。

但是，我不知道应该为本地引用使用什么名称。在 MacOSX 中，多个变体显示为相同的字体名称。例如，我认为本地的（“Helvetica Neue Light”）在字体书中可用作“Helvetica Neue”......我如何引用不同的变体？

@font-face {
  font-family: 'ProximaNova';
  font-weight: normal;
  font-style: normal;
  src: url('/fonts/proximanova/ProximaNova-Reg-webfont.eot');
  src:  local("Proxima Nova Regular"), url('/fonts/proximanova/ProximaNova-Reg-webfont.eot?#iefix') format('embedded-opentype'),
       url('/fonts/proximanova/ProximaNova-Reg-webfont.woff') format('woff'),
       url('/fonts/proximanova/ProximaNova-Reg-webfont.ttf') format('truetype'),
       url('/fonts/proximanova/ProximaNova-Reg-webfont.svg#webfont') format('svg');
}

@font-face {
  font-family: 'ProximaNova';
  font-weight: $light_weight;
  font-style: normal;
  src: url('/fonts/proximanova/ProximaNova-Light-webfont.eot');
  src: url('/fonts/proximanova/ProximaNova-Light-webfont.eot?#iefix') format('embedded-opentype'),
       url('/fonts/proximanova/ProximaNova-Light-webfont.woff') format('woff'),
       url('/fonts/proximanova/ProximaNova-Light-webfont.ttf') format('truetype'),
       url('/fonts/proximanova/ProximaNova-Light-webfont.svg#webfont') format('svg');
}

所有变体仍然会导致对 chrome 中的 woff 文件的请求。此外，我找不到任何关于网络字体的最新或当前最佳实践或如何优化它们的性能，我该如何阻止这些请求？

4

2 回答 2

4

作为对 Jukka 答案的补充，您可以使用 Mac OS 上的 FontBook 应用程序来查找字体的各种名称。要查看名称，请选择字体，然后选择信息选项卡 (CMD+i)。

字体书信息选项卡

于 2020-07-09T12:40:21.520 回答
1

Web 字体在正常规则下会受到缓存，因此如果用户最近访问了引用 Web 字体的页面，则在访问另一个页面时可能会使用缓存的浏览器副本，并且它使用相同的 URL 用于 Web 字体.

的使用local(...)与其他东西有关，即字体可能作为已安装字体存在于系统中的可能性。这取决于系统设置和用户操作；作为作者，您不能让用户的系统安装字体。

从技术上讲，在 中 local(...)，您应该为特定字体（而不是字体系列）使用名称，并且该名称应该是 PostScript 名称或字体的全名。这些名称可以在字体名称表中找到，对应于nameID值 6 和 4。要找出这些名称，您可以使用例如DTL OTMaster Light程序。

但这只会影响安装了字体的系统。也就是说，对于用户购买并安装了字体的系统。

于 2013-08-08T19:25:22.350 回答