@font-face MDN 资料
@font-face 用法的参考博客
WebFont 技术的参考博客
开源项目 webfontloader
开源项目 字蛛（中文字体压缩器）
中文字体网页开发指南 - 阮一峰
@font-face 兼容性，如何用 @import 或 link 标签引入字体，各种字体格式详解
科大博客提供 Google Fonts 加速
360网站卫士常用前端公共库CDN服务（含 Google 字体）
1. WebFont 技术
通过 WebFont 技术，网页可以使用在线字体（比如 Google 推出的免费 WebFont 云托管服务），无需使用图片，减少流量消耗。在线字体无需用户安装在终端设备上。
专用于 Web 展示的 woff 格式字体也得到各大浏览器厂商支持，减少了字体的体积。
WebFont 仍然是文字，相比使用图片，具有很多优点：支持选中、复制，支持 Ctrl+F 查找，搜索引擎友好等。
中文问题
汉字有数万个，导致中文字体文件有好几 MB 大小，实际项目中无法使用。
中文字体有两种解决方案：制作精简版字体（繁琐，修改麻烦，效率低下且容易出错）或使用字体云服务（压缩与转码字体）。国内目前有两家公司提供：
http://www.youziku.com （有字库）
http://cn.justfont.com （就是字）
字蛛
字蛛是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩。
2. 用法
通过 CSS 的 @font-face 语句可以引入在线字体，使用 CSS 选择器指定运用字体的文本。
/* icomoon 字体图标库的示例 */ @font-face { font-family: 'icomoon'; src:url('../fonts/icomoon.eot?efsk18'); src:url('../fonts/icomoon.eot?#iefixefsk18') format('embedded-opentype'), url('../fonts/icomoon.woff?efsk18') format('woff'), url('../fonts/icomoon.ttf?efsk18') format('truetype'), url('../fonts/icomoon.svg?efsk18#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-list:before { content: "e600"; }
1234567891011121314151617181920212223242526272829/* MDN 示例 */ <html> <head> <title>Web Font Sample</title> <style type="text/css" media="screen, print"> @font-face { font-family: "Bitstream Vera Serif Bold"; src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf"); } body { font-family: "Bitstream Vera Serif Bold", serif } </style> </head> <body> This is Bitstream Vera Serif Bold. </body> </html>
1234567891011121314151617
