没有做过网页前端的人可能不知道，一个网页，在不同的系统，不同的浏览器下的显示效果有时可能是天差地别的！
照顾到各种系统，各种浏览器，各种访问环境，消除之间的不兼容，做到每个访客都能有一致的体验，是每一个前端工程师写前端代码过程中时时刻刻脑袋中盘旋的念头，同时也是这领域的一条铁令。
一般的兼容问题出在哪？
就我这两年来做前端的经验来看，其实也就是各浏览器对CSS属性的兼容程度不一样。当然有时候字体的问题也是使网页效果大相径庭的要素之一。
一个网页，一般只能显示电脑上已经有了的字体，不同的电脑上面装的字体一般是不一样的。例如已中文字体为例，XP时代系统自带宋体，Vista之后是默认微软雅黑。如果我们为网页设置字体为雅黑，那么XP用户访问的时候由于系统没有雅黑，所以会调用默认的宋体来显示，那这样就和我们的预期很不一样，效果也会大打折扣。
为了解决这个问题，一般前端工程师都会优先选用兼容性最好的字体，例如雅黑，我们称之为Web安全字体；然后针对宋体等字体进行细节优化。尽量让绝大部分访客能获得相对一致的体验。这一直以来都很折磨前端的伙伴。
我们现在要聊的是@font-face，CSS3中的一个模块，这是一个我们遗忘了好久的属性。他主要是把自己定义的Web字体嵌入到你的网页中，通过在线加载的方式，使访客在未安装字体的情况下也可以浏览到字体效果。
随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，很好的解决了上面提到的问题。之所以说被遗忘了好久，是因为虽然说是一个CSS3属性，但是全部浏览器从IE4的时代开始就已经支持了。只是可能是因为这个属性在当时带宽还很窄的年代实在很拖累网站的加载速度，基本上没人去用。久而久之，就被遗忘了。
我们来说说@font-face应该怎么来用
@font-face的语法规则：
|
1 2 3 4 5 6 |
@font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; } |
取值说明
1.YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:”YourWebFontName”;”
2.source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；
3.format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
4.weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。
兼容浏览器
浏览器对@font-face的兼容问题，涉及到一个字体format的问题。不同的浏览器对字体格式支持是不一致的，这样大家有必要了解一下，让心里有一个概念：
1.TureTpe(.ttf)格式：
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
2.OpenType(.otf)格式：
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
3.Web Open Font Format(.woff)格式：
.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
4.Embedded Open Type(.eot)格式：
.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；
5.SVG(.svg)格式：
.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。
为了让各多的浏览器支持，你也可以写成：
|
1 2 3 4 5 6 7 8 |
@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 */ } |
把定义好的字体应用到我们实际页面中去：
|
1 2 3 |
h1 { font-family: 'YourWebFontName' } |
获取@font-face所需字体格式：
我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。
要获取这些字体格式，我们同样是需要第三方工具或者软件来实现。
推荐大家使用fontsquirrel。
（上传的字体文件有大小限制）
至此，你已经可以根据你自己的需要为你的网页添加自定义字体了，不用担心只能使用那几个枯燥的Web安全字体了。
让你的网页变得更有个性吧！
PS.中文网站不建议使用@font-face，因为中文字体文件随便就上10M，对网站的加载的影响相当大！不像英文字体可以很快加载完成。
所以建议中文网站还是老老实实等带宽提上来吧。
参考资料
CSS3 @font-face – W3CPlus
本文链接地址: CSS3 实用属性 @font-face, 字体完美主义者的福音
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
如果您愿意为文章的内容或想法提供支持，欢迎点击下边的捐赠按钮，资助作者创作更多高价值高品质的内容。