一个用于精美排版的 LESS 样式表模板

引言

本技巧介绍了一个带有注释的 LESS 样式表模板，用于更轻松地为 CSS 网页启用美观的排版。本页面的注释深入探讨了字体在传统书籍中的使用方式，并解释了 LESS 样式表中使用的所有函数。

此样式表的最新版本可以在 GitHub Gist 页面上找到。

样式表

在大多数情况下，使用此样式表就像包含它并添加以下内容一样简单

body { .traditionaltypography(); }

首先，我们从标题以及如何使用它开始

/////////////////////////////////////////////////////////////
//
//   LESS functions for enabling beautiful typography
//   in Web pages.  Written by Peter O., 2013-2015.
//
//   Any copyright is dedicated to the Public Domain.
//   http://creativecommons.org/publicdomain/zero/1.0/
//
//   If you like this, you should donate to Peter O.
//   at: http://upokecenter.dreamhosters.com/articles/donate-now-2/
//
//   In most cases, use the functions ".monospacedtypography()"
//   and ".traditionaltypography()", defined below.  But there
//   are also other useful functions given here.
//
/////////////////////////////////////////////////////////////

以下是在不同浏览器中设置 OpenType 字体特性的辅助函数。

.fontFeatureSettings3(@v1, @v2, @v3){
  font-feature-settings: @v1, @v2, @v3 !important;
  -moz-font-feature-settings: @v1, @v2, @v3  !important;
  -webkit-font-feature-settings: @v1, @v2, @v3  !important;
  -ms-font-feature-settings: @v1, @v2, @v3 !important;
}
.fontFeatureSettings1(@v1){
  font-feature-settings: @v1 !important;
  -moz-font-feature-settings: @v1 !important;
  -webkit-font-feature-settings: @v1 !important;
  -ms-font-feature-settings: @v1 !important;
}

.fontFeatureSettings4(@v1, @v2, @v3, @v4){
  font-feature-settings: @v1, @v2, @v3, @v4 !important;
  -moz-font-feature-settings: @v1, @v2, @v3, @v4  !important;
  -webkit-font-feature-settings: @v1, @v2, @v3, @v4  !important;
  -ms-font-feature-settings: @v1, @v2, @v3, @v4 !important;
}

此函数包含一个使用小型大写字母的规则。最初这是 .fontFeatureSettings3("liga" 1, "kern" 1, "smcp" 1);；然而，似乎没有办法在每个字体的基础上启用这些字体特性；如果特定字体不支持小型大写字母字体特性，除非使用 font-variant: small-caps，否则不会以小型大写字母显示。

// Enables small caps
.smallcaps() {
    font-variant: small-caps;
}

文本的基本 CSS 规则。它启用了抗锯齿和清晰的文本渲染，如果浏览器支持的话。

.typographybase(){
  text-rendering: optimizeLegibility;
  -webkit-text-rendering: optimizeLegibility;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}

添加断字 CSS 规则的函数。

.hyphens(){
  // Enable hyphenation where supported
  word-wrap: break-word;
  hyphens: auto;
 -moz-hyphens: auto;
 -webkit-hyphens: auto;
 -ms-hyphens: auto;
}

禁用 CSS 元素断字的函数。

.nohyphens(){
  word-wrap: normal;
  hyphens: none;
 -moz-hyphens: none;
 -webkit-hyphens: none;
 -ms-hyphens: none;
}

散文或流动的文本的 CSS 规则。此函数与 typographytablecell 之间的唯一区别在于，数字使用旧式数字，这与 typographytablecell 不同。

.typography(){
  .typographybase();
  .hyphens();
  .fontFeatureSettings4("onum" 1, "pnum" 1,"liga" 1, "kern" 1);
}

.typographytablecell() {
  .typographybase();
  .hyphens();
  .fontFeatureSettings4("onum" 0, "pnum" 0,"liga" 1, "kern" 1);
}

此函数启用分数字体特性。这仅在页面的某些部分使用；在所有地方启用它可能会导致某些支持此功能的字体出现不希望的显示结果。

.fractions() {
 .fontFeatureSettings1("frac" 1);
}

禁用 CSS 元素的小型大写字母的函数。

// Disables small caps
.nosmallcaps() {
  font-variant: normal !important;
  .fontFeatureSettings4("liga" 1, "kern" 1, "smcp" 0,"c2sc" 0);
}

一组等宽字体。我列出了它们，以便具有独特个性的字体（Menlo、Inconsolata）比许多操作系统中标准提供的字体（例如 Courier New）更早出现。

定义等宽、无衬线和衬线字体的三个函数是为了方便将来添加更多字体或更改其优先级。

.monospaced(){
    font-family: "Source Code Pro", "Menlo", "Consolas",  
    "Inconsolata", "Liberation Mono", "Lucida Console",
       "DejaVu Sans Mono", "Droid Mono",
       "Free Mono", "Courier New", "Courier", monospace;
}

一组无衬线字体，选择和排序方式与等宽字体相同。

.sansserif(){
   font-family: "Helvetica Neue",
       "Open Sans", "Free Sans", "Clear Sans", "Calibri", "Segoe UI",  "Roboto", "DejaVu Sans", Verdana,
       "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
}

一组衬线字体，选择和排序方式与等宽字体相同。

.serif(){
   font-family: "Sitka Text", "PT Serif",
      "Charis SIL Compact", "Charis SIL",
      "Cambria",
      "Palatino Linotype",
      "Droid Serif", "Free Serif", "Georgia", "Book Antiqua", "Times New Roman", serif;
}

传统上，无衬线字体用于标题、标题和一些显示文本，而衬线字体用于自由流动的段落。 在编程书籍中，等宽字体用于代码清单、变量名、对象名和其他类似上下文。 这反映在以下 LESS 函数 traditionaltypography 中。 包含此模板的大多数 LESS 样式表都应使用此函数。

分数字体特性仅在具有类“fraction”的 HTML SPAN 元素中使用。 这是因为否则，分数格式会在不希望的上下文中使用。

//
//  Traditional font features for Web pages.
//  Uses serif for body text, sans-serif for tables, headers,
//  and other display text, and monospaced for code elements
//  and some input elements.
//
//  Example:
//  body { .traditionaltypography(); }
//
.traditionaltypography(){

表头中的无衬线字体和表格数字。

  th {
   .sansserif();
   .typographytablecell();
  }

表格单元格中的衬线字体和表格数字（尽管通常在书中，无衬线字体会出现在此上下文中）。

  td {
   .serif();
   .typographytablecell();
  }

按钮、大多数输入元素、标题和标题中的无衬线字体。

  input, legend, option, button, select, h1, h2, h3, h4, h5, h6, figcaption, caption {
   .sansserif();
   .typography();
  }

文本输入、代码示例和对象名称的等宽字体。

  input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea,
  pre, textarea, tt, code, samp, var, kbd {
   .monospaced();
   .typographybase();
  }

自由流动文本的衬线字体。

  div, p, li, dt, dd {
   .serif();
   .typography();
  }

不要对预格式化的文本进行断字。

  pre {
   .nohyphens();
  }

如果字体支持，则进行分数格式化。

     span.fraction { 
       .fractions(); 
     } 
   }

这结束了 traditionaltypography 函数。

这个特殊的 LESS 函数 monospacedtypography 可以用来代替 traditionaltypography，在网页上的每个地方使用等宽字体，包括散文、表格、标题等。

//
// Monospaced typography.  Uses a monospaced
// font for all text.
//
//  Example:
//  body { .monospacedtypography(); }
//
.monospacedtypography(){
  td, th {
   .monospaced();
   .typographytablecell();
  }
  div, p, li, input, select, button, option, legend, h1, h2, h3, h4, h5, h6, dt, dd, figcaption, caption,
  td[colspan], th[colspan] {
   .monospaced();
   .typography();
  }
  pre, textarea, tt, code, samp, var, kbd {
   .monospaced();
    .typographybase();
  }
  pre {
   .nohyphens();
  }
  span.fraction {
    .fractions();
  }
}

这就是带注释的样式表的结尾。

总而言之，此 LESS 模板主要处理字体、字体特性和断字的选择，不涉及字体大小、行高、文本对齐方式等。

同样，有关此 LESS 样式表的最新版本，请参见 GitHub Gist 页面。