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

CSS排版:技术与最佳实践

RockUX | WEB、前端、JavaScript、PHP 2011-06-24 14:02:27 累计浏览 3,408 次
本机暂存

    在这个系列的第一部分,我们讨论了一些与CSS排版的基础概念。现在我们将讨论一些出色的技术,建议,技巧以及处理网站排版的最佳实践。

     原图已失效

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

  • CSS排版:基础
  • CSS排版:技术与最佳实践
  • CSS排版:例子和工具(即将推出)
  • 用@font-face改善网页排版

        对于普通文本块,使用巧妙的字体栈(如第一部分讨论的)是一个不错的主意,但是对于标题和短文本块,可以借助@font-face使用更多有趣的字体。使用得当,@font-face可以很大程度地与各种浏览器兼容,是的,甚至是IE。只需要在你的Web服务器上放一份字体文件并且在你的CSS代码中如下使用@font-face规则:

    @font-face {
     font-family: CurlzMTRegular;
     src: url(fonts/CurlzMTRegular.eot);
     }

        然后仅需要在CSS中使用font-family声明:

    h1, h2, h3, h4, h5, h6 {
     /* Always use a font stack, even with custom web fonts! */
     font-family: CurlzMTRegular, Helvetica, Arial, sans-serif;
     }

        原图已失效

        虽然IE4+支持@font-face,但是字体必须是.eot文件格式。很容易――只需要先对你选择的每个字体使用工具进行转换:ttf → eot Convertor

         想了解更多的@font-face的信息,请阅读以下文章:

  • The Essential Guide to @font-face
  • A Guide to Google Font API
  •     想更简单地实现@font-face,使用Font Squirrel的@font-face生成器

    垂直节奏

        网页排版设计其实都是在关注易读性和可读性。

         好的易读性和可读性的一个主要因素就是文字如何在网页中垂直地流动。文字是否太挤,或是太宽松?这是理解和切实实施垂直节奏起作用的地方。

         垂直节奏是用户从上往下读页面时的文本间隔和排列。

         原图已失效

         垂直节奏主要是用font-size和line-height来处理,还有top/bottom margin和padding。

         垂直节奏的概念很简单:行高,间距,填充都必须相同或有相同的比例。下面是一个例子:

    p, ol, ul, blockquote, pre, code {
     line-height: 18px;
     margin-bottom 18px;
     /* 1.5em provides good vertical spacing ( = 150% of the font-size) */
     line-height: 1.5em;  margin-bottom: 1.5em;
     }

        考虑顶边距和填充一个文本块(比如段落,列表,引用块),同时含有图像和其它块级元素。试着使用相同的line-height或使用它们的倍数(比如对于上面的例子来说使用18px,32px,64px等)。

         相同比例很容易计算出来。让我们试着指出下面的例子中line-height应该是多少。

    h1 {
     font-size: 2em;
     line-height: ?;
     }

        如果body的line-height设为1.5em,那么我们只需要用我们的font-size除它来得到我们的比例:1.5em/2em = 0.75em

    h1 {  font-size: 2em;  line-height: 0.75em;}

        对于大于line-height的字号,line-height必须减小到匹配基线网格。我们可以使用相同的算法来确定较小字号的line-height。让我们再来试试,不过这次我们的font-size比body元素的line-height小。

    h2 {  font-size: .7em;  line-height: ?;}

        如果body的line-height还是1.5em,那么我们将用它除以我们的font-size:1.5em/.7em = 2.14em。

    h2 {  font-size: .7em;  line-height: 2.14em;}

        需要了解更多的在网页布局中创建基线或垂直节奏的信息,查看以下列出的文章。此外还有一个方便的工具“垂直节奏生成器”,如果你不想计算所有东西的话。

  • Compose to a Vertical Rhythm
  • Get the Eye
  • 同分类推荐文章

    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,442)
    2. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)
    3. 各公司对前端开发的职位描述 (累计阅读 10,405)
    4. iframe大小自适应 (累计阅读 10,057)
    5. 浏览器的渲染原理简介 (累计阅读 8,377)
    6. 解决IE6从Nginx服务器下载图片不Cache的Bug (累计阅读 8,357)
    7. 程序员眼里IE浏览器是什么样的 (累计阅读 8,011)
    8. 2010网页设计趋势 (累计阅读 7,818)
    9. Web前端工程师编程能力飞升之路 (累计阅读 7,691)
    10. 颜色的代码表达式 (累计阅读 7,665)