什么可能是@ font-face失败的原因？ [英] What can be the reason for @font-face failing to work?
问题描述
我有一个简单的例子，由于某些原因， @ font-face 的定义仅适用于 Chrome ，并且无法在 FireFox，Safari和IE ：
$ C><身体GT;
< div class =original-font>
这是原始字体
< / div>
< div class =bold-font>
这应该是大胆的！但它不在IE，Safari和FireFox中
< / div>
< / body>
CSS：
@ font-face {
font-family：'Lucida Bold Italic';
font-style：italic;
font-weight：bold;
src：local（'Lucida Sans Unicode'），local（'Times New Roman'）;
}
.original-font {
font-family：'Lucida Sans Unicode';
}
.bold-font {
font-family：'Lucida Bold Italic';
根据规范（ https://developer.mozilla.org/en/docs/Web/CSS/@font-face ）它应该支持现代浏览器。这就是为什么，我怀疑css定义中缺少一些东西。
感谢任何建议！
您很可能会将字体与字体系列混淆：
- Lucida Sans Unicode是字体系列
- Lucida Bold Italic是字体
总之，一个字体系列是一组字体。
@ font-face声明加入某个自定义系列的字体。 src 是字体文件的路径，这可能是问题所在：
'src：local（'Lucida Sans Unicode'），local（'Times New Roman'）;
这是两个 font family 被用作字体的
据推测，Chrome处理这个容易犯的错误， 'b
$ b
所以，你可能意思是这样的：
@ 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'>您好！我将成为Lucida / TNR< / i>< / b>这将是别的东西。 b
$ b >这里是一个小提琴。
I have a simple example, where for some reason definition of @font-face will work only for Chrome and fails to work in FireFox, Safari and IE:
https://jsfiddle.net/d8e6xz7e/1/
HTML:
<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>
CSS:
@font-face {
font-family: 'Lucida Bold Italic';
font-style: italic;
font-weight: bold;
src: local('Lucida Sans Unicode'), local('Times New Roman');
}
.original-font {
font-family: 'Lucida Sans Unicode';
}
.bold-font {
font-family: 'Lucida Bold Italic';
}
According to the specification (https://developer.mozilla.org/en/docs/Web/CSS/@font-face) it should be supported for the modern browsers. That is why, I suspect that there is something missing in the css definition.
Would be grateful for any advice!
解决方案 You're most likely confusing a font face with a font family:
- "Lucida Sans Unicode" is a font family
- "Lucida Bold Italic" is a font face
In short, a font family is a group of font faces.
@font-face declares a font face joining some custom family. src is the path to a font face file, and that is likely where the problem is:
src: local('Lucida Sans Unicode'), local('Times New Roman');
That's two font families being used as the src of a font face.
Presumably Chrome handles this easily made mistake and uses the 'normal' font face from the family whenever it spots that this has happened.
So, what you probably meant was this:
@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';
}
Whenever the text is bold, italic and uses .bold-font, you'll see your custom font face show up, like this simple example:
<b><i class='bold-font'>Hello! I'll be Lucida/TNR</i></b> and this will be something else.
这篇关于什么可能是@ font-face失败的原因？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
