浅谈@font-face

@font-face功能

制作网站难免有些字体不是默认的，通过@font-face可以加载自己特定的字体，来实现特定的文字效果。
@font-face语句是css中的一个功能模块，用于实现网页字体多样性(设计者可随意指定字体，不需要考虑浏览者电脑上是否安装)。主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，@font-face 不能说他是什么新东西了，在 CSS2.0 规范中就有了这玩意儿，IE4.0 开始就已经出现，只是当时用的不是特别广泛，后来在 CSS2.1 草案中又被删掉。随着 web 的急速发展，@font-face 价值越来越凸显，然后再次被纳入 CSS3 草案中。@font-face规则 是为了解决由于浏览者系统中没有安装字体导致不能显示的问题。

@font-face用途

1.字体文件名简写

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

h1{font-family:YT;}

提示：
a.src属性定义字体的下载地址，local表示本机地址，url表示网址（比如使用服务器上下载的字体）
b.如果在src上定义了多种字体，他们也是候选关系，如上段代码
c.如果修改了src中定义的字体或者顺序，一定要关闭浏览器再打开才能看到修改后的效果，刷新是看不到的。
d.在@font-face规则中。font-family的作用是声明字体变量，与普通选择器中的font-family是不一样的。

 

2.使用服务端字体

在@font-face规则中，如果src属性定义的字体是一个url路径，则网页加载时会自动从服务器下载字体文件，再显示出来。

@font-face {
    font-family: 'FZCYS';
    src: local('FZYaSongA-B-GB');
    src: url('YourWebFontName.eot');
}

@font-face浏览器兼容

由于每种浏览器对@font-face的兼容性不同，不同的浏览器对字体的支持格式不同，这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。.TTF或.OTF，适用于Firefox 3.5、Safari、Opera；.EOT，适用于Internet Explorer 4.0+；.SVG，适用于Chrome、IPhone， 获取要使用字体的三种文件格式，确保能在主流浏览器中都能正常显示该字体。

使用CSS3的@font-face属性可以实现在网页中嵌入任意字体，但是IE只支持微软自有的EOT格式字体，而其他浏览器都不支持这一字体格式，其它浏览器可以设置TTF(TrueType)和OTF(OpenType)两种字体作为自定义字体

下面要解决的是如何获取到某种字体的这三种格式文件。一般地，我们在手头上（或在设计资源站点已经找到）有该字体的某种格式文件，最常见的是.TTF 文件，我们需要通过这种文件格式转换为其余两种文件格式。字体文件格式的转换可以通过网站FontsQuirrel（http://www.fontsquirrel.com/tools/webfont-generator）或 onlinefontconverter提供的在线字体转换服务获取。获取到三种格式的字体文件后，下一步要在样式表中声明该字体，并在需要的地方使用该字体。

@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 */
}