介绍
@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;
}
}