@font-face 不适用于 Mac OS 或 Ipad 中的 Safari答案

【问题标题】：@font-face not working with Safari in Mac OS or in Ipad@font-face 不适用于 Mac OS 或 Ipad 中的 Safari
【发布时间】：2012-03-12 11:26:32
【问题描述】：

我遇到了@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');
}

【问题讨论】：

#Whitney-book 是否与您的 SVG 文件中的 id 匹配？看看这个问题：stackoverflow.com/questions/4058342/…
是的。 id #Whitney-book 是正确的。它与我在 SVG 文件中找到的 id 相同。 " "
您确定相对网址指向正确的目录吗？尝试删除 ../.或者将字体直接放在与 css 相同的文件夹中。

标签： css

【解决方案1】：

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

最后，确保这些 url 在常规浏览器中正确解析。它们需要相对于 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'); }

【讨论】：

【解决方案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');

}

【讨论】：