CSS font | font style中文
字體,是網頁排版中最重要的元素之一,本篇文章將會針對CSS的font-family進行詳細介紹(包含generic-family、font-face、unicode...等),希望幫助大家在跨平台瀏覽或是做些特殊排版時,能更輕鬆的使用網頁字體,能讓網頁內容更清楚更精彩。如果對字體的單位有興趣,可以參考:一次搞懂CSS字體單位:px、em、rem和%[1]基本用法使用font-family很簡單,只需要設定family-name(字體名稱)和generic-family(通用字體),font-family可以設定一種字體或多種不同的字體,每種字體間用半形逗號「,」隔開,當瀏覽器載入網頁樣式時,會從左邊第一...
字體,是網頁排版中最重要的元素之一,本篇文章將會針對 CSS 的 font-family 進行詳細介紹 ( 包含 generic-family、font-face、unicode...等 ),希望幫助大家在跨平台瀏覽或是做些特殊排版時,能更輕鬆的使用網頁字體,能讓網頁內容更清楚更精彩。
如果對字體的單位有興趣,可以參考:一次搞懂 CSS 字體單位:px、em、rem 和 %[1]
基本用法使用 font-family 很簡單,只需要設定 family-name ( 字體名稱 ) 和 generic-family ( 通用字體 ),font-family 可以設定一種字體或多種不同的字體,每種字體間用半形逗號「,」隔開,當瀏覽器載入網頁樣式時,會從左邊第一個字體開始判斷,如果沒有對應的字體,就直接採用下一種字體,如果到最後都沒有可用的字體,就採用電腦預設字體,這時就可以透過 generic-family 來指定哪種預設字體。
舉例來說,下面這行 CSS,會先找第一種字體,若不支援或沒有該字體,則採用第二種字體,依此類推,最後使用通用字,從下方例子亦可以看到,字體名稱時不用加上雙引號,但如果你的字體名稱中間空格,就一定要加上雙引號。
body{ font-family:第一種字體, 第二種字體, "第三種 字體", "通用字"; } generic-family 通用字上面提到了 generic-family 這個專有名詞,翻譯成中文就是「通用字」,也就是在作業系統中完全找不到對應字體預設會顯示的字體,因此通用字會寫在 font-family 的最後面,作為最終的選項,當然不設定通用字也是可以,屆時將自動採用系統預設字體,也會導致不同作業系統顯示的結果有所不同。
常用的通用字有五種,分別是 sans-serif ( 無襯線體 )、serif ( 襯線體 )、monospace ( 等寬體 )、cursive ( 手寫體 ) 和 fantasy ( 幻想體 ),其他還有 system-ui、emoji、math 和 fangsong,但因目前支援度與用途不廣,就不在這裡做介紹。
襯線體 serif 、無襯線體 sans-serif
襯線 se...