@ font-face失败的原因是什么？

我有一个简单的例子，在那里为某种原因定义@字体面将只能用于铬，未能在火狐，Safari工作和IE：@ font-face失败的原因是什么？

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'; 
}

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

将不胜感激任何意见！

来源

2016-12-14 Anelook

你最有可能混淆一个字型有字体家族：

“龙力三世统一” 是一个字体家族
“Lucida的粗斜体” is a font face

总之，一个字体家族是一组字体。

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

src：local（'Lucida Sans Unicode'），local（'Times New Roman'）;

这两家字体系列被用作字型的src。

据推测，Chrome处理这个容易犯的错误，并且只要发现这种情况，就会使用来自家庭的'正常'字体。

所以，你大概意思是这样的：

@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的字体，你会看到你的自定义字体脸上显示出来，这样简单例如：

<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.

来源

2016-12-14 15:29:32

也许你也会有与此相关的问题http://stackoverflow.com/questions/41147727/ho思路瓦特到附加字体重属性-内部-A-字体定义换的-回退的字体 – Anelook

-1

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

来源

2016-12-14 15:09:29 ArietM

@ font-face失败的原因是什么？

回答

相关问题