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