BS3 Typography

簡介

在 BS3 v3.3.6 的 bootstrap.css 樣式檔中，可以看到以下二段針對 html 和 body 標記的設定。

html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
body {
    margin: 0;
}

這一段 html 和 body 樣式設定及以下的一連串標記的樣式設定，其主要的作用在正規化所有標記的樣式設定，期望網頁內容能在不同的流覽器中，盡可能呈現一致的結果。

html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}
p {
    margin: 0 0 10px;
}

上面這一小段針對 html, body 和 p 標記的樣式定義，則設定了 BS3 對網頁的預設的字體為 "Helvetica Neue", Helvetica, Arial, sans-serif。字體大小為 14px，比流覽器通常預設的 16px 要略小一些。行高為字高的 1.42857143 倍（有必要算到這麼細嗎？），在 14px 的大小下，行高約為 20px 的高度。字的顏色為 #333，字色略淡，並非純黑色，但在字的大小為 14px 下，中、英文都很難區分是否和純黑色有所不同。個人一直到 22px 以上的大小，才能相當勉強的區分。對於 p 標記，只設定了 margin-bottom 為 10px，其它的屬性都繼承自 body 標記的設定。

BS3 對 header 的字體大小設定如下，BS3 對應 h1 到 h6 的標記也設定了 .h1 到 .h6 的修飾類別，兩者的樣式設定完全相同。在動態改變樣式時，使用修飾類別要比使用標記來得方便許多，也容易保持文章中字型字體的一致性。運用時要注意的是：修飾類別的樣式設定在套用時優先權高於標記的樣式設定。

• h1 : 36px
• h2 : 30px
• h3 : 24px
• h4 : 18px
• h5 : 14px
• h6 : 12px

個人對 html 及 body 標記樣式的基本修改如下：

html {
    width: 100%;
    height: 100%
}
body {
    margin: 0 auto;
    width: 1000px;
    padding: 0 20px;
    font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei";
    font-size: 16px;
    line-height:1.7;
    letter-spacing: 0.04em;
}

在 font-family 屬性中，記得要把英文字型放在中文字型的前面；因為一般的中文字型檔裡都包含有英文的全形和半形字體，如果把中文放在最前面，一但找到中文字體後，中、英文都會使用這個中文字體；設定在中文字體後面的英文字體，除非找不到前面的中文字型檔，否則根本不會有上場的機會。