Safari中未显示字体

Question

@font-face {
font-family: 'Gotham';
src: url('../../assets/fonts/GothamBook.ttf') format('truetype'),
url('../../assets/fonts/gothambook-webfont.woff') format('woff'),
url('../../assets/fonts/gothambook-webfont.woff2') format('woff2');
font-weight: 400;
}
@font-face {
font-family: 'Gotham';
src: url('../../assets/fonts/GothamBold.ttf') format('truetype'),
url('../../assets/fonts/gothambold-webfont.woff') format('woff'),
url('../../assets/fonts/gothambold-webfont.woff2') format('woff2');
font-weight: 700;
}
body {
font-size: 1.6rem;
font-family: 'Gotham', 'Arial', 'Helvetica', sans-serif;
}

请参见上面的css。这在Chrome、Firefox和Edge上运行良好。但在Safari中，文本有时根本不会显示。所以它甚至没有进入后备状态，只是没有显示出来。

当使用JavaScript动态插入文本时，情况似乎尤其如此。我可以在检查器中看到文本，但在视口中看不到。它总是在使用时显示：

font-family: 'Helvetica', sans-serif;

有什么想法吗？

Answer 1

也许你的Safari版本不支持字体，也许你可以换成另一种。

例如：

font-family: "Georgia", "Times New Roman", //[...]