iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 25
1
Modern Web

CSS大全閱讀筆記系列 第 25

第五章:字型(7)

  • 分享至 

  • xImage
  •  
  1. 字型樣式:
    a. 使用font-style來定義字體樣式,預設值是normal,可設定值還有italicoblique,可以作用於所有元素,也可用在動畫上,會繼承親代元素的值,寫作font-style: normal;
    b. font-style中的預設值normal是指非斜體也沒有任何傾斜的文字。
    c. italicoblique的差異:
    - italic所對應的italic字貌是獨立的字貌,會在字元外貌上有少許更動,襯線體更會發現襯線上因此而更動的變化,而oblique所對應的oblique字貌,只是單純地將字元傾斜,可以用其他CSS屬性計算達到一樣的效果。
    - 一般而言,字型中帶有Italic、Cursive、Kursiv的字體通常會對應italic關鍵字,而帶有Oblique、Stanted、Incline的字體會使用oblique這個關鍵字。
    d. 當字體沒有italic而有oblique字貌時,就算給予font-style: italic;,也會顯示font-style: oblique;的效果,但若是沒有oblique而有italic字貌時,font-style: oblique;就不會有作用。而有些作業系統上,italic字貌和oblique字貌會有混用的現象。
    e. 能使用複數個@font-face{}中包含的font-familyfont-style配對指定不同字型樣式給予不同的字型檔,但不支援inherit關鍵字。
  2. 字型伸展:
    a. 當某些字型家族中有較寬或較窄的字型時,可以不用額外使用font-family宣告,而是使用font-stretch,這種情況通常字型都會有Condensed、Wide或Ultra Expanded等額外標示可供辨識。
    b. 使用font-stretch來定義字體樣式,預設值是normal,可以作用於所有元素,會繼承親代元素的值,當字型檔中沒有提供與設定值關鍵字相對應的字型變體時,font-stretch沒有任何的作用。使用時,寫作font-stretch: normal;
    c. font-stretch的設定值:
    - 預設值:normal
    - 變窄(由寬至窄):semi-condensedcondensedextra-condensedultra-condensed
    - 變寬(由窄至寬):semi-expandedexpandedextra-expandedultra-expanded
    d. 能使用複數個@font-face{}中包含的font-familyfont-stretch配對指定不同字型伸展給予不同的字型檔,但不支援inherit關鍵字。
    e. 注意使用font-stretch時在攜帶式裝置的支援度。
  3. 字距調整:
    a. 某些字型檔中有每個字元間距的資訊,稱為字距調整(kerning),因為字元會因為結合方式的不同而導致字元間距的改變。
    b. 可使用font-kerning來定義字距,預設值是auto,能作用於所有元素,會繼承親代元素的值,但font-kerning需在字型檔中有相關資訊時才會啟用,寫成font-kerning: auto;
    c. font-kerning的設定值:
    - auto:是預設值,表示讓使用者代理選擇最佳顯示方式,因此當字型檔中沒有font-kerning資訊時,就不會有任何作用。
    - normal:讓使用者代理依照字型檔中的font-kerning資訊調整字距。
    - none:不做任何字距的調整。
    d. 同時使用font-kerningletter-spacing時,font-kerning會先作用,之後才是依照letter-spacing數值調整。

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

尚未有邦友留言

立即登入留言