Html @font-face - 如何使其适用于所有浏览器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9654166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
@font-face - how to make it work on all browsers
提问by Karine
The @font-face rule is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
However, Internet Explorer 9 only supports .eot type fonts, while Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts.
Note: Internet Explorer 8 and earlier versions, do not support the @font-face rule.
Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 @font-face 规则。
但是，Internet Explorer 9 仅支持 .eot 类型字体，而 Firefox、Chrome、Safari 和 Opera 支持 .ttf 和 .otf 类型字体。
注意：Internet Explorer 8 及更早版本，不支持@font-face 规则。
This text is from here. So in order to have working @font-face for IE9 I should just specify EOT font file:
这篇文字来自这里。所以为了让@font-face 为 IE9 工作，我应该只指定 EOT 字体文件：
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}
Particularly I am using Myriad Pro, and I have OTF fonts. How I can convert them into EOT type?
特别是我使用的是 Myriad Pro，并且我有 OTF 字体。我如何将它们转换为 EOT 类型？
And regarding to IE7 and IE8 what trick/hack should be used to obtain the desired result?
关于 IE7 和 IE8，应该使用什么技巧/hack 来获得所需的结果？
采纳答案by Rich Bradshaw
Firstly, you don't have the copyright to embed most fonts - anyone can download them, so it's no different to putting the font on your server for someone to download.
首先，您没有嵌入大多数字体的版权 - 任何人都可以下载它们，因此将字体放在您的服务器上供某人下载并没有什么不同。
My advice would be to use the font squirrel tool found here: http://www.fontsquirrel.com/fontface/generatorto generate the files and the code for you.
我的建议是使用这里的字体松鼠工具：http: //www.fontsquirrel.com/fontface/generator为您生成文件和代码。
Be careful not to share fonts you don't have the rights to do so with.
请注意不要共享您无权使用的字体。
回答by Hymantheripper
I think this is almost fully cross-browser
我认为这几乎是完全跨浏览器的
@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 is the path on your server, and Name is the font's name
Location 是您服务器上的路径，Name 是字体的名称
回答by Behnam Mohammadi
@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');
}
The local() directive allows you to reference, load, and use locally installed fonts.
local() 指令允许您引用、加载和使用本地安装的字体。
The url() directive allows you to load external fonts, and are allowed to contain an optional format() hint
url() 指令允许您加载外部字体，并允许包含可选的 format() 提示
回答by Christoph
Hymantheripper already posted a good font-face,
Hymantheripper 已经发布了一个很好的字体，
i recommend you the following good articles on that topic:
我向您推荐以下关于该主题的好文章：
Personally, i use Google Web Fontsand am very satisfied with it. You have no troubles converting the fonts, embedding the right code, and worrying about copyright issues with a good variety of available fonts.
就我个人而言，我使用Google Web Fonts并且对它非常满意。您可以轻松地转换字体、嵌入正确的代码以及担心各种可用字体的版权问题。
