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

Question

这篇文章：When do web-fonts load and can you pre-load them?，说使用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文件的请求。此外，我找不到关于网络字体的最新或当前最佳做法或如何优化其性能，我如何防止这些请求？

Answer 1

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

local(...)的使用与其他内容有关，即字体可能作为安装的字体存在于系统中。这取决于系统设置和用户操作;作为作者，您无法使用户的系统安装字体。

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

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

Answer 2

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