通常情况下，在实际Web页面开发中我们往往只能使用计算机已经安装好的字体比如黑体、宋体、雅黑等等，那如果遇到特殊字体该怎么办呢？有人说用图片替代，这个只能针对特殊场景的局部使用，实乃下下之策。

例如：一个注册页面的“注册会员”几个字

CSS3引入的@font-face 这一属性可以很好的解决这个问题，可以帮助我们非常灵活的使用一些特殊的字体，即使用户电脑里面没有安装这个字体，网页也可以显示。当然，同其他属性一样，IE8及以下浏览器不支持@font-face

基本语法：

@font-face { 
font-family: <family-name>;  <自定义一个字体的名称>
src: url(sansation_light.woff);  <下载好的字体，在电脑中保存的路径>
[ font-variant: <font-variant>; ]
[ font-stretch: <font-stretch>; ] 
[ font-weight: <weight>; ] 
[ font-style: <style>; ]
}
[... : ...] 方括号部分的属性表示可选 

比如：

@font-face {

  font-family: ‘fangzheng‘;

  src: url(‘../font/fangzheng.eot‘); /*IE9+*/

  src: url(‘../font/fangzheng.woff2‘) format(‘woff2‘),

        url(‘../font/fangzheng.ttf‘) format(‘truetype‘),

url(‘../font/fangzheng.eot?#iefix‘) format(‘embedded-opentype‘); /*IE6 - IE8*/

  font-weight: normal;

  font-style: normal;

}

.modal-content h3{

    text-align:center;

    font-family:fangzheng;

    font-size:30px;

    color:#333F55;

}

测试效果：Chrome，Firefox，IE7-IE11均可以实现

这里有一个专门用于@font-size的字体网站  http://www.fontsquirrel.com/fontface/generator 

fontsquirrel 网站提供了一个免费的 @font-face Kit Generator工具，可以生成不同的字体格式，并且直接用css和html给出demo。使你可以直接引用到你的网站上。你可以直接使用 fontsquirrel 网站提供 的一些字体，也可以上传你自己的字体还是用。 

这里有一篇非常详细的博文，可供学习，同时感谢博主 http://www.w3cplus.com/content/css3-font-face

本文出自 “dapengtalk” 博客，请务必保留此出处http://dapengtalk.blog.51cto.com/11549574/1854181

@font-size 自定义网页字体