font-face 详解

asing1elife | |
版权声明：本文首发 http://asing1elife.com ，转发请注明出处，讲文明懂礼貌！

@font-face 是 CSS3 的一个模块，其主要作用是可将自定义字体嵌入到网页中，让网页字体的运用不只是限定在 Web 安全字体中

语法

  1. webFontName: 引入的自定义字体名称，将会为指定的元素添加 font-family: webFontName
  2. source: 字体路径
  3. format: 字体格式，用于帮助浏览器识别，truetype opentype truetype-aat embedded-opentype svg …
  4. weight: 字体是否粗体
  5. style: 字体样式
1
2
3
4
5
6
@font-face {
	font-family: <webFontName>;
	src: <source> [<format>][,<source> [<format>]]*;
	[font-weight: <weight>];
	[font-style: <style>];
}

格式

  1. truetype - ttf
    • Windows 和 Mac 最常见字体
    • RAW 格式，不为任何网站优化
    • IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile Safari4.2+
  2. opentype - otf
    • 原始字体格式，内置在 truetype 基础之上
    • 提供更多功能
    • Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile Safari4.2+
  3. web-open-font-format - woff
    • Web 字体最佳格式
    • 是一个开放的 truetype、opentype 压缩版本
    • 支持元数据包的分离
    • IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+
  4. embedded-opentype - eot
    • IE 专用字体
    • 可以从 truetype 创建此格式
    • IE4+
  5. svg - svg
    • 基于 svg 渲染
    • Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+
1
2
3
4
5
6
7
8
@font-face {
	font-family: 'webFontName';
	src: url('webFontName.eot'); /* IE9 Compat Modes */
	src: url('webFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webFontName.woff') format('woff'), /* Modern Browsers */
		 url('webFontName.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('webFontName.svg#webFontName') format('svg'); /* Legacy iOS */
}

使用

  1. 获取自定义字体的原始文件，可前往 DaFont 下载
  2. 在 Font Squirrel 将字体转换为兼容各浏览器的 Web 字体
  3. 按上述兼容性语法指定 @font-face 中的字体
  4. 在指定元素中调用该自定义字体