Question

我有一个简单的例子，出于某种原因， @ font-face 的定义仅适用于 Chrome ，并且无法在 FireFox，Safari和IE ：

HTML：

Utils

CSS：

<body>
  <div class="original-font">
    This is the original font
  </div>
  <div class="bold-font">
    This should be bold! But it is not in IE, Safari and FireFox
  </div>
</body>

根据规范（https://developer.mozilla.org/en/docs/Web/CSS/@font-face），现代浏览器应该支持它。这就是为什么，我怀疑css定义中缺少某些东西。

对任何建议都会感激不尽！

Answer 1

您很可能会将字体与字体系列混淆：

＆＃34; Lucida Sans Unicode＆＃34;是一个字体系列
＆＃34; Lucida Bold Italic＆＃34;是一个字体

简而言之，字体系列是一组字体。

@ font-face声明加入某个自定义系列的字体。 src是字体外观文件的路径，可能出现问题：

src：local（＆＃39; Lucida Sans Unicode＆＃39;），本地（＆＃39; Times New Roman＆＃39;）;

这两个字体系列用作 font face 的src。

据推测，Chrome可以处理这个容易犯的错误并使用正常的＆＃39;每当发现这种情况时，就会从家庭中看到字体。

所以，你的意思是：

@font-face {
  font-family: 'MyBoldFont';
  font-style: italic;
  font-weight: bold;
  src: local('Lucida Bold Italic'), local('Times New Roman Bold Italic');
}

.bold-font {
    font-family: 'MyBoldFont';
}

每当文字为粗体，斜体和使用.bold-font时，您就会看到自定义字体显示，就像这个简单的例子：

<b><i class='bold-font'>Hello! I'll be Lucida/TNR</i></b> and this will be something else.

Here it is as a fiddle.

Answer 2

@font-face {
   font-family: myFirstFont;
   src: url(font.woff);
}

@ font-face无法正常工作的原因是什么？

2 个答案: