@font-face 仅在 chrome 中无法在 ff/opera 中使用
Posted
技术标签:
【中文标题】@font-face 仅在 chrome 中无法在 ff/opera 中使用【英文标题】：@font-face doesn't work in ff/opera just in chrome 【发布时间】：2014-03-23 17:33:35 【问题描述】：好吧，我对 font-face 元素有疑问。它在 chrome 中运行良好，但不适用于任何浏览器。问题是什么？提前致谢。
演示 -> http://codepen.io/designhorf/pen/AlJKp
【问题讨论】：
尝试在fontsquirrel generator上生成一些sn-ps，比较一下就知道了 这个网址designhorf.com/font/Nexa_Bold.otf，不起作用。 看看这个：***.com/questions/14287465/font-face-not-loaded/… 【参考方案1】：您需要的不仅仅是 otf 文件。不同的浏览器需要不同的文件类型，而 IE 和往常一样不正常。
@font-face
font-family: 'YourFont';
src: url('../fonts/YourFont.eot');
src: url('../fonts/YourFont.eot?#iefix') format('embedded-opentype'),
url('../fonts/YourFont.woff') format('woff'),
url('../fonts/YourFont.ttf') format('truetype'),
url('../fonts/YourFont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
生成代码和文件的绝佳资源是 http://www.fontsquirrel.com/tools/webfont-generator
玩得开心！
【讨论】：
如果您的目标是 IE9 及更高版本，那么只有 .otf 和 .woff 实际上就足够了。不需要 ttf、eot 和 svg（实际上，svg 和 eot 非常不受欢迎。第一个仅适用于 IE8 及以下版本，后者巨大且渲染非常可怕）。以 [otf, woff] 顺序加载将适用于 FF、Chrome、Opera、IE9+ 和 android 4.4+，以及 Android 4 上的 FF/Chrome。*以上是关于@font-face 仅在 chrome 中无法在 ff/opera 中使用的主要内容，如果未能解决你的问题，请参考以下文章
使用@font-face 将文本绘制到 <canvas> 第一次不起作用