Web Fonts 技术 研究

Web Fonts 技术研究

姓 名：郭名芳 导 师：王宗敏教授指导老师 ：林予松副教授

研究背景及意义相关技术英文 Web Fonts 技术研究中文 Web Fonts 研究与实现实验及分析总结

主要内容

研究背景及意义

Web Fonts 技术

用户需求提高

操作系统自带的字体类型有限

文字做成图片存在缺陷

1 Web Fonts 研究背景

通过 Web Fonts 技术，网页中可以使用更多的字体类型，摆脱安全字体的束缚

纯文本替换技术，解决了图片替换技术存在的问题

英文 Web Fonts 技术已经取得了很好的效果，但是中文由于自身的局限性，进展比较缓慢，因此中文 Web Fonts 的实现是一个非常值得研究的课题

2. 研究意义

相关技术

TrueType 字体（ TTF ）OpenType 字体（ OTF ）Embedded Open Type 字体（ EOT ）Scalable Vector Graphics 字体（ SVG ）Web Open Font Format 字体（ WOFF ）

2.1 Web 字体格式介绍

EOTFastMicrosoft Web Embedding Font Tool ttf2eot在线字体转换工具

2.2 字体格式转换工具

<canvas> 标签是 HTML5 中的新标签，用来定义图形，通过一个基于 JavaScript 的绘图API 可绘制任意形状，如线条、图像和文字等

最重要的是使用 Canvas 可绘制二次 Beizier曲线和贝塞尔曲线。

2.3 HTML5 Canvas

英文 Web Fonts 技术研究

3 Web Fonts 的主要解决方案

@font-facesIFRTypeface.js Cufon Google Font API

@font-face 是 CSS3 中的一个属性，主要是通过加载服务器端的字体文件把特殊的 Web 字体嵌入到所需网页中，展现给用户。

优点：实现起来简单，浏览器兼容性好。缺点：浏览器对字体格式的兼容性不一致，需解决

字体格式转换问题。

3.1 @font-face

Flash JS CSS sIFR

3.2 sIFR

优点：可缩放的；文本可以被鼠标选择；不影响SEO 。

缺点：页面必须完全载入， Javascript 才能替换文本；替换内容过多，页面反应会比较慢。

Perl 模块 Javascript 库 Typeface.js

3.3 Typeface.js

优点：支持更多的 CSS 属性；使用起来简单。缺点：文本无法被选中；浏览器兼容性不是很好。

3.4 Cufon

优点：被浏览器原生支持，不需加载 flash 插件；兼容各个主流浏览器；能够快速渲染大量字体。

缺点：依赖于 JavaScript ，文本无法被选中；无法实现悬停变换效果；可用性和用户体验以及 SEO 都不是很理想。

Font(.TTF,.OTF etc)

SVG FONT

VML PATHS

Javascript/JSON

FontForge

3.5 Google Font API•G

oogle Font Directory

•引用字体文件

•使用字体

优点：可兼容大部分浏览器，并且是开源字体；可继续使用HTML 文本，有利于网站 SEO ；利用 Google 的 CDN 设备加速，加快字体下载速度。缺点： Google Font Directory 提供的字体有限，并且没有中文字体；不支持手机客户端浏览器。

浏览器对字体格式的兼容性：

3.6 浏览器兼容性测试

Browser .ttf .woff .eot .svg .otf

IE 9+ 9+ 5+ 9+

Firefox 4+ 3.6+ 3.5+

Chrome 4+ 6+ 4+ 4+

Safari 3.1+ 6+ 3.1+ 3.1+

Opera 10+ 11.1+ 10+ 10+

浏览器对各种方案的兼容性：

3.6 浏览器兼容性测试

Browser @font-face sIFR Typeface.js Cufon Google Font API

IE 5+ 5+ 6+ 5+ 5+

Firefox 3.5+ 3.5+ 3.5+ 3.5+ 3.5+

Chrome 4+ 5+ 4+ 4+ 6+

Safari 3+ 3+ 4+ 3+ 3+

Opera 10+ 9+ 9.5+ 10+

方案的比较

3.7 方案比较

标准 @font-face sIFR Typeface Cufon Google Font Api

实现原理 加载服务器端字体文件

加载字体 SWF 文件

引用字体的JS 文件

引用 Cufon

字体文件加 载 Google

服 务 器 端 字 体文件

展现形式 文本格式 Flash 图片 图片 文本格式

浏览时插件 不需要 需要 不需要 不需要 不需要

SEO 友好性 友好 友好 不理想 不理想 友好

易用性 最简单 最复杂 相对简单 相对简单 简单

中文 Web Fonts 研究与实现

4.1 中文与英文的差别

• 中文是象形字，结构复杂• 英文是单个字母原型，结构简单结构

不同

• 英文字符集包含大小写 26 个字母外加 10 个数字和一些标点符合，共约 100 个字符

• 汉语字符集包含超过 7000 个汉字字符规模不同

方案 是否支持中文 不支持中文的原因

@font-face √

sIFR ×中文字体文件过大，无法

转换生成 SWF 文件Typeface √

Cufon √

Google Font Api ×Google Font Directory 不提

供中文字体

4.2 中文 Web Fonts 现状

英文 Web Fonts 技术对中文的支持情况

中文字体文件太大，加载速

度慢

需要传输整个字库文件，效

率低

中文 Web Fonts 实现效果不理想

4.2 中文 Web Fonts 现状

让中文浏览器发挥更大的作用建立公共Web 字体服务器常用汉字和生僻汉字分开加载按需索取字体

4.3 中文 Web Fonts 解决方案

实现过程

4.3.1 通过 @font-face按需索取字体

实现原理 :TTF 字体是曲线轮廓字体，用一系列的点构造字体的字形轮廓。

4.3.2 通过 Canvas按需绘制字体

4.3.2 通过 Canvas按需绘制字体

S2G love 字体中“可”字的轮廓数据信息

注： x: extentX ha: horizontalAdvance

4.3.2 通过 Canvas按需绘制字体Canvas 绘制字体的关键代码

实现过程

4.3.2 通过 Canvas按需绘制字体

实验及分析

目的• 对比按需索取方案前

后的实验结果• 验证方案的有效性

环境设置

• 一个 Web 服务器• 一个文件服务器• 一个 SQL Server 数

据库服务器

测试工具 • Chrome 浏览器的webkit 开发人员工具

5.1 实验目的及实验环境设置

实验

测试流程

5.2 实验方法及步骤

实验要求： 选取可爱心形中文字体和华文琥珀字体 改变文字长度反复实验，通过 @font-face 实

现 Web Fonts时记录加载的字体文件大小；通过canvas 绘制字体时，记录消耗的网络流量和加载时间

每次测试之前，先清除浏览器缓存

5.2 实验方法及步骤

5.2 实验方法及步骤用 Chrome 浏览器测试 s2g love 字体通过 @font-face 实现 web Fonts 时按需索取方案前后实验数据截图

通过 @font-face 实现中文 Web Fonts:

5.3 实验结果及分析（一）

050

010

0015

0020

0025

0030

0035

0040

0045

0050

0055

0060

000

1000

2000

3000

4000

5000

6000

采取按需索取方案后

不同文字的长度 / 个

字体

文件

的大

小/K

B

050

010

0015

0020

0025

0030

0035

0040

0045

0050

0055

0060

000

500

1000

1500

2000

2500

3000

3500

4000

采取按需索取方案后

不同文字的长度 / 个

字体

文件

的大

小/K

B(a)s2g love 字体 (b) 华文琥珀字体

图 5.1 字体文件大小与文字长度的关系

结果分析： 若不采取按需索取的方案，客户端每次都要加载整个

字体库文件；反之客户端仅加载所需字体文件，字体文件大小随着文字长度的增加而增大。

以 500 个汉字为例，相对于采取方案前，所需下载的字体文件大小， S2G love 字体可以减小 94.9% ，华文琥珀字体可以减小 90.7% 。

5.3 实验结果及分析（一）

5.3 实验结果及分析（二）

050

010

0015

0020

0025

0030

0035

0040

0045

0050

0055

0060

000

4000

8000

12000

16000

20000

采取按需索取方案后

不同文字的长度 / 个

网络

流量

/KB

010

0020

0030

0040

0050

0060

000

20

40

60

80

100

采取按需索取方案后

不同文字的长度 / 个

Can

vas

绘制

字体

所需

时间

/s

图 5.2 Canvas 绘制 s2g love 字体所需传输的网络数据量

010

0020

0030

0040

0050

0060

000

2000400060008000

1000012000140001600018000

采取按需索取方案后

不同文字的长度 / 个

网络

流量

/KB

0

10

20

30

40

50

60

70

采取按需索取方案后

采取按需索取方案前

不同文字的长度 / 个

Can

vas

绘制

字体

所需

时间

/s

图 5.3 Canvas 绘制华文琥珀字体所需传输的网络数据量

结果分析： 若不采取按需索取的方案，客户端每次都需要下载整个

字体的字形轮廓信息，产生的网络流量和所需时间均为定值。反之，客户端仅需加载所需字的字形轮廓信息，网络数据随着文字长度的增加而增大。

以 500 个汉字计算，相对于采取按需索取方案前， S2G love 字体和华文琥珀字体分别可以减少 91.9% 、 90.7% 的网络流量，绘制字体的时间分别节省 94.8% 、 93.6% 。

5.3 实验结果及分析（二）

总 结

本文主要介绍了以下内容：

6 总结和展望

介绍现有几种 Web Fonts 技术的原理，比较其优越点

分析中文 Web Fonts 现状，指出存在问题，提出解决方案

对基于按需索取的两种方案进行实验，验证方案的有效性

本文可以对上述两种方案做一些优化工作：

6 总结和展望

服务端• 通过云平台来搭建，提高网络带宽，加快中

文字体的下载速度

客户端• 通过浏览器缓存，存储部分常用的字体信

息，提高页面的加载速度

THANK YOU!