@font-face 在 Firefox 中不起作用 [重复]

Posted 2023-03-06

【中文标题】@font-face 在 Firefox 中不起作用 [重复]

【英文标题】：@font-face doesn't work in Firefox [duplicate]

【发布时间】：2011-10-20 14:59:25

【问题描述】：

可能重复：css @font-face not working with Firefox, but working with Chrome and IE

我有一个小问题，似乎无法弄清楚解决方案是什么。

我使用Museo 作为网络字体。在Safari 中，一切都像魅力一样，但在Firefox 中，它不起作用。 有人知道为什么吗？

@font-face font-family: 'MuseoSans-500';
src: url('webfonts/eot/style_159303.eot');
src: url('webfonts/eot/style_159303.eot?#iefix') format('embedded-opentype'),
url('webfonts/woff/style_159303.woff') format('woff'),
url('webfonts/ttf/style_159303.ttf') format('truetype'),
url('webfonts/svg/style_159303.svg#MuseoSans-500') format('svg');

【问题讨论】：

你已经看过这个了吗？ ***.com/questions/2856502/…

如果没有看到您的实际页面，很难说任何有用的东西。您的 CSS 是否在 @media 规则中？字体文件是否被巧妙地破坏以致 Firefox 中的 OpenType 清理程序拒绝它？

【参考方案1】：

我不确定您的@font-face 设置到底出了什么问题，但我已经让Museo 使用@font-face 在FireFox 中工作。我建议使用 Font Squirrel's @font-face generator 生成 CSS 声明和不同的字体文件，它会自动为所有主流浏览器设置所有内容。

【参考方案2】：

如果你不能让它工作并且字体不必完全相同相同，也许你应该看看Google font API。只需从list 中选择一种字体（'Ovo' 或 'Forum' 看起来与您的很相似），将其导入到您的网站中

<link rel="stylesheet" 
      type="text/css" 
      href="http://fonts.googleapis.com/css?family=Font+Name">

...然后将其用作 CSS 中的常规字体：

body 
  font-family: 'Font Name', Verdana;

它最棒的地方在于它非常简单：它甚至可以在 IE6 上运行。