网站字体渲染过程

介绍字体渲染过程、字体分类、CSS写法对字体的影响、以及浏览器渲染差异的影响因素等。

Transcript

1. Timezhong www.wheattime.com
2. 解码 分段 字体库 字体 排版引擎 光栅化
3. 解码 分段 字体库 字体 排版引擎 光栅化
4. 解码 将字节流解析为字符
5. 1.Web 服务器返回的 HTTP 头中的 Content-Type: text/html; charset=“” 2.网页本身 meta header 中的 charset 部分 3.浏览器菜单里一般允许用户强制指定编码 4.部分浏览器 (比如 Firefox) 可以选择编码自动检测功能， 使用基于统计的方法判断未定编码。
6. ASCII GB2312 Big5 Unicode UTF-8 2013/5/20
7. 解码 分段 字体库 字体 排版引擎 光栅化
8. 分段：将文本分为由不同语言组成的小段
9. 解码 分段 字体库 字体 排版引擎 光栅化
10. •Win:C:\Windows\Fonts •Mac:/System/Library/Fonts/Library/Fonts~/Library/Fonts
11. 解码 分段 字体库 字体 排版引擎 光栅化
12. 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
13. 点阵字体（Bitmap Fonts）- 非黑即白
14. 微软雅黑 微软雅黑（microsoft yahei） 中易宋体 中易宋体（SimSun） 12px-17px 使用内置点阵信息
15. • 衬线（serif） • 非衬线（sans-serif） • 等宽字体（monospace ） • 书写体（cursive） • 梦幻体（fantasy） 法语：“无” “字脚”、“装饰”
16. • 衬线（serif） Georgia Times New Roman 宋体
17. • 非衬线（sans-serif） Tahoma 幼圆 Arial
18. font-family未设置中文字体时，中文如何显示 p{font-family:tahoma;}
19. System font fallback • Font Fallback • Font Linking
20. • IE
21. • Chrome
22. • Firefox
23. • 以下2种写法对中文的显示有区别吗 p{font:12px/24px Tahoma;} p{font:12px/24px Arial;}
24. font:12px/24px Tahoma font:12px/24px Arial; IE6 IE7 IE8 IE9 Chrome Firefox Opera
25. • 结论： •英文字体不会影响中文的字形，但会影响其位置。
26. •反之呢
27. •文字的位置是怎样确立的 半行间距 (half-leading) 内容区 (content area) 行高 (line-height) p{font:30px/70px microsoft yahei;}
28. •内容区(content area)的影响因素 •font •浏览器 •排版引擎
29. • 以下2种写法有什么区别 p{font-family:Times New Roman,tahoma;} p{font-family:"Times New Roman",tahoma;}
30. •电脑包含的字体与什么有关？ •系统预装 •系统安装软件
31. •WIN: http://www.microsoft.com/typography/fonts/product.aspx •MAC: http://en.wikipedia.org/wiki/List_of_Mac_OS_X_fonts 产品预装字体
32. 解码 分段 字体库 字体 排版引擎 光栅化
33. 不同操作系统使用的渲染引擎 Win XP Win7 / Win Vista Mac OS X GDI GDI DirectWrite CoreText
34. Graphics Device Interface (GDI) 默认开启ClearType 默认开启标准(Standard) 无抗锯齿(no antialiasng)
35. DirectWrite
36. CoreText 次像素抗锯齿(sub-pixel antialiasing)
37. IOS • 采用灰度渲染 • 默认关闭subpixel rendering，但可以启用
38. http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering
39. 解码 分段 字体库 字体 排版引擎 光栅化
40. 光栅化 rasterization 将字形轮廓转换为像素 http://zh.wikipedia.org/wiki/%E5%AD%97%E4%BD%93%E5%85%89%E6%A0%85%E5%8C%96
41. 这里IE6偏一个像素， FF高2个像素…Chrome…..IE8… …… 你们在干嘛？？ 这…好….
42. 放弃也是一种美。 没有完美的解决方案，也是一种方案。
43. 谢谢 ：）
44. •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(翻译) •多语言字符串的字体问题 http://blog.csdn.net/easebone/article/details/7382633