《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规则实现只对&符号应用特殊的字体。感受方法不是很通用，先不作深刻研究。