《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規則實現只對&符號應用特殊的字體。感受方法不是很通用，先不作深刻研究。