iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 30
1
Modern Web

CSS大全閱讀筆記系列 第 30

第五章:字型(12)

  • 分享至 

  • xImage
  •  

(接上篇的字型屬性部分)


  1. 字型屬性:
    c. 使用系統字型:
    - font也有關鍵字能使用,可以讓網頁和使用者的作業系統擁有相同的外觀。使用關鍵字時,關鍵字會將字型的所有屬性一起設定(包括字型大小、粗細等),所以使用關鍵字後,如果有些屬性要修改,可以將屬性單獨列出修改。關鍵字使用時寫成buttom {font: caption;}
    - 關鍵字有**caption(用於如按鈕之類的說明控制項)icon(用於圖示標記)menu(用於選單,像是下拉選單或選單項目等)message-box(用於對話框)small-caption(用於標記小型控制項)status-bar(用於視窗狀態列)**。
    - 如果使用系統字型,但使用者主機上沒有該字型時,使用者代理會選擇最相近的字型使用(像是caption字型改用small-caption的字型),若還是找不到能使用的相似字型,就會使用使用者代理自身的預設字型。但如果是可以找到系統字型,但無法讀取所有的屬性值時,會改用normal設定(如設定了小型大寫字,但系統字型不支援,就會用normal取代原設定值)。
  2. 字型應對:
    a. CSS根據font-family、粗細、變體等條件找尋相符的字體,這個過程稱為字體應對,有相當繁複的步驟。
    b. 字體應對的步驟:
    - 使用者代理(或存取字型屬性)資料庫一般包含了所有主機上安裝的字體,也可能會有其他字體(如使用者代理內建字體),如有兩個完全相同的字型,會忽略其中一個。而資料庫中包含所有使用過字型的各種CSS屬性清單。
    - 使用者代理拆解字型屬性作用的元素,建立元素所需的字型屬性清單,再依據清單初步篩選對應的font-family,如有相符則使用該者,否則就再做其他處理。
    - 字型先依font-stretch屬性對應。
    - 字型再依font-style屬性對應,italic關鍵字對應到有標記Italic或Oblique的字型,若皆無相符,視為沒有對應。
    - 接者處理font-weight,而此項因為CSS處理字型粗細的方式,所以一定會應對成功。
    - 上述完成後處理font-size,必須在一定的誤差值內,但誤差值由使用者代理定義(有些允許20%誤差,有些允許值只有10%)。
    - 如果步驟2應對失敗,會從font-family尋找替代字型,找到後再做後續步驟的處理。
    - 假若找到字型相符,但沒有能顯示指定元素所用的字元,使用者代理會再次尋找尋找替代字型的程序,並觸發步驟2。
    - 最後,如果找不到任何相符的替代字型,使用者代理就會選擇指定通用字型的預設字型,盡可能正確的顯示元素。
    c. 使用者代理處理字型變體(font-variant)與字型特性(font-feature-settings)的步驟:
    - 先檢查font-feature-settings預設啟用的字型特性,包含指定腳本所需的特性,這些設定特指calt(依上下內文合字)、ccmp(組合字符成一個字寬度)、clig(一般合字)、liga(標準合字)、locl(字符變形符合本地化使用方式)、mark(mark to base放置方式)、mkmk(mark to mark放置方式)、rlig(必要連字)幾項核心設定。
    - 如果字型是通過@font-face{}規則定義,先檢查@font-face{}font-variant描述子設定的特性,接著再檢查@font-face{}font-feature-settings描述子設定的特性。
    - 接著再檢查其他屬性對font-variantfont-feature-settings造成的影響,像是letter-spacing非預設值時會自動關閉連字功能。
    - 之後再檢查font-variantfont-variant-*對字型特性的調整,並檢查其他同樣操作OpenType特性的屬性,如font-kerning
    - 最後檢查font-feature-settings對字型特性的影響。

(在IT鐵人賽的CSS大全摘要到此結束,但很厚很厚的CSS大全尚未結束⋯⋯)


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

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2020-02-01 12:56:48

大概才前兩章而以吧XD
恭喜完賽 /images/emoticon/emoticon37.gif

我要留言

立即登入留言