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

More Related Content

Viewers also liked

為什麼不努力投資就能贏?
為什麼不努力投資就能贏?為什麼不努力投資就能贏?
為什麼不努力投資就能贏?Po-Feng Lee
 
上班族理財第一課
上班族理財第一課上班族理財第一課
上班族理財第一課Po-Feng Lee
 
近期台灣對中國將開放事項
近期台灣對中國將開放事項近期台灣對中國將開放事項
近期台灣對中國將開放事項Po-Feng Lee
 
退休前您應該了解的事
退休前您應該了解的事退休前您應該了解的事
退休前您應該了解的事Po-Feng Lee
 
3 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 20173 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 2017Drift
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheLeslie Samuel
 

Viewers also liked (7)

利大於弊
利大於弊利大於弊
利大於弊
 
為什麼不努力投資就能贏?
為什麼不努力投資就能贏?為什麼不努力投資就能贏?
為什麼不努力投資就能贏?
 
上班族理財第一課
上班族理財第一課上班族理財第一課
上班族理財第一課
 
近期台灣對中國將開放事項
近期台灣對中國將開放事項近期台灣對中國將開放事項
近期台灣對中國將開放事項
 
退休前您應該了解的事
退休前您應該了解的事退休前您應該了解的事
退休前您應該了解的事
 
3 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 20173 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 2017
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your Niche
 

Similar to 网站字体渲染 麦时

前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关jay li
 
《网页设计与制作》第一章:网页制作基础
《网页设计与制作》第一章:网页制作基础《网页设计与制作》第一章:网页制作基础
《网页设计与制作》第一章:网页制作基础greentask
 
13, io
13, io13, io
13, ioted-xu
 
HTML & JavaScript
HTML & JavaScriptHTML & JavaScript
HTML & JavaScriptSanji Zhang
 
石玉磊 Web rebuild
石玉磊 Web rebuild石玉磊 Web rebuild
石玉磊 Web rebuildWebrebuild
 
白玉磊 Webrebuild
白玉磊 Webrebuild白玉磊 Webrebuild
白玉磊 Webrebuild裕波 周
 
使用 .NET Standard 開發跨平台應用程式
使用 .NET Standard 開發跨平台應用程式使用 .NET Standard 開發跨平台應用程式
使用 .NET Standard 開發跨平台應用程式Gelis Wu
 
Servlet & JSP 教學手冊第二版 - 第 1 章:簡介Web應用程式
Servlet & JSP 教學手冊第二版 - 第 1 章:簡介Web應用程式Servlet & JSP 教學手冊第二版 - 第 1 章:簡介Web應用程式
Servlet & JSP 教學手冊第二版 - 第 1 章:簡介Web應用程式Justin Lin
 
[3]投影片 futurewad樹莓派研習會 141204
[3]投影片 futurewad樹莓派研習會 141204[3]投影片 futurewad樹莓派研習會 141204
[3]投影片 futurewad樹莓派研習會 141204CAVEDU Education
 
网页设计及制作(Div+css)
网页设计及制作(Div+css)网页设计及制作(Div+css)
网页设计及制作(Div+css)lrk3
 
PHP & AppServ
PHP & AppServPHP & AppServ
PHP & AppServHt Wang
 
前端开发工具 - 编辑器篇
前端开发工具 - 编辑器篇前端开发工具 - 编辑器篇
前端开发工具 - 编辑器篇keelii
 
AJAX Search & Cross Domain Survey
AJAX Search & Cross Domain SurveyAJAX Search & Cross Domain Survey
AJAX Search & Cross Domain Surveyfirestoke
 
淘宝网前台应用性能优化实践
淘宝网前台应用性能优化实践淘宝网前台应用性能优化实践
淘宝网前台应用性能优化实践丁 宇
 
前端性能优化&测试
前端性能优化&测试前端性能优化&测试
前端性能优化&测试tbmallf2e
 
移动端Web开发性能优化实践
移动端Web开发性能优化实践移动端Web开发性能优化实践
移动端Web开发性能优化实践Mingel Zhang
 
EtherCodes中的HTML5
EtherCodes中的HTML5EtherCodes中的HTML5
EtherCodes中的HTML5Garry Yao
 
富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用luolonghao
 

Similar to 网站字体渲染 麦时 (20)

前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
 
Banquet 10
Banquet 10Banquet 10
Banquet 10
 
《网页设计与制作》第一章:网页制作基础
《网页设计与制作》第一章:网页制作基础《网页设计与制作》第一章:网页制作基础
《网页设计与制作》第一章:网页制作基础
 
13, io
13, io13, io
13, io
 
HTML & JavaScript
HTML & JavaScriptHTML & JavaScript
HTML & JavaScript
 
石玉磊 Web rebuild
石玉磊 Web rebuild石玉磊 Web rebuild
石玉磊 Web rebuild
 
白玉磊 Webrebuild
白玉磊 Webrebuild白玉磊 Webrebuild
白玉磊 Webrebuild
 
使用 .NET Standard 開發跨平台應用程式
使用 .NET Standard 開發跨平台應用程式使用 .NET Standard 開發跨平台應用程式
使用 .NET Standard 開發跨平台應用程式
 
Servlet & JSP 教學手冊第二版 - 第 1 章:簡介Web應用程式
Servlet & JSP 教學手冊第二版 - 第 1 章:簡介Web應用程式Servlet & JSP 教學手冊第二版 - 第 1 章:簡介Web應用程式
Servlet & JSP 教學手冊第二版 - 第 1 章:簡介Web應用程式
 
[3]投影片 futurewad樹莓派研習會 141204
[3]投影片 futurewad樹莓派研習會 141204[3]投影片 futurewad樹莓派研習會 141204
[3]投影片 futurewad樹莓派研習會 141204
 
网页设计及制作(Div+css)
网页设计及制作(Div+css)网页设计及制作(Div+css)
网页设计及制作(Div+css)
 
PHP & AppServ
PHP & AppServPHP & AppServ
PHP & AppServ
 
前端开发工具 - 编辑器篇
前端开发工具 - 编辑器篇前端开发工具 - 编辑器篇
前端开发工具 - 编辑器篇
 
AJAX Search & Cross Domain Survey
AJAX Search & Cross Domain SurveyAJAX Search & Cross Domain Survey
AJAX Search & Cross Domain Survey
 
淘宝网前台应用性能优化实践
淘宝网前台应用性能优化实践淘宝网前台应用性能优化实践
淘宝网前台应用性能优化实践
 
前端性能优化&测试
前端性能优化&测试前端性能优化&测试
前端性能优化&测试
 
Html5
Html5Html5
Html5
 
移动端Web开发性能优化实践
移动端Web开发性能优化实践移动端Web开发性能优化实践
移动端Web开发性能优化实践
 
EtherCodes中的HTML5
EtherCodes中的HTML5EtherCodes中的HTML5
EtherCodes中的HTML5
 
富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用
 

网站字体渲染 麦时

Editor's Notes

  1. 当浏览器收到来自 Web 服务器的网页数据之后,第一步是要把它解码成可以阅读的文本
  2. 1. 这一般有最高的优先级; 2. 对于 HTTP 头未指定编码或者本地文件,一般是这么判断; 3. 览器菜单里一般允许用户强制指定编码 4. 使用 基于统计的方法 判断未定编码。
  3. UTF-8 是 Unicode 的实现方式之一 , UTF-16 和 UTF-32
  4. 不确定编码可能会出现乱码,编码确定后,网页就被解码成了 Unicode 字符流,可以进行进一步的处理
  5. 编码确定后,网页就被解码成了 Unicode 字符流 为了统一处理所有这些复杂的情况,我们要将文本分为由不同语言组成的小段,在有的文本布局引擎里, 但是具体划分的规则可能根据不同的引擎有所区别,比如 HarfBuzz   和  ICU   一般是根据要使用的不同排版类来划分 ( 常称作“ shaper”) ,比如英语和法语可能使用同一个 shaper 排版,那么相邻的英语和法语文本就会划分到同一个 run 里,而希伯来文需要另一个 shaper ,就划分到它自己的 run 里,以 HarfBuzz 为例,它有这样一些 shaper : 在确定的语言、确定的字体下排版确定的文本,生成对应的字形和它们应该放置的位置、占用的空间 。
  6. 1. 点阵字体 通过点阵表现字形,其本质上只是一组图片。每一种字体变体都包括一组完整的字符,一个字符占一张图片。假设总字符数量为 3 ,即包括三个字符,提供粗体和斜体的组合(即无、粗体、斜体、粗斜体四种变体),该字体总共有 12 张图片。 PostScript 字体 PostScript 字体由 Adobe 公司为专业数字排版开发。它使用 PostScript ,字形以 3 次 贝兹曲线 描述,因此一组字体可以通过简单的数学变形放大或缩小。但是事实上,很大或很小的字体需要额外的信息( hints )才能好看。其下又分为 Type1, Type3 , OCF, CID 等类型。 Type 1 字体只有 1 字节,因此只能容纳 256 个字符。它使用 Adobe 私有的 hinting 系统,价格昂贵。需要注意的是,很多被称为 Type1 的字体实际上是 Type3 或 Type5 。 Type 3 字体完全支持 PostScript 描述性语言,可以勾画出较复杂的字体,如:渐变。 OCF 字体:中文日文等双字节语言可以使用的字体。按照 PostScript 类型,它属于 Type0 ( 也就是 Type1 或 3 的组合形式 ) CID 字体: OCF 字体的改良。具有异体字切换功能。按照 PostScript 类型,多数字体属于 Type9 (基于 TrueType 的 CID 字体等除外) [ 编辑 ] TrueType 字体 TrueType 是一种最初由 苹果电脑 公司开发的字体技术。考虑到 Type 1 字体太昂贵,有意用 TrueType 字体取代 Type 1 字体。像 Type1 字体一样,贝兹曲线用于描述字体,并可以内置点阵字体。现在它十分普及,在所有主要的 操作系统 上都有使用。能用 PostScript 打印机处理的 TrueType 字体称为 Type42. [ 编辑 ] OpenType 字体 OpenType 字体是为了实现 Windows 和 Macintosh 系统兼容,而产生的一种新字体格式;具有 TrueType 和 PostScript 两种形式,具有高度的异体字切换功能,并有动态下载功能,因此不需要打印机字体。若按照 PostScript 的类型分类,它属于 Type2 型,可以控制字体文件数据大小。 ------------------------ http://www.21haolou.com/articles/show/153 尽管我们最好不要完全依赖命名规则来判断字体底层所用的渲染技术,但字体的文件格式还是可以给我们提供了一些线索。比如 EOT 和 .tff 文件一定是 TrueType 字体,而 .otf 文件通常是 PostScript 字体。但是还有一种封装类型的字体格式 WOFF ,它可包含其中任意一种字体格式。因此光看文件名的话,我们还不清楚它包含何种字体,因此也就不清出它可能采用的渲染技术。除了 EOT 或 .ttf 文件必然是 TrueType 字体外,其他文件格式包含的是何种字体还无法完全确定。因此在购买字体时,你最好对所购买的字体做进一步研究。
  7. 都是轮廓字体 大于号 其他点阵字体 pmingliu 等
  8. 等宽: Monospace 手稿字体,模拟书法 具有特定效果的文本;如热情洋溢的字母、歪斜状特技的字母,以及从动物哪里形成的字母,等等
  9. 1.   为每种语言提供默认字体 比如 Notepad 上要显示一段文本,包括了英语、希伯来语和 Telugu 语,用户选用 Tahoma 来显示它。 Tahoma 是 Opentype 字体,支持英语和希伯来语的显示,但不支持 Telugu 语,所以当解析到 Telugu 字符时, Uniscribe 发现 Tahoma 无法显示字符,便使用 Telugu 的默认字体 Gautami 来显示它。这些默认的字体,用户无法增加或修改。整个过程对用户来讲是透明的,不需要用户去关心其中。 2. Font Linking - 为一种字体提供多种链接字体 比如,我们将 hangul 字体和 Japanese 字体链接到 Tahoma 字体上,也就说这里 base font 是 Tahoma , linked font 有两个,是 hangul 和 Janpanese 字体。这样,对于包含日文和韩文的文本,用户可以设定 Tahoma 字体来统一显示,对于里面的韩文,系统自动会用 hangul 字体显示。
  10. Win98 已经有 tahoma
  11. 苹果专注于还原字形设计的本来面貌,会用一些模糊的设计。而微软则更倾向字体的清晰,可读性 Core Text 尊重字体的外形设计,这使得字母将变的浑厚 The rendering on iOS follows the same principles as on Mac OS—the main difference is that it currently does not employ subpixel rendering. The reason might be that when the device is rotated, the system would have to re-think and update the rendering because the subpixels are physically oriented in a different way, and the makers wanted to minimize CPU use.
  12. windows 操作系统为用户提供了一些自定义选项供选择: ClearType(sub-pixel antialiasing- 亚像素抗锯齿 ), 标准 (grayscale antialiasing- 灰度抗锯齿 ) ,无抗锯齿 ( 黑白文本 ) 。在 Windows 7 and Windows Vista 中, ClearType 是默认开启的,而在 Windows XP 中默认开启的是标准 (Standard) 选项。在后面关于浏览器的文章里我们还会提到这些自定义的内容,某些浏览器是有自己的字体平滑选项的。
  13. DirectWrite 是微软最新最优的渲染引擎, Windows 7 和 Windows Vista 上都有。它比 CoreText 和 windows 上老版本的渲染引擎表现的更加清晰和平滑,且弱化了强烈的色彩边缘。相对于 CoreText , DirectWrite 在垂直方向的抗锯齿的表现显得更加平滑,并且抗锯齿不仅对文本自身有影响,还对字母水平方向 ( space letters horizontally ) 的空间有影响,也就是说,字母将相对更自然的一个接一个的摆放,相对于微软的老渲染引擎 GDI 也同样有这样的优势。 相对于 CoreText , DirectWrite 在垂直方向的抗锯齿的表现显得更加平滑
  14. 在 LCD 屏幕上水平方向的每一个像素点的会包含红、绿、蓝 3 中颜色。 总结下,大多数的文本渲染是以上 5 种类型中的一种。 Mac OS X 用户使用 CoreText , Windows7 和 Windows Vista 用户使用 DirectWrite 或 GDI,Windows XP 使用 GDI. 目前为止,我还没有涉及 Linux 和 Android 操作系统(如果你有相关经验,可在下面的评论区回复)。在接下来的文章里,将会看到偏好设置、浏览器、字体格式以及 CSS 属性它们对字体渲染的影响方式。
  15. Iso 渲染引擎一样 但是不是不是用亚像素抗锯齿 而是用灰度渲染
  16. Mac 操作系统中的浏览器 在 Mac 中,所有浏览器都使用系统默认的文本渲染引擎: Core Text ,以及字体平滑设置。所有在 Mac 上,不管你使用什么浏览器,字形的表现都是统一的。 Windows 操作系统: Firefox, Chrome, Safari, Opera, and IE6 一般来说,对于指定的字体,指定的操作系统,字形的表现会是统一的。上篇文章有说过, Windows 7 and Windows Vista 默认使用  ClearType sub-pixel antialiasing  , 而 Windows XP 则是  Standard grayscale antialiasing 。 Windows: IE7 and 8 IE7 默认有个称作“总是使用 ClearType” 的设定,它重写了系统的字体平滑设置。也就是说就算你使用 Windows XP 操作系统,它也是这样。 IE8 像 I7 一样,也默认有这样的设定。但是区别是,当安装了 IE8 后, 它会强制把系统的字体平滑设置改为 ClearType 次像素渲染。这就意味着这个设定是系统级的,影响是全面的。举个例子,假如你现在用 Window XP 操作系统,使用的是 Firefox 浏览器,而且你也没有自定义过 Firefox 的设置,但是当你现在安装了 IE8 后,你的 Firefox 也会和 IE8 保持一样了。 Windows: IE9 and Firefox 4 IE9 的文本渲染是别具一格的,它统一使用微软的 的 DirectWrite 文本渲染引擎,其可以使字形看起来非常不错。 Firefox4 据说也会使用 DirectWrite 文本渲染引擎。
  17. 字体光栅化 是将文字从一个向量表示(比如一个 TrueType 字体)转化到光栅或者位图表示的过程。在这个过程中往往涉及到一些抗锯齿技术来使得屏幕上的字体更加平滑易读。这也经常会涉及到 " 字体微调 ( font hinting )" 技术。
  18. 说明大致 梁海 江疆