IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

CSS排版:例子和工具

RockUX | WEB、前端、JavaScript、PHP 2011-06-23 00:10:40 累计浏览 5,203 次
本机暂存

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

    CSS Typography: Examples and Tools

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

  • CSS排版:基础
  • CSS排版:技术与最佳实践
  • CSS排版:例子和工具
  • CSS排版案例学习

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

    Southern Savers Case Study: Typography

        Southern Savers Case Study, Part IV: Typography

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

        Southern Savers Case Study, Part IV: Typography

    Fixing Web Fonts, A Case Study

        Southern Savers Case Study, Part IV: Typography

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

        Southern Savers Case Study, Part IV: Typography

    CSS排版工具

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

    Typographic Grid

        Typographic Grid

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

    Baseline

        Baseline

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

    Typograph

        Typograph

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

    TypeTester

        TypeTester

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

    FontTester

        FontTester

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

    Typechart

        Typechart

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

    CSS Typeset Matrix

        CSS Typeset Matrix

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

    CSS Typeset

        CSS Typeset

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

    Type Navigator

        Type Navigator

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

    PX to EM

        PX to EM

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

    What the Font

        What the Font

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

    Fontifier

        Fontifier

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

    Serif Font Search

        Serif Font Search

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

    Font Picker

        Font Picker

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

    Typekit

        Typekit

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

    CSS排版展览

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

    Matt Hamm

        Matt Hamm

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

    Kilian Muster

        Kilian Muster

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

    Grid Based Web Design

        Grid Based Web Design

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

    Brizk

        Brizk

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

    Design View

        Design View

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

    A List Apart

        A List Apart

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

    Mutant Labs

        Mutant Labs

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

    Jason Santa Maria

        Mutant Labs

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

    Darren Hoyt

        Darren Hoyt

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

    I Love Typography

        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. translateZ() (2026-06-25 21:18:56)
    2. translateY() (2026-06-25 21:17:56)
    3. translateX() (2026-06-25 21:16:01)

    查看更多 前端 文章 →

    建议继续学习

    1. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,441)
    2. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)
    3. 各公司对前端开发的职位描述 (累计阅读 10,405)
    4. iframe大小自适应 (累计阅读 10,056)
    5. 浏览器的渲染原理简介 (累计阅读 8,375)
    6. 解决IE6从Nginx服务器下载图片不Cache的Bug (累计阅读 8,354)
    7. 程序员眼里IE浏览器是什么样的 (累计阅读 8,010)
    8. 2010网页设计趋势 (累计阅读 7,817)
    9. Web前端工程师编程能力飞升之路 (累计阅读 7,690)
    10. 颜色的代码表达式 (累计阅读 7,665)