css - 预加载网络字体时如何确定正确的本地字体名称？

Question

本文:When do web-fonts load and can you pre-load them? , 表示使用 local 来利用已经加载的字体。我找不到任何其他方式来预加载网络字体。

但是，我不知道应该为本地引用使用什么名称。在 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

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