Web 页面之美，美在何处？在于字形传达出来的情感，在于版式对信息的合理分割和布局，在于与阅读场景的完美契合。而这一切的重中之重在于字体。本书就教授怎样通过字体的设计、选择、搭配与布局，制作出带给人美感，帮助读者理解和找寻信息的Web 页面。
全书分为四篇：第1 篇详述如何从字体风格、字形特征、易读性和协调性来挑选字体，夯实基础；第2篇讲述如何通过分块、标题设置、构造布局等来设计适合浏览的网页；第3 篇讲述如何根据读者的阅读方式来设置导航系统、应用栅格系统、创建字体库等，从而设计适合休闲和持续阅读的网页；第4 篇详述了三种排版风格：传统风格、现代主义风格和后现代主义风格，指出了各自适用的场景。作者将传统印刷中的版式设计原则提炼出来，应用到Web 页面；同时，也总结了近些年Web 页面排版的一些经验。书中附带了很多实用的HTML 和CSS 代码示例，并配有相应的练习，方便读者一边学习一边实践。
全书分为四篇：第1 篇详述如何从字体风格、字形特征、易读性和协调性来挑选字体，夯实基础；第2篇讲述如何通过分块、标题设置、构造布局等来设计适合浏览的网页；第3 篇讲述如何根据读者的阅读方式来设置导航系统、应用栅格系统、创建字体库等，从而设计适合休闲和持续阅读的网页；第4 篇详述了三种排版风格：传统风格、现代主义风格和后现代主义风格，指出了各自适用的场景。作者将传统印刷中的版式设计原则提炼出来，应用到Web 页面；同时，也总结了近些年Web 页面排版的一些经验。书中附带了很多实用的HTML 和CSS 代码示例，并配有相应的练习，方便读者一边学习一边实践。
前言
已经有几十年了，批评家们预言书面文字行将就木：“没人阅读了！没人阅读了！” 然而从出生证明到坟前墓碑，从 T 恤衫到短信，写下来的文字——以及随之而来的阅读 ——已经渗透到了我们每天的生活里。
纵观历史，我们一直在用书面文字记录、保存“我们是谁”和“我们关心什么”：财产、法律、承诺、想法及记忆。曾经刻在陶土上、写在纸莎草纸上，以及使用墨水印制的文字与语句，如今借着像素的光呈现着（见图1）。
人们仍然阅读
在日常交流中，人们对短信的使用量大大增加，短信已超过语音通话成为沟通首选 ——这表明，我们每个人与阅读和书写的联系都在持续增强。
如 Jessica Helfand在2000 年所写，“……文字就是正等着被阅读的思想，而阅读永远不会消亡。阅读是你通往世界的门票。” 人们需要阅读。他们需要寻求连接社群的纽带、解决问题的答案、提高技能的课程，以及影响他们生活的新思想。
人们或许不再像往常那样（或者说像我们认为的往常那样）进行持续阅读了。他们发短信、发推特、发 Facebook 状态，他们找寻需要或者想要知道的，他们会完全沉迷在那些内容中，他们阅读他们觉得重要的东西。
重新定义阅读
如果我们将阅读定义为持续的文学活动——如果我们只认可这一种阅读方式，那么我们就是在缘木求鱼。我们忽视了实际情况，排斥了人们真正需要和渴望的方式。
事实情况是阅读方式有很多种，并且这些方式都是有效和重要的。作为版式设计师，我们可以全部支持。
人们有三种阅读方式：
y 带着目的浏览是指水平或者竖直方向快速浏览文字，从一个章节跳到另一个章节，不断寻找某一特定信息片段。读者可能只看每个章节开头的几个字符或者单词就迅速做出判断，跳过不匹配的，然后继续。
y 休闲阅读是指跳跃地浏览一段文字，阅读其中的一两句话（例如每个段落的第一句、标题、引用）从而了解该图1 文字与字符承载着信息与想法飞跃五湖四海，如今借着像素的光向读者呈现。向 Beatrice Warde （ http://en.wikipedia.org/wiki/Beatrice_Warde ）致敬，他于 1932 年创作并设计了原作This is a Printing Office大报。段文字的大致想法与风格。
y 持续阅读是指投入地阅读，包括为求娱乐的阅读和为求理解的阅读。读者们会慢下来、阅读整段文字，或许还会入迷。
作为版式设计师，我们的首要责任就是为我们的读者服务。我们最重要的工作就是帮助读者找到、理解并关联上他们寻找的文字、想法及信息。
?我们的次要责任则是尊重内容。我们必须帮助读者厘清、分享他们所读文字的含义。
从文本开始设计，而非左上角
设计一张网页并不需要从空白屏幕和祈祷灵感开始。领会文本的内容，以及人们阅读它的方式和原因，将会而且应当影响它的设计。
从文本开始设计
当读者带着目的阅读时，他们需要文本左侧对齐以方便浏览，同时需要字体的设置易于快速阅读。
他们还需要信息被裁成“片段”，在视觉上被分隔开或者分组，这样当他们在当前章节没找到想要的信息时可以直接跳过。他们也需要这些片段以统一的形式摆放，这样他们就可以预期在跳过这一段后，下一段看到的大概会是什么。
当读者投入到休闲或者持续阅读时，他们需要觉得舒适。不应该让他们辨认难以阅读的字体（或者字号）。他们需要一个舒服的行宽，以避免觉得疲惫；以及一个大方的行高，以方便从左到右阅读。
休闲与持续阅读也可以从片段化中受益。清楚表明章节在何时、何处开始和结束，会让读者对文本整体结构有大致感受。片段化使得文本更容易管理，能够为读者提供阅读的出入口。
这些只是读者所需的优秀文本设计的冰山一角。理解读者的阅读方式能够引领我们设计出更可读的文本块。可读性好的文本块是构造栅格的基石；多重层级构造出重点；标题和引用与文本形成呼应，创造出视觉韵律；水平与竖直间距创造出视觉紧凑感。在你意识到之前，设计已经应运而生，这是基于你对读者阅读方式的了解构建的。
为有趣而设计
我们是享乐主义生物，喜欢美好的东西：漂亮的颜色、纹理及形状；律动中的反差；复杂事物的层叠。但是美好的东西弥补不了不愉快的阅读体验。
与其问“我可以拿这块空间干什么？” 不如问“读者对这段文本还有哪些要求？”
与其问“我最想用什么新字体呢？” 不如问“这段文本还需要我做什么？”
与其从视觉灵感开始，不如先读读你将要与之打交道的文本。营造一个有趣的阅读体验，紧接着其他好的东西就会接踵而至。
本书所值得期待的内容
本书将指导你在使用 HTML 与 CSS 时，如何像版式设计师一样思考。
这是一本关于版式设计的书。这是一本关于如何基于人们的阅读方式组织与设计网页的书，讲述了如何尊重、阐明和分享网站中展示的文字、想法及信息。
本书展示了如何选择字体、创造节奏与张力，以及创造由竖直间距和层级组成的体系。它展示了如何描绘想法、开发栅格、设计数据表和集成导航，还展示了如何将版式设计中的传统做法运用到 Web 设计中去。
这是一本讲述如何为 Web 页面设计版式的书。书中内容来自实际经验，包括传统印刷页面中使用版式的数十年经验、资深书本版式设计师撰写的经典与当代版式书籍、在Web 中运用版式的近十年经验，以及当前专注于 Web 版式设计的众多博客。本书将前计算机时代确立的版式设计贴士，与运用较新的@font-face属性集成 Web 字体的指令结合了起来。
本书将让你实践所学。它会讲述需要遵循的版式设计规则，解释为何它们行得通，何时又该打破这些规则。本书还提供了使用 HTML 与 CSS 开发的练习题，从而帮你试验这些规则。
学一学书中的课程。设计师们习惯在视觉层面思考与创造。我们中的许多人都是动觉学习者。这些课程能让你立即运用书中概念。如果你不会或不熟悉 HTML 或者 CSS，可以跟随书中内容一步一步来做。推荐使用 TextWrangler（一个免费的 Mac 上的文本编辑器，http://barebones.com/products/）或者Notepad++（一个免费的PC上的文本编辑器，http://notepad-plus-plus.org）。
即使你是个 HTML/CSS 熟手，也不妨读一读这些指南。我会经常在其中提醒注意细节，在讲布局时提供版式设计贴士。
这不是一本关于编写简洁明了的 HTML 与 CSS 语法的书。它不是一本关于 Web 兼容性、跨浏览器测试、可交互性或者如何组织网站的书。已经有很多优秀的书籍与网站讨论这些问题了。这些问题中的每一个都与如何设计尽可能好（可用、可访问）的网站密切相关，但它们都不是关于人们是如何阅读的。
这是一本关于版式设计的书。
本书是如何组织的
本书由四篇构成。
第1篇——起步：如何选择字体。这一部分讨论了当你为网页选择字体时需要考虑的主要因素。它介绍了基于可读性、审美、风格与字体粗细选择字体，还介绍了如何搭配两种字体。这一部分后面还有一个插入章节，讨论了一个新的论题：如何在布局中体现节奏感与紧凑感。
本书每章都包含一个课程，以供你练习这一章中展示的版式设计新技巧。在本部分，你将创建一个探索如何为同一单词创造多种含义的页面、两份书目，以及一个探索节奏感与紧凑感的页面。
第2篇——让版式工作：带着目的浏览。第2篇讨论了当设计一个被用户快速浏览的页面时该如何思考，以及如何利用间距与层次将文本“分段”。它还将讨论一些版式设计中更高阶的细节：标点符号、缩略词、规则线。本部分后面有一个插入章节，讨论另一个与带着目的浏览有关的话题：在设置表格信息时应当考虑什么。在本部分中，你将为一部校园系列片和一个到马萨葡萄园岛的轮渡时间表创建页面。
第3篇——让版式工作：休闲阅读与持续阅读。第3篇讨论当设计的网页会被人们以比较持续的方式阅读时应该考虑什么。它提供了更多关于以更可读的方式布置文本的贴士，并介绍了多页面网站中的版式设计概念：开发一个栅格，创造一个导航系统，并且在多个页面上应用这些系统。本部分后面的插入章节也讨论了一个新的话题：构造一个 Web 字体库时需要考虑什么。在本部分，你将创造一个多页面的网站，高亮展示一个受欢迎的大厨所被热衷的食谱。
第4篇——运用版式设计：理念风格。最后这部分简要介绍运用版式设计的三种主要方式：传统版式设计、现代版式设计及后现代版式设计。它介绍了每个方式的形式特征，以及版式设计师与文本、印刷制品之间的关系。本部分的章节讨论了当代网站体现传统、现代、后现代元素的示例。你将为同一份文本创建三种布局（传统、现代及后现代），并将本书中列出的工作链接到一起，创建一个迷你作品集。
关于本书中的代码
与在文本编辑器中输入代码不同，书本中印刷的代码会受空间限制。下文的注解将帮助你浏览本书中出现的代码。
如何阅读 HTML代码
本书采用的双栏布局限制了代码行的宽度，所以有时 HTML 代码需要折行，比如：
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD
/xhtml1-strict.dtd">
Lesson 16: Traditional<br>Page
content="text/html;charset=utf-8"/>
rel="stylesheet"type="text/css"/>
当某行HTML 代码被折行时，换行后的代码会被缩进。比如，如下四行代码本应该写成一行：
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD
/xhtml1-strict.dtd">
代码中的所有折行都不外乎两种情况。绝大部分折行都在一个空格（按一下空格键）之前。例如，如果将两行代码并为一行，它们中间应该有一个空格。
"-//W3C//DTD XHTML 1.0 Strict//EN"
另一些换行是在一个斜杠（/）之前。当换行符后面紧跟一个斜杠的时候，不要在斜杠前面添加空格。例如，下面两行并为一行时，中间不需要插入空格：
"http://www.w3.org/TR/xhtml1/DTD
/xhtml1-strict.dtd">
所以本书中代码的书写规则就是：缩进的 HTML 属于一行。将被折断的两行（或更多）代码连为一行时需要在它们之间添加一个空格，除非后半行以一个斜杠开始。
如何阅读 CSS 代码
与 HTML不同，为了方便阅读，CSS 代码被特意写成了多行。多行的 CSS 会以一个花括号（{）表示描述开始，或者以一个分号（;）表示属性值的结束。
极少数情况下，你会看到有 CSS 代码需要折行，比如：
body{
background-image:url(images
/background.jpg);
}
注意第二行代码并没有用分号结束，并且它下面那行代码有缩进。这意味着这两行代码实际上属于一行。当这些折行出现时，遵循同一规则：如果之间有一个斜杠，就不要在斜杠前面添加空格！
最后，很偶尔时（仅在本书中展示的 @font-face 代码中有），换行符会出现在一个点号（.）前面。如果某行以点号起始，将它与前面连成一行时不要在那个点号前面添加空格。例如，如下三行代码实际是一行：
url('fonts/GrutchShaded-webfont
.svg#webfontsyal6SUC')
format('svg');
将它们连成一行时，不要在.svg前面添加空格。要在 format前面添加空格（因为它前面既不是点号也不是斜杠）。
不确定的时候，复制粘贴后续章节中提到的网站中的代码即可。
有些代码以粗体展示
粗体代码表示已有 HTML 或者 CSS 中被修改的部分。
在许多课程中，你将需要分多个步骤编写代码。例如，在第2章中创建你的首个页面时，首先要输入以下内容：
yes
yes
yes
yes
?然后再围绕内容添加标题标签。新增的代码将以粗体显示：
关于课程文件
你可以从网站http://www.wiley.com/WileyCDA/redirect/go/typographicwebdesign 下载本书课程相关的所有文件，还可以下载本书中创建、使用的代码示例。注意，因为授权关系，提供的这些示例并不包含任何字体文件。
在我的网站上http://typographi- cwebdesign.com/，也可以下载这些项目文件，以及本书中创建、使用的代码示例。但是书中的示例及所有的相关字体文件无法下载。网站还提供了如何查看、复制、粘贴这些 HTML 与 CSS 代码的说明，此外还有其他同学是如何完成这些项目的示例。例如，图2展示了某位学生的原始设计稿，你还可以阅读我的改进建议，并看一下最终的修改效果。
图2 Josh Terciera 的系列电影 ，2010 春季。
已经有几十年了，批评家们预言书面文字行将就木：“没人阅读了！没人阅读了！” 然而从出生证明到坟前墓碑，从 T 恤衫到短信，写下来的文字——以及随之而来的阅读 ——已经渗透到了我们每天的生活里。
纵观历史，我们一直在用书面文字记录、保存“我们是谁”和“我们关心什么”：财产、法律、承诺、想法及记忆。曾经刻在陶土上、写在纸莎草纸上，以及使用墨水印制的文字与语句，如今借着像素的光呈现着（见图1）。
人们仍然阅读
在日常交流中，人们对短信的使用量大大增加，短信已超过语音通话成为沟通首选 ——这表明，我们每个人与阅读和书写的联系都在持续增强。
如 Jessica Helfand在2000 年所写，“……文字就是正等着被阅读的思想，而阅读永远不会消亡。阅读是你通往世界的门票。” 人们需要阅读。他们需要寻求连接社群的纽带、解决问题的答案、提高技能的课程，以及影响他们生活的新思想。
人们或许不再像往常那样（或者说像我们认为的往常那样）进行持续阅读了。他们发短信、发推特、发 Facebook 状态，他们找寻需要或者想要知道的，他们会完全沉迷在那些内容中，他们阅读他们觉得重要的东西。
重新定义阅读
如果我们将阅读定义为持续的文学活动——如果我们只认可这一种阅读方式，那么我们就是在缘木求鱼。我们忽视了实际情况，排斥了人们真正需要和渴望的方式。
事实情况是阅读方式有很多种，并且这些方式都是有效和重要的。作为版式设计师，我们可以全部支持。
人们有三种阅读方式：
y 带着目的浏览是指水平或者竖直方向快速浏览文字，从一个章节跳到另一个章节，不断寻找某一特定信息片段。读者可能只看每个章节开头的几个字符或者单词就迅速做出判断，跳过不匹配的，然后继续。
y 休闲阅读是指跳跃地浏览一段文字，阅读其中的一两句话（例如每个段落的第一句、标题、引用）从而了解该图1 文字与字符承载着信息与想法飞跃五湖四海，如今借着像素的光向读者呈现。向 Beatrice Warde （ http://en.wikipedia.org/wiki/Beatrice_Warde ）致敬，他于 1932 年创作并设计了原作This is a Printing Office大报。段文字的大致想法与风格。
y 持续阅读是指投入地阅读，包括为求娱乐的阅读和为求理解的阅读。读者们会慢下来、阅读整段文字，或许还会入迷。
作为版式设计师，我们的首要责任就是为我们的读者服务。我们最重要的工作就是帮助读者找到、理解并关联上他们寻找的文字、想法及信息。
?我们的次要责任则是尊重内容。我们必须帮助读者厘清、分享他们所读文字的含义。
从文本开始设计，而非左上角
设计一张网页并不需要从空白屏幕和祈祷灵感开始。领会文本的内容，以及人们阅读它的方式和原因，将会而且应当影响它的设计。
从文本开始设计
当读者带着目的阅读时，他们需要文本左侧对齐以方便浏览，同时需要字体的设置易于快速阅读。
他们还需要信息被裁成“片段”，在视觉上被分隔开或者分组，这样当他们在当前章节没找到想要的信息时可以直接跳过。他们也需要这些片段以统一的形式摆放，这样他们就可以预期在跳过这一段后，下一段看到的大概会是什么。
当读者投入到休闲或者持续阅读时，他们需要觉得舒适。不应该让他们辨认难以阅读的字体（或者字号）。他们需要一个舒服的行宽，以避免觉得疲惫；以及一个大方的行高，以方便从左到右阅读。
休闲与持续阅读也可以从片段化中受益。清楚表明章节在何时、何处开始和结束，会让读者对文本整体结构有大致感受。片段化使得文本更容易管理，能够为读者提供阅读的出入口。
这些只是读者所需的优秀文本设计的冰山一角。理解读者的阅读方式能够引领我们设计出更可读的文本块。可读性好的文本块是构造栅格的基石；多重层级构造出重点；标题和引用与文本形成呼应，创造出视觉韵律；水平与竖直间距创造出视觉紧凑感。在你意识到之前，设计已经应运而生，这是基于你对读者阅读方式的了解构建的。
为有趣而设计
我们是享乐主义生物，喜欢美好的东西：漂亮的颜色、纹理及形状；律动中的反差；复杂事物的层叠。但是美好的东西弥补不了不愉快的阅读体验。
与其问“我可以拿这块空间干什么？” 不如问“读者对这段文本还有哪些要求？”
与其问“我最想用什么新字体呢？” 不如问“这段文本还需要我做什么？”
与其从视觉灵感开始，不如先读读你将要与之打交道的文本。营造一个有趣的阅读体验，紧接着其他好的东西就会接踵而至。
本书所值得期待的内容
本书将指导你在使用 HTML 与 CSS 时，如何像版式设计师一样思考。
这是一本关于版式设计的书。这是一本关于如何基于人们的阅读方式组织与设计网页的书，讲述了如何尊重、阐明和分享网站中展示的文字、想法及信息。
本书展示了如何选择字体、创造节奏与张力，以及创造由竖直间距和层级组成的体系。它展示了如何描绘想法、开发栅格、设计数据表和集成导航，还展示了如何将版式设计中的传统做法运用到 Web 设计中去。
这是一本讲述如何为 Web 页面设计版式的书。书中内容来自实际经验，包括传统印刷页面中使用版式的数十年经验、资深书本版式设计师撰写的经典与当代版式书籍、在Web 中运用版式的近十年经验，以及当前专注于 Web 版式设计的众多博客。本书将前计算机时代确立的版式设计贴士，与运用较新的@font-face属性集成 Web 字体的指令结合了起来。
本书将让你实践所学。它会讲述需要遵循的版式设计规则，解释为何它们行得通，何时又该打破这些规则。本书还提供了使用 HTML 与 CSS 开发的练习题，从而帮你试验这些规则。
学一学书中的课程。设计师们习惯在视觉层面思考与创造。我们中的许多人都是动觉学习者。这些课程能让你立即运用书中概念。如果你不会或不熟悉 HTML 或者 CSS，可以跟随书中内容一步一步来做。推荐使用 TextWrangler（一个免费的 Mac 上的文本编辑器，http://barebones.com/products/）或者Notepad++（一个免费的PC上的文本编辑器，http://notepad-plus-plus.org）。
即使你是个 HTML/CSS 熟手，也不妨读一读这些指南。我会经常在其中提醒注意细节，在讲布局时提供版式设计贴士。
这不是一本关于编写简洁明了的 HTML 与 CSS 语法的书。它不是一本关于 Web 兼容性、跨浏览器测试、可交互性或者如何组织网站的书。已经有很多优秀的书籍与网站讨论这些问题了。这些问题中的每一个都与如何设计尽可能好（可用、可访问）的网站密切相关，但它们都不是关于人们是如何阅读的。
这是一本关于版式设计的书。
本书是如何组织的
本书由四篇构成。
第1篇——起步：如何选择字体。这一部分讨论了当你为网页选择字体时需要考虑的主要因素。它介绍了基于可读性、审美、风格与字体粗细选择字体，还介绍了如何搭配两种字体。这一部分后面还有一个插入章节，讨论了一个新的论题：如何在布局中体现节奏感与紧凑感。
本书每章都包含一个课程，以供你练习这一章中展示的版式设计新技巧。在本部分，你将创建一个探索如何为同一单词创造多种含义的页面、两份书目，以及一个探索节奏感与紧凑感的页面。
第2篇——让版式工作：带着目的浏览。第2篇讨论了当设计一个被用户快速浏览的页面时该如何思考，以及如何利用间距与层次将文本“分段”。它还将讨论一些版式设计中更高阶的细节：标点符号、缩略词、规则线。本部分后面有一个插入章节，讨论另一个与带着目的浏览有关的话题：在设置表格信息时应当考虑什么。在本部分中，你将为一部校园系列片和一个到马萨葡萄园岛的轮渡时间表创建页面。
第3篇——让版式工作：休闲阅读与持续阅读。第3篇讨论当设计的网页会被人们以比较持续的方式阅读时应该考虑什么。它提供了更多关于以更可读的方式布置文本的贴士，并介绍了多页面网站中的版式设计概念：开发一个栅格，创造一个导航系统，并且在多个页面上应用这些系统。本部分后面的插入章节也讨论了一个新的话题：构造一个 Web 字体库时需要考虑什么。在本部分，你将创造一个多页面的网站，高亮展示一个受欢迎的大厨所被热衷的食谱。
第4篇——运用版式设计：理念风格。最后这部分简要介绍运用版式设计的三种主要方式：传统版式设计、现代版式设计及后现代版式设计。它介绍了每个方式的形式特征，以及版式设计师与文本、印刷制品之间的关系。本部分的章节讨论了当代网站体现传统、现代、后现代元素的示例。你将为同一份文本创建三种布局（传统、现代及后现代），并将本书中列出的工作链接到一起，创建一个迷你作品集。
关于本书中的代码
与在文本编辑器中输入代码不同，书本中印刷的代码会受空间限制。下文的注解将帮助你浏览本书中出现的代码。
如何阅读 HTML代码
本书采用的双栏布局限制了代码行的宽度，所以有时 HTML 代码需要折行，比如：
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD
/xhtml1-strict.dtd">
content="text/html;charset=utf-8"/>
rel="stylesheet"type="text/css"/>
当某行HTML 代码被折行时，换行后的代码会被缩进。比如，如下四行代码本应该写成一行：
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD
/xhtml1-strict.dtd">
代码中的所有折行都不外乎两种情况。绝大部分折行都在一个空格（按一下空格键）之前。例如，如果将两行代码并为一行，它们中间应该有一个空格。
"-//W3C//DTD XHTML 1.0 Strict//EN"
另一些换行是在一个斜杠（/）之前。当换行符后面紧跟一个斜杠的时候，不要在斜杠前面添加空格。例如，下面两行并为一行时，中间不需要插入空格：
"http://www.w3.org/TR/xhtml1/DTD
/xhtml1-strict.dtd">
所以本书中代码的书写规则就是：缩进的 HTML 属于一行。将被折断的两行（或更多）代码连为一行时需要在它们之间添加一个空格，除非后半行以一个斜杠开始。
如何阅读 CSS 代码
与 HTML不同，为了方便阅读，CSS 代码被特意写成了多行。多行的 CSS 会以一个花括号（{）表示描述开始，或者以一个分号（;）表示属性值的结束。
极少数情况下，你会看到有 CSS 代码需要折行，比如：
body{
background-image:url(images
/background.jpg);
}
注意第二行代码并没有用分号结束，并且它下面那行代码有缩进。这意味着这两行代码实际上属于一行。当这些折行出现时，遵循同一规则：如果之间有一个斜杠，就不要在斜杠前面添加空格！
最后，很偶尔时（仅在本书中展示的 @font-face 代码中有），换行符会出现在一个点号（.）前面。如果某行以点号起始，将它与前面连成一行时不要在那个点号前面添加空格。例如，如下三行代码实际是一行：
url('fonts/GrutchShaded-webfont
.svg#webfontsyal6SUC')
format('svg');
将它们连成一行时，不要在.svg前面添加空格。要在 format前面添加空格（因为它前面既不是点号也不是斜杠）。
不确定的时候，复制粘贴后续章节中提到的网站中的代码即可。
有些代码以粗体展示
粗体代码表示已有 HTML 或者 CSS 中被修改的部分。
在许多课程中，你将需要分多个步骤编写代码。例如，在第2章中创建你的首个页面时，首先要输入以下内容：
yes
yes
yes
yes
?然后再围绕内容添加标题标签。新增的代码将以粗体显示：
yes
yes
yes
yes
关于课程文件
你可以从网站http://www.wiley.com/WileyCDA/redirect/go/typographicwebdesign 下载本书课程相关的所有文件，还可以下载本书中创建、使用的代码示例。注意，因为授权关系，提供的这些示例并不包含任何字体文件。
在我的网站上http://typographi- cwebdesign.com/，也可以下载这些项目文件，以及本书中创建、使用的代码示例。但是书中的示例及所有的相关字体文件无法下载。网站还提供了如何查看、复制、粘贴这些 HTML 与 CSS 代码的说明，此外还有其他同学是如何完成这些项目的示例。例如，图2展示了某位学生的原始设计稿，你还可以阅读我的改进建议，并看一下最终的修改效果。
图2 Josh Terciera 的系列电影 ，2010 春季。