CSS的字體單位有哪些

本篇內容主要講解“CSS的字體單位有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS的字體單位有哪些”吧!

　　對于繪圖和印刷而言，“單位”相當重要，然而在網頁排版里，單位也是同樣具有重要性，在CSS3普及以來，更支持了一些方便好用的單位（px、em、rem…等），這篇文章將整理這些常用的CSS單位，也幫助自己未來在使用上能更加得心應手。

　　“網頁”和“印刷”的單位

　　若要把單位做區隔，最簡單可以分為“網頁”和“印刷”兩大類，通常對于CSS來說只會應用到網頁的樣式，畢竟真正要做印刷，還是會傾向透過排版軟件來進行設計。

　　網頁（單位）

　　px：絕對單位，代表屏幕中每個「點」（pixel）。

　　em：相對單位，每個子元素透過「倍數」乘以父元素的px值。

　　rem：相對單位，每個元素透過「倍數」乘以根元素的px值。

　　%：相對單位，每個子元素透過「百分比」乘以父元素的px值。

　　網頁（屬性名稱）

　　medium：預設值，等于16px（h5預設值）

　　xx-small:medium的0.6倍（h7預設值）

　　x-small:medium的0.75倍

　　small:medium的0.8倍（h6預設值，W3C定義為0.89，實測約為0.8）

　　large:medium的1.1倍（h4預設值，W3C定義為1.2，實測約為1.1）

　　x-large:medium的1.5倍（h3預設值）

　　xx-large:medium的2倍（h2預設值）

　　smaller：約為父層的80%

　　larger：約為父層的120%

　　印刷

　　pt：打印機的每個「點」，定義為1 pt＝1/72 in，如果在72 dpi的系統上1 px = 1 pt，但如果在96dpi的系統上1 px = 0.75 pt（72/96 = 0.75）。

　　in：英寸，在96 dpi的系統上1 in = 96 px。

　　cm：厘米，在96 dpi的系統上1 cm = 37.795275593333 px。

　　mm：毫米，在96 dpi的系統上1 cm = 3.7795275593333 px。

　　示例展示

　　以下將展示四種不同單位的示例，為公平起見，四個示例都套用預設的div格式，純粹改變font-size看看有何不同，由于子元素若沒有設定font-size，會自動繼承父元素的font-size，使用上就應該要預先初始化字體大小，下面這兩段CSS可以將所有的元素字體大小預設為16px，然后可個別進行調整。

　　html{

　　font-size:16px;

　　}

　　html * {

　　font-size: 1rem;

　　}

　　1. px

　　px是絕對單位，因此只要設定多少px，就會精確的呈現，對于一些講求精準位置的排版而言十分有用，如示例表示的，指定多大px字體就會多大。

　　<div style="font-size:16px;">16px

　　<div style="font-size:20px;">20px

　　<div style="font-size:24px;">24px

　　<div style="font-size:16px;">16px

　　<div style="font-size:32px;">32px</div>

　　2. em

　　em是相對單位，為每個子元素透過“倍數”乘以父元素的px值，如果我們每一層div都使用1.2em，最內層就會是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。（瀏覽器預設字體大小為16px，若無特別指定則會直接繼承父元素字體大?。?/p>

　　<div style="font-size:1.2em;">1.2em

　　<div style="font-size:1.2em;">1.2em

　　<div style="font-size:1.2em;">1.2em

　　<div style="font-size:1.2em;">1.2em

　　<div style="font-size:1.2em;">1.2em</div>

　　3. rem

　　rem是相對單位，為每個元素透過“倍數”乘以根元素的px值，如果我們每一層div都使用1.2rem，最內層就會是16px x 1.2 = 19.2px。（根元素指的是html的font-size，預設為16px）

　　<div style="font-size:1.2rem;">1.2rem

　　<div style="font-size:1.2rem;">1.2rem

　　<div style="font-size:1.2rem;">1.2rem

　　<div style="font-size:1.2rem;">1.2rem

　　<div style="font-size:1.2rem;">1.2rem</div>

　　4. %

　　%百分比是相對單位，和em大同小異，簡單來說em就是百分比除以一百，如果我們每一層div都使用120%，就等同于1.2em，最內層就會是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。

　　<div style="font-size:120%;">120%

　　<div style="font-size:120%;">120%

　　<div style="font-size:120%;">120%

　　<div style="font-size:120%;">120%

　　<div style="font-size:120%;">120%</div>

　　5.small、medium、large&hellip;等

　　字體大小的屬性有七種，分別是xx-small、x-small、small、medium、large、x-large和xx-large，除了x-small，其余六種分別對應h7&mdash;&mdash;h2的標簽文字大小，根據W3C的規范，以medium預設16px為基礎（若html字體預設大小改變，medium也會跟著變），使用固定的百分比乘以medium的大小，例如ss-small預設為16px x 0.6 = 9.6px（瀏覽器顯示為12px）。

　　<div style="font-size:xx-small;">xx-small

　　<div style="font-size:x-small;">x-small

　　<div style="font-size:small;">small

　　<div style="font-size:medium;">medium

　　<div style="font-size:large;">large

　　<div style="font-size:x-large;">x-large

　　<div style="font-size:xx-large;">xx-large</div>

　　6. larger、smaller

　　larger和smaller就是固定百分比為單位，larger為父層的120%，smaller為父層的80%。

　　<div style="font-size:medium;">medium

　　<div style="font-size:larger;">larger

　　<div style="font-size:larger;">larger

　　<div style="font-size:larger;">larger

　　<div style="font-size:smaller;">smaller

　　<div style="font-size:smaller;">smaller

　　<div style="font-size:smaller;">smaller</div>

到此，相信大家對“CSS的字體單位有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！