添加自定义字体系列并应用于正文时，在 mac safari 上不显示字体

Question

在 Mac Safari 上查看：

在 Windows Chrome 上查看：

这是 css 麦粒肿

@font-face {
    font-family: Gotham HTF Light;
    src: url(gothamlight.ttf) format("truetype");
    src: url(gotham-black.otf) format("otf");}
@font-face {
    font-family: Gotham HTF Book;
    src: url(gothambook.ttf) format("truetype");
    src: url(gotham-black.otf) format("otf");
}
@font-face {
    font-family: Gotham HTF Medium;
    src: url(gothammedium.ttf) format("truetype");
    src: url(gotham-black.otf) format("otf");
}


html, body {
    text-rendering: optimizeLegibility;
}
body{        
    font-weight:normal;
} 
*{
    font-family:'Gotham HTF Light';
    font-weight: normal;
    font-style: normal;
}
input, select, textarea, button,label{
    font-family:inherit; 
}

如果我删除了 font-family:'Gotham HTF，如何解决这个问题 光';然后它工作正常，但是当我应用自定义字体时它不起作用 在表单字段上。

Answer 1

我遇到了这个问题，结果发现我使用的 .ttf 文件有缺陷。我没有立即意识到这一点，因为在 chrome 中是有效的。

为了解决这个问题，我刚刚下载了其他 .ttf 文件（适用于 Safari）。

Answer 2

使用所有字体格式支持所有浏览器（包括Safari）。试试这个

@font-face {
    font-family: 'Gotham HTF Light';
    src: url((gothammedium.eot);/* IE9 Compat Modes */
    src: url((gothammedium.eot?#iefix) format('embedded-opentype'),/* IE6-IE8 */       
         url(gothammedium.woff2) format('woff2'), /* Super Modern Browsers */
         url(gothammedium.woff) format('woff'), /* Pretty Modern Browsers */
         url(gothammedium.ttf) format('truetype'), /* Safari, Android, iOS */
         url(gothammedium.svg) format('svg');/* Legacy iOS */
}