页面使用自定义字体

1. Font-family

网页上能使用的字体，限制在浏览器所在PC已经安装的几款字体。Windows操作系统，中文字体：

• 黑体：SimHei
• 宋体：SimSun
• 新宋体：NSimSun
• 仿宋：FangSong
• 楷体：KaiTi
• 仿宋GB2312：FangSongGB2312
• 楷体GB2312：KaiTiGB2312
• 微软雅黑：Microsoft YaHei

OS X操作系统，中文字体：

• 冬青黑体: Hiragino Sans GB
• 华文细黑：STXihei
• 华文黑体：STHeiti
• 华文楷体：STKaiti
• 华文宋体：STSong
• 华文仿宋：STFangsong

这样会引出一个问题：如何让页面呈现可预期的字体？font-family 通过指定多种字体，提供这样的功能。优先使用排在前面的字体，当找不到前面的字体时，使用下一个字体。下面的 CSS 指定了在 Windows 下显示微软雅黑，在 OS X 上显示华文细黑字体。

1

font-family:"Microsoft YaHei", STXihei

为了保证兼容性，在 font-family 中，通常同时写入英文和中文名，例如：font-family：“Microsoft YaHei” , “微软雅黑” , STXihei，“华文细黑”。

2. Font-face

@font-face 语句是 css 中的一个功能模块，用于实现网页字体多样性。设计者可随意指定字体，不需要考虑浏览器 PC 上是否安装该字体。缺点是，字体文件的体积可能非常的大，而且需要额外的HTTP连接，这些都会降低网站页面的加载速度。

2.1 语法规则

语法规则：

1
2
3
4
5
6

@font-face {
      font-family: <YourDefineFontName>;
      src: <url> [<format>],[<source> [<format>]], *;
      [font-weight: <weight>];
      [font-style: <style>];
} 

示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/* 引入字体 */
@font-face {
    font-family: 'defineName';
    src: url('../fonts/singlemalta-webfont.eot');
    src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/singlemalta-webfont.woff') format('woff'),
         url('../fonts/singlemalta-webfont.ttf') format('truetype'),
         url('../fonts/singlemalta-webfont.svg#defineName') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* 使用字体 */
body {
    font-family: defineName;
}

需要注意的是，src资源有两种写法：

• 一种是相对路径，../font/abc.ttf
• 一种是绝对路径，//font.abc.com/static/abc.ttf

2.2 兼容性

• IE6-8，仅支持 Embedded-OpenType（.eot）
• firefox3.5，支持 TrueType（.ttf）、OpenType（.otf）
• firefox3.6，支持 TrueType（.ttf）、OpenType（.otf）、WOFF（.woff）
• chrome，支持 TrueType（.ttf）、OpenType（.otf）、WOFF（.woff）、SVG（.svg）
• safari，支持 TrueType（.ttf）、OpenType（.otf）、WOFF（.woff）、SVG（.svg）
• opera，支持 TrueType（.ttf）、OpenType（.otf）、WOFF（.woff）、SVG（.svg）

2.3 示例

Bola-Ocho-ffp.ttfgo3v2.ttf@font-face{font-family:font1;src:url(/libs/font/Bola-Ocho-ffp.ttf)format('woff');font-weight:400;font-style:normal}@font-face{font-family:font2;src:url(/libs/font/go3v2.ttf)format('woff');font-weight:400;font-style:normal}.class1{font-family:font1;font-size:72px}.class2{font-family:font2;font-size:72px}

3. 网络字体文件格式

目前最主要的几种网络字体(web font)格式包括WOFF，SVG，EOT，OTF/TTF。

• WOFF，Web Open Font Format

这种字体格式专门用于网上，由Mozilla联合其它几大组织共同开发。WOFF字体通常比其它字体加载的要快些，因为使用了OpenType (OTF)和TrueType (TTF)字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。这种字体格式有君临天下的趋势，因为所有的现代浏览器都开始支持这种字体格式。

• SVG / SVGZ，Scalable Vector Graphics (Font)

SVG是一种用矢量图格式改进的字体格式，体积上比矢量图更小，适合在手机设备上使用。只有iPhone上的Safari(4.1)之前的版本支持它。目前火狐、IE都不支持SVG字体格式。火狐推迟对SVG字体的支持，重点放在WOFF格式上。SVGZ是压缩版的SVG。

• EOT，Embedded Open Type

EOT是嵌入式字体，是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染，存储在临时安装文件夹下。

• TTF， TrueType Font

Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

• OTF，OpenType，Font

OpenType是微软和Adobe共同开发的字体，微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。

4. 字体下载

• Google fonts
• Dafont
• Typekit
• dafont

还有一个小工具，以 Base64 的方式将字体文件嵌入 CSS 文件中。

5. 自动载入使用的字体

5.1 Web Font Loader 简介

webfontloader项目由 Google 和 Typekit 共同开发，提供 Google 和 Typekit 的字体加载功能。使用 Google 的字体网络不能自由访问，Typekit 的字体需要收费。webfontloader提供 6 个回调方法：

1
2
3
4
5
6
7
8

WebFontConfig = {
  loading: function() {}, // loading：在所有字体开始加载时触发
  active: function() {}, // active：在所有字体已渲染时触发
  inactive: function() {}, // inactive：字体预加载失败，无效字体或浏览器不支持加载
  fontloading: function(familyName, fvd) {}, // fontloading：指定字体预加载
  fontactive: function(familyName, fvd) {}, // fontactive：指定字体已渲染
  fontinactive: function(familyName, fvd) {} //// fontinactive：指定字体预加载失败
};

5.2 Web Font Loader 使用

官方提供的实例：

1
2
3
4
5
6
7
8

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif'],
    }
  });
</script>

当然还有其他配置，timeout 超时，urls 自定义样式等。

6. 参考

• Webfontloader