认识字体渲染 - 博客 - 伯乐在线
& 认识字体渲染
| 标签： , , ,
在Mac OS系统上对网页截屏，然后打开图片不断放大观察。你会发现黑色的文字居然不完全是纯黑色的！（Windows 7下IE9使用微软雅黑字体也可以看到这个现象）。肿么回事，这不科学！读完这篇文章后你就都懂了。
为什么相同的字体，在Mac OS上的显示效果「看起来」要比Windows上好看？这个问题我一直没有搞清楚，昨天偶尔看到有关字体渲染方面的一篇文章：，终于对字体渲染有了一些认识。这篇文章是我对字体渲染知识的归纳总结，只挑重点写。
一个理想和三种实现（渲染策略，Rendering Strategies）
理想的形状
理想中的文字，指的是使用矢量图形描述出来的形状。矢量图形是在计算机图形学中使用数学方程表达的几何形状（点、线和多边形等）来绘制图像。这样抽象的描述可能比较难懂，可以理解为矢量图形是「e这个字母的形状是数字9翻转过来的图形」这种描述的数学版。
如何将这种抽象形状描述转化为展示在显示器上字体呢？这需要引入一个新的术语——栅格化（Rasterization），栅格化指的是将理想中的形状转化为一个一个像素的这个过程。我们的显示器、手机屏幕实际上都是有无数个发光的像素点构成的，它们在单位面积排列得越密集显示效果越精细（PPI，像素密度）。你可能已经注意到，理想形状示意图里的字母e并不能和灰色的网格（可以理解为像素点）对应起来，尤其是曲线的边缘，只占了网格的一部分。由于我们所能控制的最小单位就是像素，便造成了理想和现实间的差距，如何让以像素为基础的屏幕更好的表达我们理想中的文字形状，牛X的前辈们发明了三种字体渲染策略，后面一一道来。
初代：黑白渲染（black-and-white rendering）
黑白渲染是最早人们使用的渲染技术，这种渲染方式只使用黑白两种颜色来表达文字的形状。还记得Windows的蓝天白云界面上的文字显示效果吗？还有Dos和PC机器启动时候的提示文字，都使用了这种渲染方法。在显示屏幕上，少量的像素点并不能很好地传达字体微妙的形状变化，在圆的边缘轮廓上我们就会发现锯齿。这时字体渲染技术还处在初级阶段。
二代：灰度渲染（Grayscale rendering）
在上世纪90年代中期，我们的前辈们开始使用一种非常巧妙的方法，可以说是黑白渲染的优化版。灰度渲染可以控制每个像素的明暗，让字形边界看起来过渡平滑。处于字形边界上的像素亮度取决于自身被理想形状所覆盖的面积比值。这样，字体轮廓看起来就更平滑，字体设计的细节也得以再现。字体在屏幕上看起不仅清晰——而且还能体现字体本身特征及风格。我们人眼和大脑在解读灰色像素中信息时，将它转换为了形状的轮廓，因此我们感觉这样渲染后的效果更加接近原始的形状。
三代：亚像素渲染（Subpixel rendering）
隆重介绍 ，第三代渲染技术，它一个重要特征是引入彩色像素。如果我们将屏幕截屏放大，发现字体边缘呈红色和蓝色，那么我们就可以知道它采用的是亚像素渲染技术。 有趣的是，这一渲染技术和显示技术的发展是息息相关的，在液晶显示屏（LCD）上，一个像素是由红、绿、蓝三个子（亚）像素构成的，LCD能够做到单独控制每一个子像素的开关。LCD屏幕像素在显微镜下的样子：
因为这些子像素非常小，以至于人眼无法察觉到他们是一个个独立的颜色点。与单纯的灰度渲染相比，水平方向的分辨率翻了三倍。竖笔的位置及粗细就可表现的更为精确，文本外观也就更为清晰。
通过观察，我还发现亚像素渲染总是把暖色放在左边（如上图的红），冷色（如上图的蓝）放在右边，据我自己的猜想这很有可能与从左向右的阅读顺序有关。这样的设计从视觉上会感受到光源是从左边进入，增加字体的立体感，让阅读更加舒适。（这仅仅是我个人的猜测，如何有人能从色彩原理上解释这一点，请一定要告诉我）
下面图片是我在Mac OS上的Finder侧边栏截图放大，仔细观察文字后半部分能体现出这种微妙的感觉：
在各种操作系统中的应用情况
了解完了三种字体渲染策略，我们来看一下各种操作系统对渲染方式的选择。
Windows系统
在Windows系统下，使用什么渲染技术取决于使用什么样的字体，以及应用程序的设置。Windows系统有两套图形文字渲染接口，一个是GDI，另一个是Windows Vista之后推出的DirectWrite，用于取代老的GDI。严格来说，微软自己的亚像素渲染技术有另一个名字——，这个技术与两套图形文字渲染接口是被包含的关系。
ClearType在微软自家系统和程序中支持情况如下：
Windows XP (off by default)
Windows Vista (on by default)
Windows 7 (on by default)
Microsoft Office 2007 and later (on by default)
Internet Explorer 7 and later (on by default)
Windows Live Messenger (on by default)
字体渲染策略与浏览器和字体格式的关系：
PS-webfonts指的是PostScript字体，TrueType 和 PostScript 区别在于在描绘曲线时所有的数学方法不一样，只有字体设计人员才需要了解两者的区别。感兴趣想要深入了解可以自己Google资料学习。
Windows系统为了兼容性，提供了大量的选择权给应用程序和系统，最终的结果是在Windows系统上的文字阅读体验不够统一，有的地方看上去不错，有的却无法直视。这和Windows系统整体的生态环境是息息相关的，它需要支持各种各样的屏幕和分辨率，再加上我们之前提到的亚像素渲染技术是和LCD液晶屏幕的物理属相息息相关的一项技术，不同的LCD像素排布都需要做相应的适配，加大微软完善这一体验的成本。
Mac OS 系统
在Mac OS系统上，所有浏览器使用的是Quartz渲染引擎，这个引擎据说非常可靠。TrueType和PostScript字体都是以同样的方式渲染的，也就是使用了亚像素渲染技术，渲染提示（hinting）被故意忽略了，而这正是两类字体在概念上最大的差别，Mac OS对PS和TrueType字体同等对待，不管它们那些不一样的特性。Mac OS的字体渲染技术不会试图理解构成字体的笔画及特征。字母形状不会解读，因而也就不会出现曲解的情况。另外苹果似乎也会应用一些精妙的自动化措施增强渲染效果，但是这类自增强的技术没有文档说明，我们无从得知这背后的细节。在Mac 上另外碰到的一个难以控制的现象是，字体会渲染的更重些。在文本字体大小下，这点差异尤其明显。同样的字体在Mac OS上看起来有点浓稠，而在Windows上则看起要清淡些。
Mac OS系统只运行在自己的Mac上，Apple在字体渲染方面更容易给用户一个统一的体验，再一次体现了软硬结合的优势。
「Mac上字体看着比Windows好看」其实是几年前Windows XP时代的刻板映像。 应该来说，在不同操作系统上，字体渲染技术的区别正在缩小，随着微软DirectWirte的普及，Windows和Mac OS在字体渲染方面的区别仅在于他们对字体显示的理解和偏好。Joel Spolsky 的
一文解释了两者的区别。
苹果总体上认为，（字体渲染）算法的目标应尽可能还原字体的设计，即使代价是造成些许模糊。
微软认为，字符的形状应和像素契合，以防止模糊，提高可读性，即便扭曲了字体的构造。
更令人惊叹的是，针对LCD优化的Subpixel rendering技术，居然在1977年的Apple II 的图形显示中就已经被发明了，比微软宣布ClearType技术整整早了22年。Steve Wozniak，Apple II的设计师和这项专利的拥有者对究竟是谁先发明了这项技术的回复如下：
“Back in 1976, my design of the Apple II’s high resolution graphics system utilized a characteristic of the NTSC color video signal (called the ‘color subcarrier’) that creates a left to right horizontal distribution of available colors. By coincidence, this is exactly analogous to the R-G-B distribution of colored sub-pixels used by modern LCD display panels. So more than twenty years ago, Apple II graphics programmers were using this ‘sub-pixel’ technology to effectively increase the horizontal resolution of their Apple II displays.”
具体的争论细节可以八卦 。
虽然当时这项技术是运用在NTSC信号上的，但技术的思路都是一致的。乔帮主当时是有一个多牛X的技术团队呀，对帮主的敬畏有多出了几分！
最后，给大家留个悬念，在iPhone或者安卓手机上找一个网页打开截屏，图片拿到电脑上不断放大后，你会发现手机上的字体渲染并没有使用亚像素渲染，这是为什么呢？^_^ 答案留给你去寻找吧。
手机分辨率已经足够高，不需要使用亚像素渲染了，同时可以降低CPU的占用
为作者带来更多读者；为读者筛选优质内容；专注IT互联网。
最新评论（期待您也参与评论）
汇集优质的Python技术文章和资源。人生苦短，我用Python！
JavaScript, CSS, HTML5 这里有前端的技术干货！
关注安卓移动开发业界动态，分享技术文章和优秀工具资源。
关注iOS移动开发业界动态，分享技术文章和优秀工具资源。
为作者带来更多读者；为读者筛选优质内容；专注IT互联网。
由数百名译者组成，立志翻译传播优秀的外文技术干货。
一个专门为IT单身男女服务的征婚传播平台。
收录优秀的工具资源，覆盖开发、设计、产品和管理等。
关于伯乐在线博客
在这个信息爆炸的时代，人们已然被大量、快速并且简短的信息所包围。然而，我们相信：过多“快餐”式的阅读只会令人“虚胖”，缺乏实质的内涵。伯乐在线博客团队正试图以我们微薄的力量，把优秀的原创/译文分享给读者，做一个小而精的精选博客，为“快餐”添加一些“营养”元素。
欢迎关注更多频道
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选博客文章
– JavaScript, HTML5, CSS
– 专注Android技术分享
– 专注iOS技术分享
– 专注Java技术分享
– 专注Python技术分享
（加好友请注明来意）
网站使用问题
请在询问或者反馈
& 2015 伯乐在线
赞助云主机， 赞助云存储求“半妖”的古代字体怎么写？_百度知道
求“半妖”的古代字体怎么写？
各种古代字体```` 随便什么朝代的````
提问者采纳
“半妖”两字没有繁体字。古代也是这样子的。
其他类似问题
为您推荐：
字体的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁汇聚2000万达人的兴趣社区下载即送20张免费照片冲印
扫码下载App
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
喜耀四（2）是一个团结、友爱、上进的班集体,集体里的每个个学生都是好学生！
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
&我有一个好同学叫肖伟轩。他个子不高，瘦瘦弱弱的，瓜子脸，脸色白白的，一眼看上去就是个文弱书生的样子，但如果你真的以为他是书呆子一个，那就大错特错了。
能跟我这个爱说爱玩的调皮蛋做死党的，绝不会仅是书呆子一个。虽然他也爱看书，特别是有意义的书。但他也跟我一样，爱说爱跳爱玩特别爱上体育课。
在课外活动时间和体育课时间里我们常常一起玩游戏和打球。让我想不通的是他小小的身躯里怎么会有那么多的能量。
有一次体育课，老师教我们学抛铅球，然后同学们进行铅球比赛。结果抛得最远的既不是我们班最重的同学也不是最高的同学，而是看起来瘦瘦弱弱的他。只见他就这么轻轻松松的一扔，铅球就被他远远的抛了出去，一抛就是24.30米。太让人佩服了，大家立刻送了一个“铅球王”的称号。今年，他代表我们班的同学参加校运会比赛，还得了一等奖呢！
至于他为什么会和我成为死党的呢，那里头还有一段小小的故事。有一天课外活动的时候，我们班和隔壁班的同学进行篮球比赛，我和肖伟轩都参加了。比赛开始后，大家的实力一直都不分上下，分数一直拉不开，不是我们班多一分两分，就是四（1）班多一分两分。好胜的我们心可真急了，我们不停地互相打气。最后在我们的努力之下，我们班终于险胜了四（1）班。我们太开心了。在吃饭的时候，肖伟轩大声地对我说：“炳，我们这一场球赛配合得太好了，你永远是我的死党！”
从此以后，我们的友谊更深了。我相信我们的友谊会永远继续下去，直到地久天长。
阅读(274)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_082069',
blogTitle:'我的死党[写好一个人物][黄炳德]',
blogAbstract:'&
&我有一个好同学叫肖伟轩。他个子不高，瘦瘦弱弱的，瓜子脸，脸色白白的，一眼看上去就是个文弱书生的样子，但如果你真的以为他是书呆子一个，那就大错特错了。
能跟我这个爱说爱玩的调皮蛋做死党的，绝不会仅是书呆子一个。虽然他也爱看书，特别是有意义的书。但他也跟我一样，爱说爱跳爱玩特别爱上体育课。
在课外活动时间和体育课时间里我们常常一起玩游戏和打球。让我想不通的是他小小的身躯里怎么会有那么多的能量。',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:9,
publishTime:3,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'喜耀四（2）是一个团结、友爱、上进的班集体,集体里的每个个学生都是好学生！',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}