Question

我已阅读此主题：@font-face not working in Firefox or IE - how can i figure out why?

这与我的问题非常相似，但我没有找到答案。

我的测试可以在以下位置找到： http://www.cleantelligent.com/test-site/home/ （并非所有的格式都是正确的，因为它是一个测试网站，我把它放在一起，但字体是我关注的。）

我正在开发一个双字体网站，他们在chrome和ie工作得很好。但是，firefox只会识别我的'platin'字体，而不是'tradegothic'。实际上网站的某些部分确实识别TG字体，但是例如，在滑块上，h1是platin，但是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将cross-broswer兼容文件导入我的系统和css。他们只在firefox中不起作用。

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

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

Answer 1

问题非常明显 - 您的TTF文件会出现404错误。它们不在那里（或者它们的文件名不同）。

编辑

通过将TradeGothic.ttf放入url（''）部分不允许服务器神奇地找到您的字体文件 - 您需要通过实际字体文件的路径引用它。

在您的情况下，可以通过/wp-content/uploads/fonts/TradeGothic.ttf

我不是在鼓吹你这样做，因为（1）你应该将你的资产存储在你的主题文件夹中;（2）你应该使用CSS文件中的相对路径引用该文件（但这意味着你' d必须摆脱主题头部的标签......并且只需使用我提供的路径进行快速修复，否则你将整天都在这里。

编辑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;
}

Font Face无法在Firefox中运行

1 个答案: