如果您使用的是 Safari,我在网上找到了这个解决方案:
好吧,事实证明我确实解决了它,至少到目前为止在 Mac 上是这样。这里是:
创建 webkits 的 font-squirrel 和字体注册表在 URL 周围使用 " 和 ' 生成 CSS。这似乎使事情变得更糟。他们还将所有的权重和样式设置为正常,这似乎也造成了严重破坏。
这是字体松鼠为 Lato 的 2 个面生成的代码:
@font-face {
font-family: 'LatoBlackItalic';
src: url('Lato-BlackItalic-webfont.eot');
src: url('Lato-BlackItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('Lato-BlackItalic-webfont.woff') format('woff'),
url('Lato-BlackItalic-webfont.ttf') format('truetype'),
url('Lato-BlackItalic-webfont.svg#LatoBlackItalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'LatoBlack';
src: url('Lato-Black-webfont.eot');
src: url('Lato-Black-webfont.eot?#iefix') format('embedded-opentype'),
url('Lato-Black-webfont.woff') format('woff'),
url('Lato-Black-webfont.ttf') format('truetype'),
url('Lato-Black-webfont.svg#LatoBlack') format('svg');
font-weight: normal;
font-style: normal;
}
这是我将其更改为实际适用于 Safari 和 Chrome 和 Firefox 的内容:
@font-face {
font-family: Lato;
src: url(../../fonts/Lato-BlackItalic-webfont.eot);
src: url(../../fonts/Lato-BlackItalic-webfont.eot?#iefix) format(embedded-opentype),
url(../../fonts/Lato-BlackItalic-webfont.woff) format(woff),
url(../../fonts/Lato-BlackItalic-webfont.ttf) format(truetype),
url(../../fonts/Lato-BlackItalic-webfont.svg#LatoBlackItalic) format(svg);
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Lato;
src: url(../../fonts/Lato-Black-webfont.eot);
src: url(../../fonts/Lato-Black-webfont.eot?#iefix) format(embedded-opentype),
url(../../fonts/Lato-Black-webfont.woff) format(woff),
url(../../fonts/Lato-Black-webfont.ttf) format(truetype),
url(../../fonts/Lato-Black-webfont.svg#LatoBlack) format(svg);
font-weight: 900;
font-style: normal;
}
链接在这里:http ://css-tricks.com/forums/discussion/10797/font-face-not-working-in-only-safari-/p1
希望这可以帮助。