Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

网站字体渲染-麦时

1,467 views

Published on

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

Published in: Technology

网站字体渲染-麦时

  1. 1. 网站字体渲 染过 程仲金龙 2012.12.05Blog:wheattime.com
  2. 2. 字体渲 染过 程 解码 分段 字体库 字体 排版引擎 光栅化
  3. 3. 字体渲 染过 程 解码 分段 字体库 字体 排版引擎 光栅化
  4. 4. 字体渲 染过 程 - 解码 1.Web 服务 器返回的 HTTP 头 中的 Content-Type: text/html; charset= 信息,这 一般有最高的优 先级 ; 2. 网页 本身 meta header 中的 Content-Type 信息的 charset 部分 3. 浏览 器菜单 里一般允许 用户强 制指定编码 4. 部分浏览 器 ( 比如 Firefox) 可以选择编码 自动检测 功能, 使用基于统计 的方法判断未定编码 。
  5. 5. 字体渲 染过 程 解码 分段 字体库 字体 排版引擎 光栅化
  6. 6. 字体渲 染过 程 - 分段 分段:将文本分为 由不同语 言组 成的小段
  7. 7. 字体渲 染过 程 解码 分段 字体库 字体 排版引擎 光栅化
  8. 8. 字体渲 染过 程 - 字体库 •Win:C:WindowsFonts •Mac:/System/Library/Fonts/Library/Fonts~/Library/Fonts
  9. 9. 字体渲 染过 程 解码 分段 字体库 字体 排版引擎 光栅化
  10. 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. 11. 字体渲 染 点阵 字体( Bitmap Fonts ) - 非黑 即白
  12. 12. 字体渲 染 微软雅黑 中易宋体 微软雅黑( microsoft yahei ) 中易宋体( SimSun ) 12px-17px 使用内置点阵信息
  13. 13. 字体渲 染• 衬线 ( serif ) “ 字脚”、“装饰 ”• 非衬线 ( sans-serif ) 法语 :“无”• 等宽 字体( monospace )• 书 写体( cursive )• 梦幻体( fantasy )
  14. 14. 字体渲 染过 程 - 衬线• 衬线 ( serif ) Georgia 宋体 Times New Roman
  15. 15. 字体渲 染过 程 - 非衬线 • 非衬线 ( sans-serif ) Tahoma Arial 幼圆
  16. 16. 字体渲 染 - 问题 1• font-family 未设 置中文字体时 ,中文如何显 示 p{font-family:tahoma;}
  17. 17. 字体渲 染 - 浏览 器默认 字体 IE •
  18. 18. 字体渲 染 - 浏览 器默认 字体 Chrome •
  19. 19. 字体渲 染 - 浏览 器默认 字体 Firefox •
  20. 20. 字体渲 染 - 问题 2 • 以下 2 种 写法对 中文的显 示有区别吗 p{font:12px/24px Tahoma;} p{font:12px/24px Arial;}
  21. 21. 字体渲 染 - 问题 2 font:12px/24px Tahoma font:12px/24px Arial; IE6 IE7 IE8 IE9 Chrome Firefox Opera
  22. 22. 字体渲 染 - 问题 2 • 结论 : •英文字体不会影响 中文的字形,但会影响 其位置。
  23. 23. 字体渲 染 - 问题 2 •反之呢
  24. 24. 字体渲 染 •文字的位置是怎样确 立的 p{font:30px/70px microsoft yahei;} 行高 (line-height) 内容区 (content area) 半行间距 (half-leading)
  25. 25. 字体渲 染 •内容区 (content area) 的影响 因素 •font •浏览器 •排版引擎
  26. 26. 字体渲 染 - 问题 2 • 以下 2 种 写法有什么 区别 p{font-family:Times New Roman,tahoma;} p{font-family:"Times New Roman",tahoma;}
  27. 27. 字体渲 染 •电脑 包含的字体与什么 有关 ? •系统预 装 •系统 安装软 件
  28. 28. 字体渲 染•WIN: http://www.microsoft.com/typography/fonts/product.aspx•MAC: http://en.wikipedia.org/wiki/List_of_Mac_OS_X_fonts
  29. 29. 字体渲 染过 程 解码 分段 字体库 字体 排版引擎 光栅化
  30. 30. 字体渲 染 - 排版引擎 Win XP Windows7 / WindowsVista Mac OS X Graphics Device Interface DirectWrite CoreText (GDI) Graphics Device Interface (GDI)
  31. 31. 字体渲 染 - 排版引擎 -GDI Graphics Device Interface (GDI) 默认开启 ClearType 默认开启标准 (Standard) 无抗锯齿 (no antialiasng)
  32. 32. 字体渲 染 - 排版引擎 -DirectWrite DirectWrite
  33. 33. 字体渲 染 - 排版引擎 -CoreText CoreText 次像素抗锯齿 (sub-pixel antialiasing)
  34. 34. 字体渲 染 http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering
  35. 35. 字体渲 染过 程 解码 分段 字体库 字体 排版引擎 光栅化
  36. 36. 字体渲 染 - 光栅化 光栅化 rasterization 将字形轮 廓转换为 像素 http://zh.wikipedia.org/wiki/%E5%AD%97%E4%BD%93%E5%85%89%E6%A0%85%E5%8C%96
  37. 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. 38. 谢谢 !

×