CSS font-face 在 Firefox 中不起作用

Posted 2023-03-06

【中文标题】CSS font-face 在 Firefox 中不起作用

【英文标题】：CSS font-face not working in Firefox

【发布时间】：2012-11-07 22:07:55

【问题描述】：

我在下面有这个字体代码，它在谷歌浏览器中运行良好，但在 Firefox 中根本不起作用？为什么？

    <style type="text/css">
    @font-face 
    font-family: 'Lato';
    src: url('http://www.website.com/fonts/ca/Lato-Reg-webfont.eot');
    src: url('http://www.website.com/fonts/ca/Lato-Reg.ttf') format('truetype'),
         url('http://www.website.com/fonts/ca/Lato-Reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.website.com/fonts/ca/Lato-Reg-webfont.woff') format('woff'),
         url('http://www.website.com/fonts/ca/Lato-Reg-webfont.svg#LatoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

@font-face 
    font-family: 'LatoBold';
    src: url('http://www.website.com/fonts/ca/Lato-Bol-webfont.eot');
    src: url('http://www.website.com/fonts/ca/Lato-Bol.ttf') format('truetype'),
         url('http://www.website.com/fonts/ca/Lato-Bol-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.website.com/fonts/ca/Lato-Bol-webfont.woff') format('woff'),
         url('http://www.website.com/fonts/ca/Lato-Bol-webfont.svg#LatoBold') format('svg');
    font-weight: normal;
    font-style: normal;


nav ul li
    font-family: 'LatoBold', sans-serif !important;

    </style>

 <nav id="mainNav">
            <ul class="grid_0">
                            <li>
                        <a href="http://www.website.com">Home</a>
                        </li></ul>

【问题讨论】：

这应该可以帮助你***.com/questions/2856502/…

找不到字体文件，例如website.com/fonts/ca/Lato-Bol-webfont.woff 产生一个 html 响应。可能您拥有将其他代码提供给其他浏览器的魔法。 ☺

【参考方案1】：

您的字体链接似乎已损坏。如果我可以建议您，请使用google web fonts。有许多字体可用于您的网站，易于使用且免费。 Lato 的字体也在那里。

在这里查看我的演示：http://jsfiddle.net/ongisnade/Nx5VR/

下面的css规则

@font-face 
  font-family: 'LatoBold';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');

@font-face 
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');

是从google字体链接中提取的结果：

<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>

希望它的帮助:)