@font-face 是 CSS3 的一个模块,其主要作用是可将自定义字体嵌入到网页中,让网页字体的运用不只是限定在 Web 安全字体中
语法
- webFontName: 引入的自定义字体名称,将会为指定的元素添加
font-family: webFontName
- source: 字体路径
- format: 字体格式,用于帮助浏览器识别,truetype opentype truetype-aat embedded-opentype svg …
- weight: 字体是否粗体
- style: 字体样式
1 |
|
格式
- truetype - ttf
- Windows 和 Mac 最常见字体
- RAW 格式,不为任何网站优化
- IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile Safari4.2+
- opentype - otf
- 原始字体格式,内置在 truetype 基础之上
- 提供更多功能
- Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile Safari4.2+
- web-open-font-format - woff
- Web 字体最佳格式
- 是一个开放的 truetype、opentype 压缩版本
- 支持元数据包的分离
- IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+
- embedded-opentype - eot
- IE 专用字体
- 可以从 truetype 创建此格式
- IE4+
- svg - svg
- 基于 svg 渲染
- Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+
1 |
|
使用
- 获取自定义字体的原始文件,可前往 DaFont 下载
- 在 Font Squirrel 将字体转换为兼容各浏览器的 Web 字体
- 按上述兼容性语法指定 @font-face 中的字体
- 在指定元素中调用该自定义字体