1

我读过这个帖子：@font-face not working in Firefox or IE - 我怎么知道为什么？

它与我的问题非常相似，但我没有在那里找到答案。

我的 test-ste 可以在以下位置找到： http://www.cleantelligent.com/test-site/home/ （并非所有格式都是正确的，因为它是我拼凑在一起的测试站点，但字体是我关心的。 )

我正在开发一个双字体网站，他们在 chrome 和 ie 中工作得很好。但是，firefox 只会识别我的“platin”字体，而不是“tradegothic”。实际上网站的某些部分确实可以识别 TG 字体，但例如，在滑块上，h1 是铂金，但 h2 应该是 TG，而不是。其他页面也一样。

据我所知，我的编码是正确的，并且文件在正确的位置。知道为什么它不起作用吗？

/*header font*/
@font-face {
font-family: platin;
src: url('platin-webfont.eot');
src: url('platin-webfont.eot?#iefix') format('embedded-opentype'),
     url('platin-webfont.woff') format('woff'),
     url('Platin.ttf') format('truetype');
}
/*content font*/
@font-face {
font-family: tradegothic;
src: url('tradegothic-webfont.eot');
src: url('tradegothic-webfont.eot?#iefix') format('embedded-opentype'),
     url('tradegothic-webfont.woff') format('woff'),
     url('TradeGothic.ttf') format('truetype');
}

我使用 font-squirrel 将跨浏览器兼容的文件放入我的系统和 css。他们只是在Firefox中不起作用。

检查 www.cleantelligent.com/wp-content/themes/cleantelligent/images/Capture.JPG 和 Capture2.JPG

标题应该是 Platin，但副标题应该是 TG。在这两个镜头上。（Capture.JPG 是来自另一个页面的屏幕截图，不在我的测试站点上，但面临同样的问题。

4

1 回答 1

0

问题很明显 - 您的 TTF 文件出现 404 错误。它们不存在（或者它们的文件名不同）。

编辑

通过将 TradeGothic.ttf 放在 url('') 部分中，您的服务器不会神奇地找到您的字体文件 - 您需要通过实际字体文件的路径来引用它。

在你的情况下，这将是通过/wp-content/uploads/fonts/TradeGothic.ttf

我不提倡你这样做，因为（1）你应该将你的资产存储在你的主题文件夹中，（2）你应该使用 CSS 文件中的相对路径来引用文件（但这意味着你必须摆脱主题头部的标签......只需使用我提供的快速修复路径，否则您将整天处于此状态。

编辑 2

为清楚起见，这是我在 WordPress 中处理字体的方式：

themes/
 my_theme/
  assets/
   css/
    style.css
   fonts/
     myfont.ttf
     myfont.eot
     myfont.woff
     myfont.svg

style.css 中的 CSS 看起来像：

@font-face {
    font-family: 'MyFont';
    src: url(../fonts/myfont.eot); /* IE9 & compatibility modes */
    src: url(../fonts/myfont.eot?#iefix) format('eot'), /* IE6-8 */
    url(../fonts/myfont.woff) format('woff'), /* Firefox, Opera */
    url(../fonts/myfont.ttf) format('opentype'), /* Chrome */
    url(../fonts/myfont.svg#myfont) format('svg'); /* Safari */
    font-weight: normal;
    font-style: normal;
}
于 2013-09-06T16:00:58.987 回答