预加载 webfonts 时如何确定正确的本地字体名称？

Question

这篇文章：网络字体什么时候加载，你能预加载它们吗？, 表示使用 local 来利用已加载的字体。我找不到任何其他方式来预加载 webfonts。

但是，我不知道应该为本地引用使用哪些名称。在 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 文件的请求。此外，我找不到有关 Web 字体的任何最近或当前最佳实践或如何优化其性能，我该如何阻止这些请求？

Answer 1

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

\n\n

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

\n\n

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

\n\n

但这只会影响安装了该字体的系统。即，对于用户已购买并安装该字体的系统。

\n