【问题标题】:@font-face doesn't work in ff/opera just in chrome@font-face 仅在 chrome 中无法在 ff/opera 中使用
【发布时间】:2014-03-23 17:33:35
【问题描述】:

好吧,我对 font-face 元素有疑问。它在 chrome 中运行良好,但不适用于任何浏览器。问题是什么?提前致谢。

演示 -> http://codepen.io/designhorf/pen/AlJKp

【问题讨论】:

标签: html css fonts font-face opentype


【解决方案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。*
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2012-08-26
  • 2013-03-03
  • 2012-11-08
  • 2011-12-17
  • 2016-11-30
  • 1970-01-01
  • 2014-05-19
相关资源
最近更新 更多