作者：(德)Smashing Magazine
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
众妙之门——网页排版设计制胜秘诀试读：
内容提要
本书是Smashing Magazine网站的精选文章合辑，旨在帮助读者提升网页版式设计水平。本书囊括了字体抗锯齿技术，网页排版的原则，网页字体的设置技巧，CSS字体堆栈指南，CSS3的新特性，网页字体服务推荐以及排版工具介绍，等等。
还在为网页排版苦恼吗？想设计出别具一格无与伦比的网页吗？想了解基本的网页编程知识吗？想成为设计与开发的双面手吗？本书将是你的最佳选择。第1章字体抗锯齿技术Tom Giannattasio
得益于高分辨率带来的优势，印刷字体可以傲人地展现出漂亮的曲线和细节。然而一旦到了屏幕上，却因为精度不够而出现锯齿边缘，形变并丢失细节。在200或300PPI（分辨率）的显示器大规模普及之前，我们将不得不依赖软件技术来解决这些问题。
首先让我们来看抗锯齿技术。除了更高分辨率的显示器，这是最令人振奋的消息了。它的原理相当简单：沿着字体的边缘增加半透明的像素点，从而达到平滑阶梯状锯齿的效果。
当然，在这个过程中，有很多因素会决定最后的呈现效果，如字体微调、次像素渲染、软件性能、操作系统规范等，此处不一一列举。
现在，让我们看看作为设计师的你，如何用Photoshop、Flash和CSS来改善抗锯齿技术的效果。另外，我们也会解释硬件、浏览器和操作系统所带来的限制。1.1 技术
1.1.1 锯齿（aliased） Vs.抗锯齿（anti-aliased）
只需稍加注意就能发现，抗锯齿技术对于文字的清晰度有重要的影响。除了极少的例外，经过抗锯齿处理的文字能显著减轻用户的眼部负担，而且渲染后的字形更接近预期设计。
因此，设计师如果想得到好的设计效果，就应该有意识地使用抗锯齿技术。此外，还需考虑从设计到输出整个过程中的诸多因素。
42pt“Goudy Oldstyle Bold字体”的锯齿和抗锯齿版本。
1.1.2 字体微调（font hinting）
大多数字体渲染引擎都是依靠微调来确定哪些字形区域应该平滑处理。字体微调使用数学指令表格将字形与像素网格对齐，并确定哪些像素应该采用哪个灰度。尽管多数软件都提供了标准算法的自动微调，但是理想的做法还是由字体设计师手工调整，并嵌入文件中。
简单来说，这些指令是通过修改一些结构上重要节点的位置来实现功能的。例如，当指令找到那些在字形曲线或在字体主干（stem）上的点，就令它们在像素边界上对齐。次要的点则基于重要节点的位置来重新定位。而诸如FontFore这样的开源字体编辑工具，则允许你查看并编辑字体的微调信息。在了解了清晰字形的形成需要投入那么多的工作之后，你一定对字体设计师和开发人员增加了几分感激。
经过微调和未经微调的字体各有其利弊，设计师要根据字体的易读性和完整性来做出选择。
用FontFore字体编辑器查看对Goudy Oldstyle字体的“H”所做的微调。
1.1.3 次像素渲染（subpixel rendering）
每一个像素在标准显示器上都由三部分组成：一个红次像素点、一个绿次像素点和一个蓝次像素点。每一个次像素点的亮度都可以单独控制。因为它们的尺寸非常小，所以我们的肉眼会将这三个次像素点视为一个纯色像素点。
标准的抗锯齿技术是精确到为每一个次像素点设置值，从而获得全灰度像素图（full grayscale pixel）。次像素渲染利用每个单色组成的独立性，来使感知到的显示器分辨率进一步增加。
这使所有的像素点都可根据其临近的像素点来平衡视觉权重，从而使字体能以更小的增量被平滑。用这种方式渲染的字体可在字形边缘看到微弱的色彩变化。
次像素渲染需要依靠完美的像素网格对齐，这使得液晶平板显示器（LCD）成了这项技术唯一可选的显示器。显像管显示器（CRT）因为不够精准和像素分布不规则，致使次像素渲染技术难以实现。
值得一提的是，不同液晶显示器的次像素排列也不相同：有些显示器是按照RGB的顺序来排列，而有些则是按BGR的顺序来排列。
次像素渲染通过对每个单色组成进行单独设置，可使感知到的分辨率提升3倍。
次像素渲染比标准渲染的效果更令人满意，但会产生彩色边缘。1.2 输入
作为设计师和开发人员，我们很难控制终端用户最终以何种方式来查看字体，但是通过使用适当的传输方法，还是可以确保表现效果最佳。现在最常用的三种将文字输出到用户的方式为：HTML、图片和sIFR。只要应用得当，每一种方式都能获得理想的效果，大幅提高可读性，从而提升整体的用户体验。
1.2.1 HTML文本
HTML文本无疑是互联网上最主要的文本形式。之前设计师们完全不能用客户端技术来实现抗锯齿技术，现在可以了。CSS3引入了两种新方法来控制HTML文本的传送：font-smooth和@font-face。
1.2.2 font-smooth
Font-smooth允许你控制使用平滑的时间，但无法控制使用平滑的方式；这种抗锯齿方法仍然受控于用户的使用环境并且尚未得到广泛支持。但它有一项功能是允许关闭抗锯齿，这在我们遇到小号字体时很有用，因为小号字体经过抗锯齿处理经常会变得模糊不清。当碰到更复杂的、非浏览器安全字体时，结合新的@font-face规则可使效果加倍。
1.2.3 @font-face
@font-face规则是一个令人兴奋的CSS3新特性，设计师们对它期待已久。尽管我们随时可往字体堆栈中添加高级字体，但绝大多数的客户端设备并没有高端字体，最终只能显示为标准网页安全字体（例如Times New Roman字体替换Adobe Garamond Pro字体）。
通过允许浏览器从URL导入字体，我们可以将任何字体呈现给用户，而不再局限于用户的字库。这意味着我们不但能表现更加独特的字体，而且字体效果比经过微调的更好、更易辨识。
尽管这一特性有望创建一个更完美的线上字体环境，我们仍会发现设计师选择了像Verdana这样的字体，其专为屏幕显示做过特殊设计和微调。一些我们钟爱的印刷字体放到屏幕上一经渲染看起来却很糟糕，尤其是小号字体。
对@font-face特性的支持，以及通过typekit等工具实现的浏览器字体嵌入，无疑将使我们看到新的行业前景。
Bickham Script Pro字体通过@font-face嵌入Safari 4和Firefox 3浏览器。注意OpenType字体的斜体（swash）和连字（ligature）在Firefox 3浏览器上得到支持！
1.2.4 以图片呈现的文字
以图片形式来呈现文字的情况可能很少见，但它允许你在必要情况下调整每一个字母。Photoshop提供了5种抗锯齿预设，这些设置通过不同算法可确定连接到文件像素网格的像素值。遗憾的是没有一种预设允许次像素渲染，但你可通过自由变形工具（Free Transform）来微调图层位置，从而有效地加强算法使渲染更清晰。
每种设置都允许不同数量的原点，有些仅在沿着x轴方向转化时才会发生变化。下面的表格列举了可转化的范围。
1.2.5 无（None）
用“无”设置选项生成的锯齿字体使用非常有限，通常9～18号的字体显示效果最好。更小的字体将无法识别，而更大的字体又会被加粗并出现明显的锯齿边缘。有时两个大小不同的字体以相同高度被渲染，会造成字母间距（letter spacing）、字母宽度和x字高（x-height）的改变。
例如， Arial的14pt字体是按照10像素高和8像素x字高来渲染，而同种13pt字体也是10像素高，但x字高却只有7像素，虽差异细微但感觉很不同。当字体紧排的时候，这项设置可能还需要手工调整，否则一些字母会挤成一团。
13pt和14pt的Arial字体以相同的字母高度（cap height）但不同的x字高来渲染。
1.2.6 锐利（Sharp）“锐利”设置选项使用了非常紧密的网格对齐来达到锐化字体的效果。如果处理得当的话，这种方法和“无”设置选项的绘制方法非常相似，但增添了一些平滑效果。事实上，如果将像素点重叠，也能看到大多数纯色像素点从“无”变成了“锐利”效果。
虽然大写字母高度和x字高一般保持不变，但字符粗细和宽度会改变。
注意，“锐利”选项在渲染过程中往往趋向于完全去掉细节，所以有时会造成字体变形，如果字体的完整性对你来说很重要的话，就要考虑采用别的设置选项。
1.2.7 犀利（Crisp）“犀利”设置选项能很好地保持字体原有的粗细和曲线，而清除由细衬线或细描边产生的多余像素，这对大号字体特别有用。
不过用“犀利”选项的话，你就不能沿y轴做图层微调了。
1.2.8 浑厚（Strong）“浑厚”设置选项会给字体笔画增加不必要的粗细，但它却为原点变化提供了最大的调整自由度——32格的x轴和16格的y轴变化范围。
当处理复杂字形的时候，这个选项的原点变化就非常好用。“浑厚”选项对处理细描边的字体也很实用。
动画展示了36pt、18pt和12pt字体的32格抗锯齿效果。
1.2.9 平滑（Smooth）“平滑”设置选项最接近无微调抗锯齿，所以它能保持最精准的原始字形。这种算法在中到大号字体上表现最好，因为其渲染效果很轻微，较小号字体会因此显得模糊。若使用适当的字体及字号，且原点也被适当调整过，那么这个设置能在清晰度和字形完整之间取得平衡。
1.2.10 图形图层（Shape Layer）
如果Photoshop的所有微调算法都无法令你满意，不妨试试无微调抗锯齿方法——将文字转换成图形图层。你可以获得字体原本的轮廓，它基于图形内像素点的百分比来定义值。为了弥补无法编辑字体的缺陷，你可以在x和y轴对原点进行32格的范围调整。总之，不要排除使用图形图层的可能性，它往往会产生比Photoshop算法更好的效果。
1.2.11 分数宽度（Fractional Width）
另一种抗锯齿设置就是分数宽度选项，它位于字符面板的下拉菜单中，可针对小号字体。若开启本选项，字符的间距将设置成可变像素分数值。用它处理自动调整字距的大号字体很理想，但较小的字体不是挨得太紧就是间距太大。关闭这个选项将使字体间距还原成整数像素值，可帮助有问题的字体优化间距。这个选项效果不固定，使用时要看情况。
1.2.12 小数尺寸（Decimal Point Sizes）
搞印刷的人也许会对带小数点的尺寸感到畏惧，但设计数字媒体的时候，标准的整数尺寸并不总是和像素网格对齐的。无论在“平滑”还是“浑厚”的抗锯齿设置选项中，使用带小数点的尺寸往往可使模糊的字体重新聚焦。请注意，不要过度使用横向或者纵向的拉升！
使用小数能明显加强抗锯齿效果，如上所示。上：16pt Goudy Oldstyle“浑厚”抗锯齿。下：16.5pt Goudy Oldstyle“浑厚”抗锯齿。
1.2.13 sIFR文本
使用sIFR技术将标题替换为Flash的好处相当明显。它不但能解决为提供更多字体支持而必须使用CSS图片替换技术的问题，同时还能实现字体抗锯齿。在“锐化”和“浑厚”设置中特别有用，因为它们可以控制字形的边缘（要是Photoshop也有这些设置就好了）。
你可以通过设置和调整设置选项来达到你想要的效果，在sifr-config.js文件中传递关键词参数来控制它们。这些设置包括以下参数。
1.2.14 锐利度（数值）
数值范围为－400～400，它定义了字形边缘的锐化（正数）程度或柔和（负数）程度。
1.2.15 厚度（数值）
数值范围为－200～200，它定义了字形边缘的厚度。
1.2.16 gridFitType（字符串）
可用值是：“无”、“像素”和“次像素”。它指定了横向和竖向线条对齐到显示器像素网格的方式。“像素”和“次像素”通常能产生最佳的效果。
1.2.17 antiAliasTpye(字符串)
这个字符串的默认设置是“高级”，它允许上述的抗锯齿设置被应用。也可设置成“正常”，但这个选项使sIFR的渲染效果仅适用于早期的Flash播放器版本，且会忽略上述的所有性能。
sIFR允许自定义设置抗锯齿选项。注意，自定义设置会稍微纤细清晰一些。1.3 输出
1.3.1 显示器
因为很少有人拥有比100PPI（分辨率）更高的显示器，我们不得不依靠软件来欺骗人们的眼睛，让他们以为看到了高于物理分辨率的画面。尽管显示器生产商们正在努力改进，但仍未能达到普通网页用户的期望值。
一台标准的LCD显示器的分辨率点距（dot pitch）在0.2 ～0.3毫米。而新型显示屏，如强诱电型液晶显示屏（Ferro Liquid Crystal display）据称可以把这一数值降低到0.012毫米。如果这项技术成为主流的话，将会显著提高全球范围内的设计及屏幕阅读体验。然而，在普通消费者能够承受得起这样的显示屏之前，我们还是得依靠软件。
1.3.2 操作系统
微软（Microsoft）和苹果（Apple）公司都在抗锯齿领域取得了进展，但它们的实现方法各不相同。目前两家的操作系统都使用了抗锯齿和次像素渲染技术，且都在操作系统上大幅提高了易读性，但随之而来的还有争议。
微软公司靠以对齐网格为特点的ClearType技术加入到这场竞争中来。通过强制字符紧密对齐像素网格，ClearType增加了字形边缘的对比，使字体渲染得更清晰。
苹果公司的Quartz 2D技术则完全不同，它把重点放在了保持字体的形状和完整性上。这无疑是有道理的，因为在使用MAC的用户中，设计师的比例相当高。但是Quartz渲染字体往往较模糊，过量的阅读会造成眼睛疲劳。
Windows Vista和Windows XP都使用了ClearType渲染技术， Windows Pre-sentation Foundation（后简称“WPF”）或者Graphics Device Interface（后简称“GDI”）。这两种技术处理字体的方式非常相似，但WPF不在水平方向上对齐像素网格。Windows XP事实上采用的是单色抗锯齿技术（monochromaticanti-aliasing）。
ClearType可以被开启，通过“控制面板”>“显示和个性化”>“显示”，点击“显示”选项卡，选择“效果……”，再将下拉菜单从“标准”切换到“ClearType”即可。操作系统允许用户对ClearType做少许自定义，就是基本的开启和关闭选择。然而，微软的ClearType Tuner PowerToy允许用户对渲染方式进行一些控制。Windows 7还引入了一个新的渲染平台，叫作DirectWrite，采用了次像素定位和y轴抗锯齿。
苹果的Quartz 2D最近使用Core Text取代了Apple Type Services来渲染字体。Quartz 2D显示的字体非常接近原先的设计，即接近你期望看到的打印效果。
虽然从设计角度来看这是个不错的办法，但它并不能保证清晰度，至少在普通的LCD显示器上不行。如果我们使用的是高分辨率显示器，可以想象Quartz文本的显示效果会更好。
1.3.3 浏览器
现今大部分的浏览器都承袭了操作系统的抗锯齿设置。但是有一个例外， Firefox 3置入了Mac OSX操作系统的设置，而且似乎还应用了更精确的网格对齐和字距调整。也许Mozilla将试图改善Quartz的模糊渲染。
遗憾的是，我们没有办法控制，甚至不知道用户浏览器会如何渲染字体。我们能做的就是意识到每种浏览器都会有细微差别，并确保我们发布的版本适用于所有的浏览平台。
以下是一个浏览器性能和范例字体的列表，它可帮助你初步了解各个浏览器是如何处理抗锯齿的。
Windows XP与Vista
•IE6, IE7 and IE8：
•Firefox 2 and 3:
Safari 4:
•Chrome:Firefox 2在OS X上：OS X上的Firefox 3（置入了操作系统的设置但细微加强了字距调整——特别注意观察“Georgia”这个词） ：
•Safari 4 in OS X:
•Opera:1.4 总结
尽管屏幕上的字体渲染已经取得了很大进步，但本质的问题没有解决。只有当每个人的桌上都有一台200PPI（分辨率）的显示器的时候，设计师和开发人员才能自由地运用恰当的技术，确保字体清晰易读又能维持原先的设计。第2章提高网页版式可读性的10项原则Matt Cronin
可读性是评估网页设计可用性最重要的因素之一。文本的可读性会影响到用户对内容的理解。文本可读性低会使读者对内容敬而远之；而文本可读性高，读者的阅读效率也会提高，并且能够正确理解文本所包含的信息。我们都希望读者能轻松阅读网页上的文字内容并理解其含义。
首先，我们将阐释网页版式中的一些专业术语，以及它们如何影响可读性；其次，我们将介绍许多设计技巧，帮助你提高内容的可读性；最后，我们还会展示一些极具可读性的网站、版式和文章。2.1 专业术语及其内涵
影响文本可读性的因素有许多，相关的术语也有很多，它们都非常重要。下面是一些常见的网页版式术语及其对可读性的影响。
1.层级
所有的版式设计都要包含层级这个必要元素。
层级决定了读者阅读版式内容的方式。它告诉读者该从何处开始阅读，该以什么顺序阅读。它将标题与正文内容区分开。虽然用颜色框也可以将标题和正文分开，但层级强调的是从尺寸上将这些元素区分开。版面是否易于浏览，层级在其中起到了很关键的作用。这是一个很重要的技巧，为了使网页版式更具可读性，我们必须掌握它。
UXBooth网站的版式层级非常清楚，可读性极高。
2.对比
网页文本是否易读，对比在其中起到了极为关键的作用。
如果对比应用得当，读者就能轻松辨识文字，快速浏览文字，从
试读结束[说明：试读内容隐藏了图片]