Safari用户安装的字体无法渲染

Question

我正在使用MAC OSX，而​​我的Safari版本是13.0.3。我尝试在计算机上安装一些自定义字体。我在机器上安装了https://www.fontsquirrel.com/fonts/list/popular中的字体great-vibes（仅作为示例），它现在显示在“字体书”的“用户字体”部分下。我正在使用.otf字体格式。我现在尝试像这样在Web应用程序上使用它：

@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  src: local('Great Vibes')
}
body {
  font-family: 'Great Vibes' !important;
}

这在Chrome和Firefox（即使没有@ font-face）声明中也有效。但这是NOT在Safari上的工作。我尝试过-webkit-text-stroke：.5px;文本渲染：optimizeLegibility；但它不起作用。我尝试将不同的自定义字体安装到计算机中，但它们也无法在Safari上运行。我看到字体已正确安装。

注意：将自定义字体保留在我的应用程序代码中，并使用@ font-face / src / url即可。问题是当尝试访问计算机上自定义安装的字体时。

Answer 1

Safari似乎在处理TFF字体时遇到问题。您应该尝试Bulletproof @font-face Syntax，其基本语法如下所示：

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
url('myfont-webfont.woff') format('woff'), 
url('myfont-webfont.ttf')  format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}