Safari 用户安装的字体不呈现

Question

我使用的是 MAC OSX，我的 Safari 版本是 13.0.3。我尝试在我的机器上安装一些自定义字体。我在我的机器上安装了来自https://www.fontsquirrel.com/fonts/list/popular（只是一个例子）的字体 great-vibes ，它现在显示在我的字体簿的用户字体部分下。我正在使用 .otf 格式的字体。我现在尝试在我的网络应用程序上使用它，如下所示：

@font-face {
  font-family: 'Great Vibes'; //Added postscript name as well, did not work
  font-style: normal;
  font-weight: 400;
  src: local('Great Vibes')
}
body {
  font-family: 'Great Vibes' !important;
}

这适用于 Chrome 和 Firefox（即使没有@font-face）声明。但这不适用于 Safari。我尝试过像 -webkit-text-stroke: .5px; 这样的选项。文本渲染：优化易读性；但它不起作用。我尝试在我的机器中安装不同的自定义字体，但它们也不适用于 Safari。我看到字体已正确安装。

注意：在我的应用程序代码中保留自定义字体并使用 @font-face/src/url 工作得很好。问题是在尝试访问机器上自定义安装的字体时。

Answer 1

原因是 Safari 12/macOS Mojave 禁止显示用户安装的字体以对抗浏览器指纹识别，这可以通过观察您的系统配置（包括您安装的字体）来进行在线跟踪。通过仅渲染默认系统字体，当然还有任何其他可通过互联网访问的字体，您的计算机看起来更像其他任何字体，并且变得更难跟踪。

如果你想使用非标准字体在Safari开发，你必须使用@font-face/ src/url声明指向嵌入式或网络托管的字体。或者，您可以禁用跟踪保护，但这可能不是一个好主意。

如果您在 Firefox 中激活了增强的跟踪保护，这也会阻止指纹识别，您应该会看到与 Safari 相同的行为。

资料来源：两个reddit 帖子

Answer 2

您应该尝试Bulletproof @font-face Syntax，其中本地字体的基本语法如下所示：

@font-face {
font-family: 'Graublau Web';
src: url(GraublauWeb.eot);
src: local('Graublau Web Regular'), url(GraublauWeb.otf) format('opentype');
}