font-face 在 IE 中运行，但在 Firefox 中不运行 - 字体格式

Posted 2023-03-15

【中文标题】font-face 在 IE 中运行，但在 Firefox 中不运行 - 字体格式

【英文标题】：font-face runs in IE but not in firefox - formats of fonts

【发布时间】：2014-11-29 21:45:10

【问题描述】：

我下载了常规和粗体两种字体的免费字体。并使用以下格式：svg、eot、ttf、woff。这些字体在 IE 上运行良好。但它们在 Firefox 中不起作用。 1. 我想知道哪种浏览器使用哪种格式。 2. 请帮我解决这个问题：

@font-face 
   font-family: "Nazanin";
   src: url("../font/nazanin.eot");  
   src: local("B Nazanin"),
     url("../font/nazanin.eot?#iefix") format('embedded-opentype'),
     url("../font/nazanin.woff") format("woff"),
     url("../font/nazanin.ttf") format("truetype"),
     url('../font/nazanin.svg') format('svg');
   font-weight: normal;
   font-style: normal;

@font-face 
   font-family: "Nazanin";
   src: url("../font/nazaninbold.eot");
   src: local("B Nazanin bold"),
     url("../font/nazaninbold.eot?#iefix") format('embedded-opentype'),
     url("../font/nazaninbold.woff") format("woff"),
     url("../font/nazaninbold.ttf") format("truetype"),
     url('../font/nazaninbold.svg') format('svg');
   font-weight: bold;
   font-style: normal;

顺便说一句。我知道字体文件可以正常工作。

【问题讨论】：

css-tricks.com/snippets/css/using-font-face

【参考方案1】：

所以你已经正确地声明了你的字体。您需要一个类才能在您的站点中使用它。所以你的 css 文件应该是这样的：

mycustomfont 
    font-family: 'Nazanin';
    font-style: normal;\* or bold whatever you need *\
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

然后在 html 中：

<div class="mycustomfont">Testing font</div>

希望这能给你一个想法......

【讨论】：

我的问题当时自己解决了。但是您为更好地渲染而编写的代码各不相同。谢谢:)