网站字体渲染过程

 网站字体渲染过程

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

007f6dc3073ec3ef7d12f1b76f16c04b?s=128

time zhong

May 20, 2013
Tweet

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