@font-face - 如何让它在所有浏览器上工作

Question

Internet Explorer 9、Firefox、 Opera、Chrome 和 Safari。

但是，Internet Explorer 9 仅支持 .eot 类型的字体，而 Firefox、Chrome、Safari 和 Opera 支持 .ttf 和 .otf 类型的字体。

注意：Internet Explorer 8 及更早版本，不支持 @font-face 规则。

此文本来自here。所以为了让@font-face 能在 IE9 上工作，我应该只指定 EOT 字体文件：

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}

特别是我正在使用 Myriad Pro，而且我有 OTF 字体。如何将它们转换为 EOT 类型？

关于 IE7 和 IE8 应该使用什么技巧/hack 来获得所需的结果？

Answer 1

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'), 
       url('/fonts/awesome.woff') format('woff'),
       url('/fonts/awesome.ttf') format('truetype'),
       url('/fonts/awesome.eot') format('embedded-opentype');
}

local() 指令允许您引用、加载和使用本地安装的字体。

url() 指令允许您加载外部字体，并允许包含可选的 format() 提示

Answer 2

Jacktheripper 已经发布了一个不错的字体，

我向您推荐以下关于该主题的好文章：

Article from Paul Irish

Article from fontspring

就个人而言，我使用Google Web Fonts 并且对此非常满意。您可以轻松转换字体、嵌入正确的代码以及担心各种可用字体的版权问题。

Answer 3

我认为这几乎是完全跨浏览器的

@font-face {
    font-family: 'Name';
    src: url('location.eot');
    src: url('location.eot#iefix') format('embedded-opentype'),
         url('location.woff') format('woff'),
         url('location.ttf') format('truetype'),
         url('location.svg#Name') format('svg');
    font-weight: normal;
    font-style: normal;
}

Location 是您服务器上的路径，Name 是字体的名称

Answer 4

首先，您没有嵌入大多数字体的版权 - 任何人都可以下载它们，因此将字体放在您的服务器上供他人下载没有什么不同。

我的建议是使用此处的字体松鼠工具：http://www.fontsquirrel.com/fontface/generator 为您生成文件和代码。

注意不要共享您无权共享的字体。