CSS3 @font-face介绍

介绍

@font-face语句是css中的一个功能模块，用于实现网页字体多样性(设计者可随意指定字体，不需要考虑浏览者电脑上是否安装)，主要是把自己定义的Web字体嵌入到你的网页中。

语法

@font-face {
	font-properties
}

字体描述	值	说明
font-family	name	必需的。定义字体的名称。
src	URL	必需的。定义该字体下载的网址
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义该字体应该如何被拉长。默认值是"正常"(normal)
font-style	normal italic oblique	可选。定义该字体应该是怎样样式。默认值是"正常"(normal)
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可选。定义字体的粗细。默认值是"正常"(normal)
unicode-range	unicode-range	可选。定义该字体支持Unicode字符的范围。默认值是"ü+0-10 FFFF"

示例

@font-face {
　　font-family: 'YT';   /*声明一个名为YT的字体名称变量*/
　　src: local('YourFontName.eot'), url('YourWebFontName.eot');
}
然后在任何需要使用YT字体的地方就可以直接使用以下：
h1{font-family:YT;}

• src 指定一个用于显示文本的自定义字体；字体能从用户本地安装的字体加载或者远程服务器. 如果提供了local()函数，从用户本地查找指定的字体名称，并且找到了一个匹配项, 本地字体就会被使用. 否则, 字体就会使用url()函数下载的资源。
• 如果在src上定义了多种字体，他们也是候选关系。
• 如果修改了src中定义的字体或者顺序，一定要关闭浏览器再打开才能看到修改后的效果，刷新是看不到的。
• 在@font-face规则中。font-family的作用是声明字体变量，与普通选择器中的font-family是不一样的。

浏览器支持

Internet Explorer 8 及更早IE版本不支持@font-face 规则。

IE8+只支持微软自有的EOT格式字体，而其他浏览器都不支持这一字体格式，其它浏览器可以设置TTF(TrueType)和OTF(OpenType)两种字体作为自定义字体

这就意味着在@font-face中我们至少需要两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。

.TTF或.OTF，适用于Firefox 3.5、Safari、Opera；
.EOT，适用于Internet Explorer 4.0+；
.SVG，适用于Chrome、IPhone

字体文件格式转换

获取要使用字体的三种文件格式，确保能在主流浏览器中都能正常显示该字体。

下面要解决的是如何获取到某种字体的这三种格式文件。一般地，我们在手头上（或在设计资源站点已经找到）有该字体的某种格式文件，最常见的是.TTF 文件，我们需要通过这种文件格式转换为其余两种文件格式。字体文件格式的转换可以通过第三方网站处理。

Transfonter
Simple Online Font Converter
FontsQuirrel
Font Converter Tools
Everything Fonts
Online font converter
Convertio.co

获取到三种格式的字体文件后，下一步要在样式表中声明该字体，并在需要的地方使用该字体。

@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
         url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}

注意

• 这里使用的Web fonts 仍然受到同域限制 (字体文件必须和调用它的网页同一域), 但可以使用 HTTP access controls 解除这一限制。
• 你不能在一个 CSS 选择器中定义 @font-face 。例如，这样写是无效的：

.className { 
  @font-face { 
    font-family: MyHelvetica; 
    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
        url(MgOpenModernaBold.ttf);
    font-weight: bold; 
  } 
}