字体不显示Safari
@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;
有什么想法吗？
@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;
}
See above css. This works fine on Chrome, Firefox and Edge. But in Safari the text sometimes simply doesn't show. So it doesn't even go to the fallback, it just doesn't show.
This seems to be especially the case when the text is dynamically inserted with JavaScript. I can see the text in the inspector but not in the viewport. It always shows up when using:
font-family: 'Helvetica', sans-serif;
Any ideas?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
也许您的Safari版本不支持字体，也许您可以更改为另一个字体。
例如：
Perhaps your Safari version does not support the fonts, maybe you can change into another one.
E.g.: