@font-face，提供多个选项有什么意义？答案

【问题标题】：@font-face, what is the point of providing multiple options?@font-face，提供多个选项有什么意义？
【发布时间】：2014-02-28 14:26:53
【问题描述】：

例如，我见过设计师这样做：

@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 格式 - 可以吗？

【问题讨论】：

标签： ruby-on-rails html css ruby-on-rails-4

【解决方案1】：

不同的类型是为了跨浏览器的兼容性。对于某些浏览器，甚至类型的顺序也很重要。

查看Bulletproof @font-face Syntax 和How to use CSS @font-face。

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

【讨论】：

【解决方案2】：

在 2010 年的浏览器中，

跨浏览器兼容性

Internet Explorer 仅支持 EOT

Mozilla 浏览器支持 OTF 和 TTF

Safari 和 Opera 支持 OTF，

TTF 和 SVG Chrome 支持 TTF 和 SVG。

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

【讨论】：