Question

例如，我见过设计师做的事情如下：

@font-face {
  font-family: 'ProximaNovaRegular';
  src: url("<%= font_path('PrimaNova-Regular.otf') %>");
  src: url("<%= font_path('PrimaNova-Regular.otf') %>") format("opentype"),
  url("<%= font_path('proximanova-regular-webfont.woff') %>") format('woff'),
  url("<%= font_path('proximanova-regular-webfont.ttf') %>") format('truetype'),
  url("<%= font_path('proximanova-regular-webfont.svg#ProximaNovaRegular') %>") format('svg');
}

拥有多种不同格式的目的是什么？只需一个就够了吗？我正在使用@ font-face添加字体到我的应用程序，但是我只有.otf格式 - 这样可以吗？

Answer 1

不同类型用于跨浏览器兼容性。即使是类型的顺序对于某些浏览器也很重要。

结帐Bulletproof @font-face Syntax和How to use CSS @font-face。

要转换字体并使用正确的语法获取CSS文件，您可以使用Font Squirrel - Webfont generator。

Answer 2

在2010年代的浏览器中，

跨浏览器兼容性

Internet Explorer仅支持EOT

Mozilla浏览器支持OTF和TTF

Safari和Opera支持OTF，

TTF和SVG Chrome支持TTF和SVG。

来自http://sixrevisions.com/css/font-face-guide/

@ font-face，提供多种选择有什么意义？

2 个答案: