WebFont 字体格式及几种在线格式转换工具介绍

这两天在鼓捣 webfont，那是一个折腾啊，终于算是把 webfont 搞明白了；

在线字体格式转换工具介绍

TrueType (.ttf)

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

EOT – Embedded Open Type (.eot)

嵌入字体格式（EOT）是微软开发的一种技术，允许 OpenType 字体嵌入到网页并可以下载至浏览器渲染，浏览器根据 CSS 中 @font-face 的定义，下载，渲染这种 .EOT 后缀的字体文件。这些文件只在当前页活动的状态下，临时安装在用户的系统中。

OpenType (.otf)

OpenType是一种可缩放字型（scalable font）电脑字体类型，采用PostScript格式，是美国微软公司与Adobe公司联合开发，用来替代TrueType字型的新字型。这类字体的文件扩展名为.otf，类型代码是OTTO，现行标准为OpenType 1.4。OpenType最初发表于1996年，并在2000年之后出现大量字体。它源于微软公司的TrueType Open字型，TrueType Open字型又源于TrueType字型。OpenType font包括了Adobe CID-Keyed font技术。Adobe公司已经在2002年末将其字体库全部改用OpenType格式。

WOFF – Web Open Font Format (.woff)

相对于 TrueType 和 OpenType ，WOFF（Web开发字体格式）是一种专门为了 Web 而设计的字体格式标准，它并不复杂，实际上只是对于 TrueType / OpenType 等字体格式的封装，并针对网络使用加以优化：每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输，并且不包含任何加密或者 DRM 措施。包括 Adobe、 Lino Type、Monotype 在内的几乎所有主要的字体供应商都加入到支持 WOFF 的行列中来。

SVG (Scalable Vector Graphics) Fonts (.svg)

顾名思义，就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体.svgz。SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。SVG可以使你设计的网页可以更加精彩细致，使用简单的文本命令，SVG可实现色彩线性变化、路径、自定义字体、透明效果、滤镜效果等各式常见的图形图像效果。

在线字体格式转换工具介绍

在线字体格式转换工具推荐 The FontSquir­rel Con­verter

字体生成步骤：

1. 上传字体
2. 选择配置：BASIC（推荐，基本配置，能够导出中文）；OPTIMAL（最优配置，会将字体文件压缩，只剩下符号、数字和英文，无法导出中文字体格式）；EXPERT（定制，根据自己的需要定制配置）；
3. 勾选 Agreement，出现下载按钮下载即可；

另外还有其他几个在线字体转换的网站，不过多多少少都有些限制（限制上传字体大小、生成字体格式单一、不能生成中文字体）：
Online Font Converter
Free Font Conve
font-face generator
Font 2 Web
ttf 2 eot
otf 2 woff

WebFont 云托管服务

国内目前提供中文 WebFont 云托管服务的公司，他们能够压缩与转码字体：
http://www.youziku.com （有字库）
http://cn.justfont.com （就是字）
http://www.iconfont.cn/webfont/（阿里妈妈 webfont 平台）
因为字体有版权限制所以阿里提供的webfont平台暂时只是基本的功能，没有全部开放，只在内部使用；

WebFont 云托管服务有利也有弊，好的方面我就不说了，弊端就是不够灵活，相对比较被动，通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，汉字字体文件平均每套5M大小，不可能整套嵌入，因此必须根据内容按需截取，生成小字体文件，字数越精简，字体文件越小，推送速度越快；

开源

字蛛官网：http://font-spider.org

字蛛的原理和云托管一样，要想使用某个字体的全部文字格式，需要使用字体格式转换工具将 .ttf 格式转换为其他的 webfont 格式，本地引用：

@font-face {
    font-family: 'MyWebFont';
    src: url('_-webfont.eot');
    src: url('_-webfont.eot?#iefix') format('embedded-opentype'),
         url('_-webfont.woff2') format('woff2'),
         url('_-webfont.woff') format('woff'),
         url('_-webfont.ttf') format('truetype'),
         url('_-webfont.svg#fzzhongqian-m16sregular') format('svg');
    font-weight: normal;
    font-style: normal;
}