CSS3 @font-face (webfont)

先大概介绍下计算机领域常见的字体类型与格式。

点阵字体（Bitmap Font）
点阵字体也叫位图字体，其中每个字形都以一组二维像素信息表示。这种文字显示方式于较早前的电脑系统（例如未有图形接口时的 DOS 操作系统）被普遍采用。由于位图的缘故，点阵字体很难进行缩放，特定的点阵字体只能清晰地显示在相应的字号下，否则文字只被强行放大而有损字形，产生成马赛克式的锯齿边缘。但对于字号 8-14px 的尺寸较小的汉字字体（即现今操作系统大多采用的默认字号）现今亦仍然被使用于荧幕显示上，能够提供更高的显示效果；不过现今该种点阵字体主要只作为“辅助”的部分，当用户设置的字体尺寸并没有拥有位图像时，字体便会以矢量图象方式显示；而当打印时，印有字体无论大小亦会使用矢量字体打印。
常见的纯点阵字体有 bdf，pcf，fnt，hbf 等格式。

描边/轮廓字体（Outline Font）
PostScript字体
PostScript字体由Adobe公司为专业数字排版开发。它使用PostScript，字形以3次贝兹曲线描述，因此一组字体可以通过简单的数学变形放大或缩小。但是事实上，很大或很小的字体需要额外的信息（hints）才能好看。其下又分为Type1, Type3，OCF, CID等类型。
TrueType字体
TrueType是由美国苹果公司和微软公司共同开发的一种电脑轮廓字体类型标准。这种类型字体文件的扩展名是.ttf。windows和linux标准字体，mac平台上与postscript并存。
TrueType字体中的字符（或 字形）轮廓由直线和二次贝塞尔曲线(bézier)片段构成。这些构建在数学上比平面设计界PostScript使用的三次贝塞尔曲线（也被Type 1 字体所使用）更容易处理。尽管如此，对于多数形状，三次要比二次贝塞尔曲线需要更多的点来描述。这个差异也意味着它不能将 Type 1 无损地转换为TrueType格式，可是你可以无损地将TrueType转换为Type 1。
truetype字体的相关项目和技术
     * 文泉驿-linux中文字体项目
     * freetype-开源字体光栅化库
     * cleartype-微软和Monotype的技术人员使用TrueType的“提示技术”（hinting technology）来解决字体在低分辨率的显示模糊问题。原先的技术是在小字号时改用点阵字体。后来的技术改进首先引入了抗锯齿效果，可以平滑字体边缘；现在常用的是“次像素补偿”（微软使用这个技术，并称为ClearType），使用液晶显示器像素结构，以提高实际能显示的分辨率。 微软大力推广这些技术，并扩展到各种平台。

OpenType字体
OpenType字体是为了实现Windows和Macintosh系统兼容，而产生的一种新字体格式.它是一种可缩放字型（scalable font）电脑字体类型，采用PostScript格式，是美国微软公司与Adobe公司联合开发，用来替代TrueType字型的新字型。这类字体的文件扩展名为.otf。它源于微软公司的TrueType Open字型，TrueType Open字型又源于TrueType字型。
OpenType的主要特征有：
     * 字体编码基于万国码（Unicode），可以支持任何文本，或者同时支持多种文本。
     * 一个OpenType字体可以带有最多65,536个字形。对于中文字库而言，最基本的字汇应该包含Big5的13,060个汉字或是GB2312-80标准的6763个常用字型，这些字应该能满足一般用户的使用，对于户籍管理、银行系统和出版社等用户而言需要2万多字甚至7万多字的支持。
     * 字体有高级字形特征，可以进行对复杂文本进行充分的字形处理，并能通过更简单的脚本施加更复杂的字形效果，比如用罗马字母脚本书写英文。
     * 字体文件可以拓展到跨平台，能够在Mac OS，Windows和一些Unix系统中进行设置。
     * 若不含异体字等拓展字形和拓展文字性能，OpenType CFF字体比Type 1要小
Apple Advanced Typography (AAT) 字体
苹果公司对truetype字体的扩展，支持国际化和针对排版印刷的复杂特性，相比opentype在字形选项上更加灵活富有表现力。


@font-face
@font-face规则允许链接字体到当前页面，在需要的时候自动下载并激活。这就使用户可以按照设计目标选择最匹配的字型而不受平台固有可用字体的限制。一个字体描述符号集合定义了字体的属性特征和字体资源来自本地或者外部。多重的 @font-face规则可以用来定义多种字体。通过css字体匹配规则，浏览器可以有选择的下载那些需要的字体。需要注意的是某些浏览器对@font-face引入的字体文件应用同源策略！

Syntax
@font-face {
  [font-family: <family-name>;]?
  [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
  [unicode-range: <urange>#;]?
  [font-variant: <font-variant>;]?
  [font-feature-settings: normal|<feature-tag-value>#;]?
  [font-stretch: <font-stretch>;]?
  [font-weight: <weight>];
  [font-style: <style>];
}

 

浏览器支持情况

可以通过@font-face导入的字型文件主要有[.eot, .ttf, .otf, .woff, .svg]其中woff是W3C的推荐标准,eot是IE的特色。除IE外其它浏览器都可以很好的支持ttf和otf。微软提供了ttf2eot的转换软件 Web Embedding Fonts Tool (WEFT)，也有一些在线网站可以完成一种字型到其它各种字型的转换（ http://www.fontsquirrel.com）

 

使用场景

webfont尤其适用于一些单色icon的实现，相比图片展示易用性高，伸缩性强。亦可用做伸缩性背景图。

 

发布到网上的字型牵涉到版权问题，所以在使用webfont的时候如果有借用的字体图标请注意。

google有个专门的google fonts项目（https://developers.google.com/fonts/?hl=zh-CN）提供一些免费的在线webfonts可以使用，遗憾的是只有英文。

转载于:https://www.cnblogs.com/guxima/p/3440744.html