第五章：字型（4）

第 11 屆 iThome 鐵人賽

DAY 22

Modern Web

CSS大全閱讀筆記系列第 22 篇

11th鐵人賽

Camellus

2019-10-08 23:26:50

1631 瀏覽

分享至

粗細：
a. 使用font-weight來定義字體粗細，預設值是normal，可以作用於所有元素，會繼承親代元素的值。
b. font-weight的設定值：
- normal和bold，寫作font-weight: bold;。
- 100、200、300、400、500、600、700、800、900，寫作font-weight: 300;，沒有單位。
- bolder和lighter，寫作font-weight: bolder;。
- 三組數值不可混用。
c. 字型粗細的運作方式（第一組與第二組數值的互換計算）：
- 最理想的情況，字體可以分為九組粗細，此時normal對應400，bold對應700，但基本不可能出現這種情況，一般字體都不會同時設定好九種粗細。
- 一般情況下，使用者代理需為字體計算寬度，填補未設定的數值，以400為計算基準，如果字體沒有設定500，則與400相同。往下計算，300則會設定比400更細一級字體（如Light），如果沒有，則與400相同，200和100先看有無設定，沒有就與400相同。往上計算，600會比500更粗一級字體（如Bold），如果沒有更粗的字體，600會和500相同粗細，700、800、900也以相同方式處理。
- 通常字體名稱和字體粗細會有關係，如Normal、Regular、Book、Roman通常會給400，Medium一般會分給500，但如果字體唯一粗細階級只有Medium時，就會給400。
- 最常見的情況之一，當字體粗細分為Light、Regular、Medium、Bold、Extra Bold五階時，100到300分給最細的Light，400指派給Regular，同時也是normal值，500指派給Medium，600和700分配給Bold，設定bold值也會對應到此處，800和900屬於最粗的Extra Bold範圍。
- 另一個常見的情況，只有Regular和Bold兩階粗細，100到500屬於Regular，600到900屬於Bold。運用前面的算法，可以得知：100到300分給最細的字體，400對應Regular，700對應Bold，800和900分給最粗的字體，剩下500沒有設定，和400相同，因此屬於Regular範圍，600需要比500粗一階，所以分配給Bold。
- 字體粗細有上限與下限，上限為900，下限為100，溢出者會以最上限或最下限計算。
d. 字體變粗或變細（第三組數值的使用）：
- bolder和lighter關鍵字的使用，必須要有親代元素可以判斷繼承值，再比繼承值更粗（bolder）或更細（lighter）一階。
- 例如字體分為Light、Regular、Medium、Bold、Extra Bold五階時，100屬於在Light範圍，設定bolder時會選擇更粗一階的字體Regular，所以換算後會是400。
- 但若設定bolder或lighter的元素和親代元素的字體粗細都落在同階範圍中，視覺上就不會有變化。如字體只有Regular和Bold兩階粗細，p {font-weight: normal;}，如果元素中還有子代元素，設定span {font-weight: lighter;}，但事實上元素已經為最細字體了，因此和兩者看起來會一樣粗細，就算元素換算是400，元素會是300或是更小的值，也不會有變化。
e. 可以結合前面的@font-face{}，利用多個@font-face{}中設定font-family和相對應的font-weight，自行設定字體粗細的轉換點。