在这系列文章的前面一部分，我们讨论了CSS排版的一些技术和最佳实践。现在让我们通过一些案例学习，工具以及网页中一系列出色排版来更深入的研究。

    

    这是CSS排版参考三篇系列中的第三部分，这三篇将涵盖从基本语法到最佳实践，以及CSS排版相关工具的内容。

CSS排版：基础

CSS排版：技术与最佳实践

CSS排版：例子和工具

CSS排版案例学习

    教程和理论很不错，但是没有比案例学习更能够说明事情的了。这里是一系列案例，它们可以为你提供一些关于网页排版在现实世界中的理解。

Southern Savers Case Study: Typography

    

Serif Fonts vs. Sans Serif Fonts: A Working Case Study

    

Fixing Web Fonts, A Case Study

    

Ten Great Free Fonts Cross-Browser: A Case Study in @Font-Face

    

CSS排版工具

    下面是收集的一些排版相关的工具，他们可以最大程度地帮助你处理CSS排版工作。

Typographic Grid

    

    这个预定义的CSS网格组成了垂直节奏。它是任何做CSS排版的人的很好的起点。

Baseline

    

    Baseline是一个关注基准网格的排版框架。它具有CSS reset，HTML文本基本风格，网页表单等特点，以及一些新的HTML5元素。

Typograph

    

    这个工具具有创作排版的拖拽界面。它有许多功能，包括自动计算大小因此在你做CSS排版时不需要拿出你的计算器了。

TypeTester

    

    选择你计算机里有的字体，并调试它们的line-height，letter-spacing等等。这个工具可以为你生成一个预览你可以很方便地调整你的字体样式直到满意。

FontTester

    

    FontTester与上面的TypeTester目的相似. FontTester允许你从方方面面测试和比较不同的字体。 测试好了不同的组合之后，你可以很开心地获取最终的css代码。

Typechart

    

    Typechart是不同字体组合的一个展览，对于每一个组合都可以获取它们的代码。它很适合快速挖掘字体组合和样式。

CSS Typeset Matrix

    

    你以像素为标准来考虑吗？这个工具可以帮助你将单位转成em，也可以帮你寻找基于你指定的字号和行高的边距和间距值。

CSS Typeset

    

    使用这个工具，你可以改变任何放在左边输入框文字的line-height，word-spacing，color， 样式和文本修饰。调整后马上就能看到更改，然后你可以从输入框中复制最终的代码。

Type Navigator

    

    你有没有过在网页上见到一个字体然后想知道它是什么字体么？使用这个工具，你可以通过回答一每关于字体特征问题而到答案。脑海里没有特定的字体，你也可以通过它来找到想要的字体。

PX to EM

    

    使用这个工具，简单地用任意一种测量单位(px，em，%或pt)选择一个希望的body font-size，它会帮你转成em。

What the Font

    

    你可以使用这个工具通过上传图片来得到字体的名字。

Fontifier

    

    这个基于网页的生成器会根据你手写的样本创建一个字体。这个字体可以在现实网站中使用，通过@font-face规则。样本和创建字体是免费的，但是你需要花费$9来下载字体。

Serif Font Search

    

    这个工具允许你通过它的牲查找serif字体。如果你找到了，它会告诉你这个字体的名称以及一些其它信息。

Font Picker

    

    Font Picker允许你根据特点和风格从成百上千种字体中筛选出你要找的字体。

Typekit

    

    只要支付订阅飞费用，网页设计师可以在它们的网站中使用额外的网页字体。使用Typkit的好处是不用担心版权问题，这个服务帮你搞定了一切。

CSS排版展览

    为了获得灵感，这里给出了一些排版很漂亮的网页设计。我们也会简单的讨论CSS是如何被运用到网页设计的排版中去的。

Matt Hamm

    

    这个网站设计的垂直节奏执行得很好，并且通过Typekit提供额外的字体。注意网页设计中使用不同的大小写，字号和其它字体样式来创造出出色的视觉层次。

Kilian Muster

    

    这个网站使用了一些与众不同的CSS排版技术。网站的名字和口号使用了CSS3的text-shadow来产生CSS3阴影效果。

Grid Based Web Design

    

    这个页面的排版始终坚持一个基线网格，不同文本元素的字号和样式产生了视觉的层次感。

Brizk

    

    这个网页设计是如何有效地使用自定义网页字体的另一个例子。整个网站的标题以及不同的文本块都使用了同一种字体。注意每页第一段和标题的字体都使用更大一些的字号――使用CSS的:first-child伪元素的实例。

Design View

    

    字体大小的变化是使得它在排版方面很巧妙的因素。它体大小和排版间距使用em单位。

A List Apart

    

    A List Apart网站向来都被认为具有出色的排版和内容可读性。这是因为好的排版增强了像A List Apart这样以内容为中心的网站，它的漫长的文章占有主要的地位。这个网站的布局有很好的垂直节奏并且使用了很多CSS排版的技术，比如文本居中，大写字母，以及文章中有趣的链接悬停状态。

Mutant Labs

    

    这个网页设计在字体样式(颜色，字体选择，大小和间距)方面做得很好。

Jason Santa Maria

    

    它使用了CSS的background-image文本替换和一些基本的CSS排版技术，使得内容的易读情和可读情都很强。垂直节奏在这个设计中做得非常好。

Darren Hoyt

    

    这里在主体段落中使用了CSS首字母大写(第二部分提到)。

I Love Typography

    

    注意在设计中serif字体被留给了更多的空白，而sans serif字体则更少。这可能可以产生视觉上的层级，因此主要内容是首要的焦点而边栏的内容是次要的关注点。

CSS排版延伸阅读及资源

    最后，这里是一些关于CSS排版的阅读材料供你浏览。

How to Size Text in CSS

How to Size Text Using Ems

Relative Font Sizes and Inheritance

CSS Font Stacks (presentation)

8 Definitive Web Font Stacks

Guide to CSS Font Stacks: Techniques and Resources

Compose to a Vertical Rhythm

Setting Type on the Web to a Baseline Grid

Font-Face.com

The Essential Guide to @font-face

Type Pseudo-classes

CSS Content

结论

    设计网页排版需要很好的了解基本排版原则以及通过现实的实现去练习。精?SS字体和文本属性，排版可以变得很漂亮。有效而巧妙的编码习惯应该包括在CSS排版中什么可以(或不可以)和什么不可以(或不应该)。

    这结束了我们的CSS排版三篇系列教程。我希望它对你在网页设计当中如何处理排版的理解有帮助。

CSS排版：基础

CSS排版：技术与最佳实践

CSS排版：例子和工具

建议继续学习：

1. 中文段首不需要空两格    (阅读：2528)
2. CSS排版：技术与最佳实践    (阅读：2490)
3. CSS排版: 基础    (阅读：2358)
4. 云标签，关键字图排版 html5 canvas版（一）    (阅读：2277)
5. 空行不空格式排版组织原理    (阅读：2264)
6. 繁体中文的混合排版    (阅读：1929)
7. 手机版阿里图文排版案例    (阅读：1676)
8. 讨论：长文的数字排版与阅读    (阅读：1870)
9. 文字编排的易读性    (阅读：2050)