组内分享的关于字体渲染方面的小知识。

1. 网站字体渲 染过 程
仲金龙 2012.12.05
Blog:wheattime.com

2. 字体渲 染过 程
解码 分段 字体库 字体 排版引擎 光栅化

3. 字体渲 染过 程
解码 分段 字体库 字体 排版引擎 光栅化

4. 字体渲 染过 程 - 解码
1.Web 服务 器返回的 HTTP 头 中的 Content-Type: text/html; charset=
信息，这 一般有最高的优 先级 ；
2. 网页 本身 meta header 中的 Content-Type 信息的 charset 部分
3. 浏览 器菜单 里一般允许 用户强 制指定编码
4. 部分浏览 器 ( 比如 Firefox) 可以选择编码 自动检测 功能，
使用基于统计 的方法判断未定编码 。

5. 字体渲 染过 程
解码 分段 字体库 字体 排版引擎 光栅化

6. 字体渲 染过 程 - 分段
分段：将文本分为 由不同语 言组 成的小段

7. 字体渲 染过 程
解码 分段 字体库 字体 排版引擎 光栅化

8. 字体渲 染过 程 - 字体库
•Win:C:WindowsFonts
•Mac:/System/Library/Fonts/Library/Fonts~/Library/Fonts

9. 字体渲 染过 程
解码 分段 字体库 字体 排版引擎 光栅化

10. 字体渲 染
1. 点阵 字体（ Bitmap Fonts ）
2. 轮 廓字体（ Outline Font ）
1-1. PostScript 字体
1-2. TrueType 字体
1-3. OpenType 字体
3 笔 画字体（ Stroke-based font ）
4 METAFONT
http://zh.wikipedia.org/wiki/%E7%94%B5%E8%84%91%E5%AD%97%E4%BD%93

11. 字体渲 染
点阵 字体（ Bitmap Fonts ） - 非黑 即白

12. 字体渲 染
微软雅黑 中易宋体
微软雅黑（ microsoft yahei ） 中易宋体（ SimSun ）
12px-17px 使用内置点阵信息

13. 字体渲 染
• 衬线 （ serif ） “ 字脚”、“装饰 ”
• 非衬线 （ sans-serif ） 法语 ：“无”
• 等宽 字体（ monospace ）
• 书 写体（ cursive ）
• 梦幻体（ fantasy ）

14. 字体渲 染过 程 - 衬线
• 衬线 （ serif ）
Georgia 宋体
Times New Roman

15. 字体渲 染过 程 - 非衬线
• 非衬线 （ sans-serif ）
Tahoma Arial
幼圆

16. 字体渲 染 - 问题 1
• font-family 未设 置中文字体时 ，中文如何显 示
p{font-family:tahoma;}

17. 字体渲 染 - 浏览 器默认 字体
IE
•

18. 字体渲 染 - 浏览 器默认 字体
Chrome
•

19. 字体渲 染 - 浏览 器默认 字体
Firefox
•

20. 字体渲 染 - 问题 2
• 以下 2 种 写法对 中文的显 示有区别吗
p{font:12px/24px Tahoma;}
p{font:12px/24px Arial;}

21. 字体渲 染 - 问题 2
font:12px/24px Tahoma font:12px/24px Arial;
IE6
IE7
IE8
IE9
Chrome
Firefox
Opera

22. 字体渲 染 - 问题 2
• 结论 ：
•英文字体不会影响 中文的字形，但会影响 其位置。

23. 字体渲 染 - 问题 2
•反之呢

24. 字体渲 染
•文字的位置是怎样确 立的
p{font:30px/70px microsoft yahei;}
行高 (line-height) 内容区 (content area)
半行间距 (half-leading)

25. 字体渲 染
•内容区 (content area) 的影响 因素
•font
•浏览器
•排版引擎

26. 字体渲 染 - 问题 2
• 以下 2 种 写法有什么 区别
p{font-family:Times New Roman,tahoma;}
p{font-family:"Times New Roman",tahoma;}

27. 字体渲 染
•电脑 包含的字体与什么 有关 ？
•系统预 装 •系统 安装软 件

28. 字体渲 染
•WIN:
http://www.microsoft.com/typography/fonts/product.aspx
•MAC:
http://en.wikipedia.org/wiki/List_of_Mac_OS_X_fonts

29. 字体渲 染过 程
解码 分段 字体库 字体 排版引擎 光栅化

30. 字体渲 染 - 排版引擎
Win XP Windows7 / WindowsVista Mac OS X
Graphics Device Interface DirectWrite CoreText
(GDI) Graphics Device Interface
(GDI)

31. 字体渲 染 - 排版引擎 -GDI
Graphics Device Interface (GDI)
默认开启 ClearType 默认开启标准 (Standard) 无抗锯齿 (no antialiasng)

32. 字体渲 染 - 排版引擎 -DirectWrite
DirectWrite

33. 字体渲 染 - 排版引擎 -CoreText
CoreText
次像素抗锯齿 (sub-pixel antialiasing)

34. 字体渲 染
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering

35. 字体渲 染过 程
解码 分段 字体库 字体 排版引擎 光栅化

36. 字体渲 染 - 光栅化
光栅化 rasterization
将字形轮 廓转换为 像素
http://zh.wikipedia.org/wiki/%E5%AD%97%E4%BD%93%E5%85%89%E6%A0%85%E5%8C%96

37. 字体渲 染 - 相关资 料
•Qt 的文本渲 染技术 ( 视频 )
http://v.youku.com/v_show/id_XMzQ0NjIwMDYw.html
•浏览 器如何渲 染文本
http://blog.jjgod.org/2011/04/09/how-do-browsers-render-text/
•Text Rendering with Qt
http://jjgod.org/docs/slides/TextRenderingWithQt.pdf
•Type rendering on the web
http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/( 原文 )
http://www.wheattime.com/type-rendering-on-the-web-introduction.html( 翻译 )
•字体渲 染详 解
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering( 原文 )
http://www.21haolou.com/articles/show/153( 翻译 )

38. 谢谢 ！