网站字体渲染麦时

Timezhong

www.wheattime.com

解码分段字体库字体排版引擎光栅化

解码

将字节流解析为字符

1.Web 服务器返回的 HTTP 头中的 Content-Type: text/html; charset=“”

2. 网页本身 meta header 中的 charset 部分

3. 浏览器菜单里一般允许用户强制指定编码

4. 部分浏览器 ( 比如 Firefox) 可以选择编码自动检测功能，使用基于统计的方法判断未定编码。

ASCII GB2312

Big5Unicode UTF-8

23/4/12

分段：将文本分为由不同语言组成的小段

•Win:C:\Windows\Fonts

•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

网站字体渲染 麦时

Documents

网站字体渲染麦时