0

我在一个网站上有一个非常奇怪的问题。

我们最近推出了一个网站，该网站在 PC 上运行良好。但是对于 Mac，浏览器根本不显示任何字体。

我font-face用来包含特定字体，并且有 2 种不同的样式表，具体取决于屏幕宽度。我尝试了这里找到的几个选项，但似乎都没有。我在 css 中使用的最后一个语法是这样的

@font-face {
    font-family:'ChollaSansGr';
    src: url('http://:/')format('IE-No-404'),url('./fonts/ChSaGrRg.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
}

所以我的问题是，是否有人可以帮助我解决问题或就问题的根源提出建议。

4

1 回答 1

4

如果您使用的是 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

希望这可以帮助。

于 2012-10-28T13:33:58.197 回答