《CSS揭秘》第五章：字体排印

字体排印

连字符断行

在杂志和书籍中，经常可以见到两端对齐效果。但是在网页设计中，两端对齐效果很少被使用。
原因是会带来糟糕的显示问题。
text-align: justufy;

在css第三版中，引入了一个属性hyphens:\[none, manual, auto\]。
使用hyphens:auto;会让浏览器决定什么时候用换行符。前提是提前设置好网页的HTML标签的lang属性。
在线编辑：dabblet JSFiddle
注：使用chrome浏览器测试均不正常。使用safari浏览器测试正常

插入换行

考虑如下代码：

<dl>
    <dt>Name:</dt>
    <dd>Versdf</dd>

    <dt>Email:</dt>
    <dd>hfd@fas.me</dd>

    <dt>Location:</dt>
    <dd>Earth</dd>
</dl>

想要的效果如图：

由于<dt>和<dd>都是块级元素，所以在不修改结构的前提下，我们可以使用伪元素实现不破坏语义同时实现此目的

dd + dd::before {
    content: ', ';
    font-weight: normal;
    margin-left: -.25em;
}

文本行的斑马条纹

斑马条纹在UI设计中十分常见。我们可以使用:nth-child()/:nth-of-type()伪类来对奇数行和偶数行设置不同的背景，也可以使用不同的div去包裹奇数行和偶数行。现在我们还有一种简单的方法实现这一目的：对元素设置条纹背景

pre { 
    padding: .5em;
    line-height: 1.5;
    background: hsl(20, 50%, 95%);
    background-image: linear-gradient(
                      rgba(120,0,0,.1) 50%, transparent 0);
    background-size: auto 3em;//北京高度为line-height的两倍
    background-origin: content-box;//设置background-position基准以content box为准
    font-family: Consolas, Monaco, monospace;
}

调整tab宽度

在网页中，通常使用<pre>或者<code>来显示代码。它们tab会被解析成8个字符。

而我们通常希望将其设置为4或者2。在CSS第三版中，增加了属性tab-size可以用来控制这个属性.

pre {
    tab-size: 2
}

连字

某些字形与字形相邻时会带来显示上的问题。比如大多数衬线字体中的f和i。在css第三版中，引入了font-variant-ligatures属性

font-variant-ligatures: comon-ligatures
                        discretionary-ligatures
                        historical-ligatures

华丽的&符号

通过@font-face规则实现只对&符号应用特殊的字体。感觉方法不是很通用，先不做深入研究。