1 / 42

Web Fonts 技术 研究

Web Fonts 技术 研究. 姓 名：郭名芳 导 师：王宗敏教授 指导老师 ：林予松副教授. 主要内容. 研究背景及意义 相关技术 英文 Web Fonts 技术研究 中文 Web Fonts 研究与实现 实验及分析 总结. 研究背景及意义. 1 Web Fonts 研究背景. 2. 研究意义. 通过 Web Fonts 技术，网页中可以使用更多的字体类型，摆脱安全字体的束缚 纯文本替换技术，解决了图片替换技术存在的问题

clinton-talley
Download Presentation

Web Fonts 技术 研究

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Fonts技术研究 姓 名：郭名芳 导 师：王宗敏教授 指导老师 ：林予松副教授

  2. 主要内容 • 研究背景及意义 • 相关技术 • 英文Web Fonts技术研究 • 中文Web Fonts研究与实现 • 实验及分析 • 总结

  3. 研究背景及意义

  4. 1 Web Fonts研究背景

  5. 2.研究意义 • 通过Web Fonts技术，网页中可以使用更多的字体类型，摆脱安全字体的束缚 • 纯文本替换技术，解决了图片替换技术存在的问题 • 英文Web Fonts技术已经取得了很好的效果，但是中文由于自身的局限性，进展比较缓慢，因此中文Web Fonts的实现是一个非常值得研究的课题

  6. 相关技术

  7. 2.1 Web字体格式介绍 • TrueType字体（TTF） • OpenType字体（OTF） • Embedded Open Type字体（EOT） • Scalable Vector Graphics 字体（SVG） • Web Open Font Format字体（WOFF）

  8. 2.2 字体格式转换工具 • EOTFast • Microsoft Web Embedding Font Tool • ttf2eot • 在线字体转换工具

  9. 2.3 HTML5 Canvas • <canvas>标签是HTML5中的新标签，用来定义图形，通过一个基于JavaScript的绘图API可绘制任意形状，如线条、图像和文字等 • 最重要的是使用Canvas可绘制二次Beizier曲线和贝塞尔曲线。

  10. 英文Web Fonts技术研究

  11. 3 Web Fonts的主要解决方案 • @font-face • sIFR • Typeface.js • Cufon • Google Font API

  12. 3.1 @font-face • @font-face是CSS3中的一个属性，主要是通过加载服务器端的字体文件把特殊的Web字体嵌入到所需网页中，展现给用户。 • 优点：实现起来简单，浏览器兼容性好。 • 缺点：浏览器对字体格式的兼容性不一致，需解决字体格式转换问题。

  13. 3.2 sIFR 优点：可缩放的；文本可以被鼠标选择；不影响SEO。 缺点：页面必须完全载入，Javascript才能替换文本；替换内容过多，页面反应会比较慢。

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

  15. 3.4 Cufon • 优点：被浏览器原生支持，不需加载flash插件；兼容各个主流浏览器；能够快速渲染大量字体。 • 缺点：依赖于JavaScript，文本无法被选中；无法实现悬停变换效果；可用性和用户体验以及SEO都不是很理想。 Font(.TTF,.OTF etc) FontForge SVG FONT VML PATHS Javascript/JSON

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

  17. 3.6 浏览器兼容性测试 • 浏览器对字体格式的兼容性：

  18. 3.6 浏览器兼容性测试 • 浏览器对各种方案的兼容性：

  19. 3.7 方案比较 • 方案的比较

  20. 中文Web Fonts研究与实现

  21. 4.1 中文与英文的差别

  22. 4.2 中文Web Fonts现状 英文Web Fonts技术对中文的支持情况

  23. 4.2 中文Web Fonts现状

  24. 4.3 中文Web Fonts解决方案 • 让中文浏览器发挥更大的作用 • 建立公共Web字体服务器 • 常用汉字和生僻汉字分开加载 • 按需索取字体

  25. 4.3.1 通过@font-face按需索取字体 • 实现过程

  26. 4.3.2 通过Canvas按需绘制字体 • 实现原理:TTF字体是曲线轮廓字体，用一系列的点构造字体的字形轮廓。

  27. 4.3.2 通过Canvas按需绘制字体 • S2G love字体中“可”字的轮廓数据信息 注： x: extentX ha: horizontalAdvance

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

  29. 4.3.2 通过Canvas按需绘制字体 • 实现过程

  30. 实验及分析

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

  32. 5.2 实验方法及步骤 • 测试流程

  33. 5.2 实验方法及步骤 • 实验要求： 选取可爱心形中文字体和华文琥珀字体 改变文字长度反复实验，通过@font-face实现Web Fonts时记录加载的字体文件大小；通过canvas绘制字体时，记录消耗的网络流量和加载时间 每次测试之前，先清除浏览器缓存

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

  35. 5.3 实验结果及分析（一） • 通过@font-face实现中文Web Fonts: (a)s2g love字体 (b)华文琥珀字体 图5.1 字体文件大小与文字长度的关系

  36. 5.3 实验结果及分析（一） • 结果分析： 若不采取按需索取的方案，客户端每次都要加载整个字体库文件；反之客户端仅加载所需字体文件，字体文件大小随着文字长度的增加而增大。 以500个汉字为例，相对于采取方案前，所需下载的字体文件大小，S2G love字体可以减小94.9%，华文琥珀字体可以减小90.7%。

  37. 5.3 实验结果及分析（二） 图5.2 Canvas绘制s2g love字体所需传输的网络数据量 图5.3 Canvas绘制华文琥珀字体所需传输的网络数据量

  38. 5.3 实验结果及分析（二） • 结果分析： 若不采取按需索取的方案，客户端每次都需要下载整个字体的字形轮廓信息，产生的网络流量和所需时间均为定值。反之，客户端仅需加载所需字的字形轮廓信息，网络数据随着文字长度的增加而增大。 以500个汉字计算，相对于采取按需索取方案前，S2G love字体和华文琥珀字体分别可以减少91.9%、 90.7%的网络流量，绘制字体的时间分别节省94.8%、93.6%。

  39. 总 结

  40. 6 总结和展望 • 本文主要介绍了以下内容：

  41. 6 总结和展望 • 本文可以对上述两种方案做一些优化工作：

  42. Thank You!

More Related