Transcript Web Fonts技术研究

Web Fonts技术研究
姓
名：郭名芳
导
师：王宗敏教授
指导老师 ：林予松副教授
主要内容
研究背景及意义
相关技术
英文Web Fonts技术研究
中文Web Fonts研究与实现
实验及分析
总结
研究背景及意义
1
Web Fonts研究背景
操作系统自带的
字体类型有限
文字做成图片存
在缺陷
用户需求提高
Web Fonts技
术
2.研究意义
通过Web Fonts技术，网页中可以使用更多
的字体类型，摆脱安全字体的束缚
纯文本替换技术，解决了图片替换技术存在
的问题
英文Web Fonts技术已经取得了很好的效果，
但是中文由于自身的局限性，进展比较缓慢，
因此中文Web Fonts的实现是一个非常值得
研究的课题
相关技术
2.1 Web字体格式介绍
TrueType字体（TTF）
OpenType字体（OTF）
Embedded Open Type字体（EOT）
Scalable Vector Graphics 字体（SVG）
Web Open Font Format字体（WOFF）
2.2 字体格式转换工具
EOTFast
Microsoft Web Embedding Font Tool
ttf2eot
在线字体转换工具
2.3 HTML5 Canvas
<canvas>标签是HTML5中的新标签，用来
定义图形，通过一个基于JavaScript的绘图
API可绘制任意形状，如线条、图像和文字等
最重要的是使用Canvas可绘制二次Beizier
曲线和贝塞尔曲线。
英文Web Fonts技术研究
3 Web Fonts的主要解决方案
@font-face
sIFR
Typeface.js
Cufon
Google Font API
3.1 @font-face
@font-face是CSS3中的一个属性，主要是通过加
载服务器端的字体文件把特殊的Web字体嵌入到所需
网页中，展现给用户。
优点：实现起来简单，浏览器兼容性好。
缺点：浏览器对字体格式的兼容性不一致，需解决
字体格式转换问题。
3.2 sIFR
Flash
JS
CSS
sIFR
优点：可缩放的；文本可以被鼠标选择；不影响
SEO。
缺点：页面必须完全载入，Javascript才能替换文
本；替换内容过多，页面反应会比较慢。
3.3 Typeface.js
Perl模块
Javascript
库
Typeface.js
优点：支持更多的CSS属性；使用起来简单。
缺点：文本无法被选中；浏览器兼容性不是很好。
3.4 Cufon
Font(.TTF,.OTF etc)
FontForge
SVG FONT
VML PATHS
Javascript/JSON
 优点：被浏览器原生支持，
不需加载flash插件；兼容
各个主流浏览器；能够快速
渲染大量字体。
 缺点：依赖于JavaScript，
文本无法被选中；无法实现
悬停变换效果；可用性和用
户体验以及SEO都不是很理
想。
3.5 Google Font API
• Google Font Directory
• 引用字体文件
• 使用字体
优点：可兼容大部分浏览器，并且是开源字体；可继续使用
HTML文本，有利于网站SEO；利用Google的CDN设备加速，
加快字体下载速度。
缺点：Google Font Directory提供的字体有限，并且没有中
文字体；不支持手机客户端浏览器。
3.6 浏览器兼容性测试
浏览器对字体格式的兼容性：
Browser
.ttf
.woff
.eot
.svg
.otf
IE
9+
9+
5+
Firefox
4+
3.6+
Chrome
4+
6+
4+
4+
Safari
3.1+
6+
3.1+
3.1+
Opera
10+
11.1+
10+
10+
9+
3.5+
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
加载字体
SWF文件
引用字体的JS
文件
Cufon
引用Cufon字
体文件
Google
Font Api
加 载 Google
服务器端字体
文件
展现形式
文本格式
Flash
图片
图片
文本格式
浏览时插件
不需要
需要
不需要
不需要
不需要
SEO友好性
友好
友好
不理想
不理想
友好
相对简单
相对简单
易用性
最简单
最复杂
简单
中文Web Fonts研究与实现
4.1 中文与英文的差别
结构
不同
规模
不同
• 中文是象形字，结构复杂
• 英文是单个字母原型，结构简单
• 英文字符集包含大小写26个字母外加10
个数字和一些标点符合，共约100个字符
• 汉语字符集包含超过7000个汉字字符
4.2 中文Web Fonts现状
英文Web Fonts技术对中文的支持情况
方案
@font-face
是否支持中文
√
sIFR
×
Typeface
√
Cufon
√
Google Font Api
不支持中文的原因
×
中文字体文件过大，无法
转换生成SWF文件
Google Font Directory不提
供中文字体
4.2 中文Web Fonts现状
中文字体
文件太大，
加载速度
慢
中文Web Fonts实现
效果不理想
需要传输
整个字库
文件，效
率低
4.3 中文Web Fonts解决方案
让中文浏览器发挥更大的作用
建立公共Web字体服务器
常用汉字和生僻汉字分开加载
按需索取字体
4.3.1 通过@font-face按需索取字体
实现过程
4.3.2 通过Canvas按需绘制字体
实现原理:TTF字体是曲线轮廓字体，用一系列的点
构造字体的字形轮廓。
4.3.2 通过Canvas按需绘制字体
S2G love字体中“可”字的轮廓数据信息
注： x: extentX
ha: horizontalAdvance
4.3.2 通过Canvas按需绘制字体
Canvas绘制字体的关键代码
4.3.2 通过Canvas按需绘制字体
实现过程
实验及分析
5.1 实验目的及实验环境设置
目的
实验
• 对比按需索取方案前
后的实验结果
• 验证方案的有效性
环境设置
测试工具
• 一个Web服务器
• 一个文件服务器
• 一个SQL Server数
据库服务器
• Chrome浏览器的
webkit开发人员工具
5.2 实验方法及步骤
测试流程
5.2 实验方法及步骤
实验要求：
选取可爱心形中文字体和华文琥珀字体
改变文字长度反复实验，通过@font-face实
现Web Fonts时记录加载的字体文件大小；通过
canvas绘制字体时，记录消耗的网络流量和加载时
间
每次测试之前，先清除浏览器缓存
5.2 实验方法及步骤
用Chrome浏览器测试s2g love字体通过@font-face实现web Fonts时按需索取方案前后实验数据截图
5.3 实验结果及分析（一）
通过@font-face实现中文Web Fonts:
4000
3500
5000
4000
3000
2000
采取按需索取方案后
1000
采取按需索取方案前
字体文件的大小/KB
3000
2500
2000
1500
采取按需索取方案后
1000
采取按需索取方案前
500
(b)华文琥珀字体
图5.1 字体文件大小与文字长度的关系
6000
5500
5000
4500
4000
3500
3000
2500
2000
不同文字的长度/个
不同文字的长度/个
(a)s2g love字体
1500
1000
500
0
0
0
字体文件的大小/KB
6000
5.3 实验结果及分析（一）
结果分析：
若不采取按需索取的方案，客户端每次都要加载整个
字体库文件；反之客户端仅加载所需字体文件，字体文件大
小随着文字长度的增加而增大。
以500个汉字为例，相对于采取方案前，所需下载的
字体文件大小，S2G love字体可以减小94.9%，华文琥珀字
体可以减小90.7%。
5.3 实验结果及分析（二）
100
90
80
70
60
50
40
30
20
10
0
6000
5500
5000
4500
4000
3500
3000
2500
2000
1500
1000
采取按需索取方案前
采取按需索取方案前
500
采取按需索取方案后
采取按需索取方案后
0
Canvas绘制字体所需时间/s
网络流量/KB
22000
20000
18000
16000
14000
12000
10000
8000
6000
4000
2000
0
不同文字的长度/个
不同文字的长度/个
50
采取按需索取方案后
40
采取按需索取方案前
30
20
10
不同文字的长度/个
图5.3 Canvas绘制华文琥珀字体所需传输的网络数据量
6000
5500
5000
4500
4000
3500
3000
2500
2000
1500
0
500
6000
5500
60
1000
不同文字的长度/个
5000
4500
4000
3500
3000
2500
2000
1500
1000
500
采取按需索取方案前
70
0
采取按需索取方案后
Canvas绘制字体所需时间/s
18000
16000
14000
12000
10000
8000
6000
4000
2000
0
0
网络流量/KB
图5.2 Canvas绘制s2g love字体所需传输的网络数据量
5.3 实验结果及分析（二）
结果分析：
若不采取按需索取的方案，客户端每次都需要下载整
个字体的字形轮廓信息，产生的网络流量和所需时间均为定
值。反之，客户端仅需加载所需字的字形轮廓信息，网络数
据随着文字长度的增加而增大。
以500个汉字计算，相对于采取按需索取方案前，S2G
love字体和华文琥珀字体分别可以减少91.9%、 90.7%的网
络流量，绘制字体的时间分别节省94.8%、93.6%。
总结
6 总结和展望
本文主要介绍了以下内容：
介绍现有几种Web Fonts技术的原理，比较其优越点
分析中文Web Fonts现状，指出存在问题，提出解决方案
对基于按需索取的两种方案进行实验，验证方案的有效性
6 总结和展望
本文可以对上述两种方案做一些优化工作：
服务端
• 通过云平台来搭建，提高网络带宽，加快中
文字体的下载速度
客户端
• 通过浏览器缓存，存储部分常用的字体信
息，提高页面的加载速度