iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 22
0
Modern Web

CSS大全閱讀筆記系列 第 22

第五章:字型(4)

  • 分享至 

  • xImage
  •  
  1. 粗細:
    a. 使用font-weight來定義字體粗細,預設值是normal,可以作用於所有元素,會繼承親代元素的值
    b. font-weight的設定值:
    - normalbold,寫作font-weight: bold;
    - 100、200、300、400、500、600、700、800、900,寫作font-weight: 300;,沒有單位。
    - bolderlighter,寫作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. 字體變粗或變細(第三組數值的使用):
    - bolderlighter關鍵字的使用,必須要有親代元素可以判斷繼承值,再比繼承值更粗(bolder)或更細(lighter)一階。
    - 例如字體分為Light、Regular、Medium、Bold、Extra Bold五階時,100屬於在Light範圍,設定bolder時會選擇更粗一階的字體Regular,所以換算後會是400。
    - 但若設定bolderlighter的元素和親代元素的字體粗細都落在同階範圍中,視覺上就不會有變化。如字體只有Regular和Bold兩階粗細,p {font-weight: normal;},如果<p>元素中還有子代元素<span>,設定span {font-weight: lighter;},但事實上<p>元素已經為最細字體了,因此<p><span>兩者看起來會一樣粗細,就算<p>元素換算是400,<span>元素會是300或是更小的值,也不會有變化。
    e. 可以結合前面的@font-face{},利用多個@font-face{}中設定font-family和相對應的font-weight,自行設定字體粗細的轉換點。

上一篇
第五章:字型(3)
下一篇
第五章:字型(5)
系列文
CSS大全閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言