我的一种网络字体无法在 Firefox 上呈现

发布于 2024-12-25 02:50:03 字数 1136 浏览 1 评论 0原文

我的网站上安装了两种网络字体，一种可以在 Firefox 上使用，而另一种则不能。如果你在 Chrome 上检查，两种 Google 网络字体都可以完美运行。这是我的代码：

@font-face {
    font-family: 'UnitSlabProLight';
    src: url('/unitslabpro-light-webfont.eot');
    src: url('/unitslabpro-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/unitslabpro-light-webfont.woff') format('woff'),
         url('/unitslabpro-light-webfont.ttf') format('truetype'),
         url('/unitslabpro-light-webfont.svg#UnitSlabProLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'UnitSlabProBlack';
    src: url('/unitslabpro-black-webfont.eot');
    src: url('/unitslabpro-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('/unitslabpro-black-webfont.woff') format('woff'),
         url('/unitslabpro-black-webfont.ttf') format('truetype'),
         url('/unitslabpro-black-webfont.svg#UnitSlabProBlack') format('svg');
    font-weight: normal;
    font-style: normal;

}

网站是 http://www.journeytoearth.com/

提前感谢您的任何帮助和解决方案。

原文

I have two web fonts installed on my site and one is working on Firefox, while the other one is not. If you check it on Chrome, both of the Google web fonts work perfect.
Here is my code:

@font-face {
    font-family: 'UnitSlabProLight';
    src: url('/unitslabpro-light-webfont.eot');
    src: url('/unitslabpro-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/unitslabpro-light-webfont.woff') format('woff'),
         url('/unitslabpro-light-webfont.ttf') format('truetype'),
         url('/unitslabpro-light-webfont.svg#UnitSlabProLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'UnitSlabProBlack';
    src: url('/unitslabpro-black-webfont.eot');
    src: url('/unitslabpro-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('/unitslabpro-black-webfont.woff') format('woff'),
         url('/unitslabpro-black-webfont.ttf') format('truetype'),
         url('/unitslabpro-black-webfont.svg#UnitSlabProBlack') format('svg');
    font-weight: normal;
    font-style: normal;

}

Site is http://www.journeytoearth.com/

Thanks in advance for any help and solutions.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只为一人 2025-01-01 02:50:03

看起来“UnitSlabProBlack”的 @font-face src 属性是绝对链接的，而“UnitSlabProLight”src 属性是相对于根的。

我建议尝试更改 UnitSlabProBlack src 格式以匹配“UnitSlabProLight”的格式，因为该格式有效。

看起来 Firefox 只接受 src 的相对链接：
http://webfonts.info/wiki/index.php?title=%40font -face_support_in_Firefox

来自 http://www.journeytoearth.com/wp-content/themes/melville/style.css

@font-face {
font-family: 'UnitSlabProLight';
src: url('/unitslabpro-light-webfont.eot');
src: url('/unitslabpro-light-webfont.eot?#iefix') format('embedded-opentype'),
     url('/unitslabpro-light-webfont.woff') format('woff'),
     url('/unitslabpro-light-webfont.ttf') format('truetype'),
     url('/unitslabpro-light-webfont.svg#UnitSlabProLight') format('svg');
font-weight: normal;
font-style: normal;}


@font-face {
font-family: 'UnitSlabProBlack';
src: url('http://www.journeytoearth.com/fonts/unitslabpro-black-webfont.eot');
src: url('http://www.journeytoearth.com/fonts/unitslabpro-black-webfont.eot?#iefix') format('embedded-opentype'),
     url('http://www.journeytoearth.com/fonts/unitslabpro-black-webfont.woff') format('woff'),
     url('http://www.journeytoearth.com/fonts/unitslabpro-black-webfont.ttf') format('truetype'),
     url('http://www.journeytoearth.com/fonts/unitslabpro-black-webfont.svg#UnitSlabProBlack') format('svg');
font-weight: normal;
font-style: normal;}

It looks like the @font-face src property for the "UnitSlabProBlack" is absolutely linked, while your "UnitSlabProLight" src property is relative to the root.

I would suggest to try changing the UnitSlabProBlack src format to match that of the "UnitSlabProLight", since that one works.

It looks like Firefox only accepts relative links for the src:
http://webfonts.info/wiki/index.php?title=%40font-face_support_in_Firefox

From http://www.journeytoearth.com/wp-content/themes/melville/style.css

@font-face {
font-family: 'UnitSlabProLight';
src: url('/unitslabpro-light-webfont.eot');
src: url('/unitslabpro-light-webfont.eot?#iefix') format('embedded-opentype'),
     url('/unitslabpro-light-webfont.woff') format('woff'),
     url('/unitslabpro-light-webfont.ttf') format('truetype'),
     url('/unitslabpro-light-webfont.svg#UnitSlabProLight') format('svg');
font-weight: normal;
font-style: normal;}


@font-face {
font-family: 'UnitSlabProBlack';
src: url('http://www.journeytoearth.com/fonts/unitslabpro-black-webfont.eot');
src: url('http://www.journeytoearth.com/fonts/unitslabpro-black-webfont.eot?#iefix') format('embedded-opentype'),
     url('http://www.journeytoearth.com/fonts/unitslabpro-black-webfont.woff') format('woff'),
     url('http://www.journeytoearth.com/fonts/unitslabpro-black-webfont.ttf') format('truetype'),
     url('http://www.journeytoearth.com/fonts/unitslabpro-black-webfont.svg#UnitSlabProBlack') format('svg');
font-weight: normal;
font-style: normal;}

回复收藏 0 原文

~没有更多了~