@font-face语法
web font技术需要通过CSS的 @font-face 语句引入在线字体。所以这里我先说一下@font-face的相关内容。
@font-css是CSS3中的一个模块，通过它可以将自定义的字体嵌入到前端网页中。随着@font-face的出现，标识着我们在web开发的过程中可以使用除了web安全字体之外的自定义字体，使页面的展现更加多样化。
值得一提的是，@font-face这个CSS3模块早在IE4中就已经被支持了。有点意外。
我们先来看看@font-face的语法，
@font-face { font-family: <your-webfont-name>; src: <source> <format> [, <source> <format>]; [font-weight: <weight>;] [font-style: <style>;] }
值得注意的有两点，一个是 font-family 属性，一个是 src 属性。前者是自定义webfont的名字，后者是引用字体的路径。其中 src 中 <format> 字段是用来标识字体格式帮助浏览器识别。常见字体格式及format如下图，
format说明，
而浏览器对各字体格式的支持如下，
说了这么多的理论，下面让我们来一段具体的CSS代码，了解下这个@font-face到底是如何定义的。
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?'); /* 兼容IE9以上 */
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), /*兼容IE8以下*/
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
}
这样我们自定义的web font就成功了。然后就可以在页面中正常使用了。比如，
div.title {
font-family: 'icomoon'
}
如果不出任何的意外的话，你将会得到自定义的字体效果。
自定义字体
说到这里，如果大家自己动手实验一番的话，就会发现一个致命问题： 我去哪里获得这些自定义字体啊？
目前有三种途径来获取这些字体，
- 去免费的网站下载字体
- 去收费的网站购买字体使用授权
- 有设计背景，自己设计字体
针对前两种方式没什么好说的，针对第三种方案，可能相关门槛就高了一点，需要一些设计背景。如果有兴趣，可以参阅 这篇文章 。
文章源自 设计联盟 www.DesignLinks.cn 中国最具影响力的创意设计综合网站
