Question

我遇到@ font-face的问题。我正在使用名为Whitney的自定义字体。它适用于Windows中的所有浏览器（包括Safari）。但在Mac OS或Ipad中无法使用Safari 。从互联网上，我已经知道.svg字体格式可以正常使用safari。所以我也试过了。但仍然没有得到应用。甚至其他字体的.ttf字体文件也在Safari中完美运行。有人请告诉我我的代码有什么问题......下面给出了。或者这个字体有问题吗？

@font-face
{
    font-family: bookFont;
    src: url("../fonts/whitney-book.eot");
    src: url( '../fonts/whitney-book.ttf' )format("truetype"), url('../fonts/whitneybook.svg#Whitney-book') format('svg');
}

Answer 1

您的语法看起来不正确。当你需要一个逗号时你有一个分号，你需要'）'和'format'之间的空格。

最后，请确保这些网址在常规浏览器中正确解析。它们需要相对于CSS文件，而不是webroot。

@font-face{
    font-family: bookFont;
    src: url('../fonts/whitney-book.eot') format('embedded-opentype'),
         url( '../fonts/whitney-book.ttf' ) format('truetype'), url('../fonts/whitneybook.svg#Whitney-book') format('svg'); }

Answer 2

你必须像这样使用它：

@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');

}

@ font-face无法在Mac OS或Ipad中使用Safari

2 个答案: