簡寫屬性
font: [[<font-style> || [normal | small-caps] || <font-weight>]? <font-size> [/<line-height>]? <font-family>] | caption | icon | menu | message-box | small-caption | status-bar
初始值：font-style:normal,font-weight:normal,font-size:medium,line-height:1
舉例：font: italic normal bold 1.5rem/1.2 Verdana, Helvetica, Arial, sans-serif;
-
在最大的
[]里除了font-size和font-family，其余屬性都是可選的 -
若直接使用簡寫形式，那么省略的屬性會采用默認值，相當於完整的寫了一遍font的所有屬性，可能會對想要繼承的屬性有影響
-
在最大的
[]外的屬性值可以讓字體設置成操作系統字體值button { font: caption; } /* 按鈕的字體和操作體統中的按鈕一樣 */ /* caption：用於說明文字的控件(如按鈕)、 icon：標注圖標、 menu：下拉菜單和菜單列表、 message-box：對話框、 small-caption：標注小型控件、 status-bar：窗口的狀態欄 */
字體族
css定義了5種通用的字體族：襯線字體族、無襯線字體族、等寬字體族、手寫字體族、奇幻字體族。有一篇文章清楚地講述了字體族的特點和區別：五類字體serif，sans-serif，monospace，cursive和fantasy
-
在
font-family屬性中使用通用字體族(serif, sans-serif,monospace,cursive,fantasy)，那就會依賴瀏覽器默認的字體(當然這個字體屬於你選擇的通用字體族) -
在指定的字體名稱后面添加類似效果的字體名稱或通用字體族，確保該字體失效還能有類似的字體替代，不然會采用系統默認字體
-
如果字體名稱有空格，應使用引號(這點不是強制的)，但如果字體名與關鍵字(可能是字體族)沖突，那就一定要用引號
body { font-family: serif; font-family: Georgia, serif; font-family: Times, 'Times New Roman', Georgia, 'New York', serif; font-family: 'cursive', cursive; }
使用@font-face：自定義字體
@font-face {
/* 必須的描述屬性，font-family和src，一個指定被引用時的名稱，一個指定字體資源的鏈接 */
font-family: <family-name>;
src: [[<uri>[format(<string>#)]?]|<font-face-name>]#;
/* 其他描述 */
font-style: normal;
font-weight: normal;
font-stretch: normal;
font-variant: normal;
font-feature-settings: normal;
unicode-range: U+0-10FFFF;
}
-
在
@font-face使用的屬性值僅作為描述作用，不能改變字體的樣式，比如：一款自定義字體有多個字型（粗細、字寬等），被引用時通過描述區分/* 正常字型 */ @font-face { font-family: 'SwitzeraADF'; src: url('SwitzeraADF-Regular.otf') format('opentype'); font-weight: normal; } /* 粗體字型 */ @font-face { font-family: 'SwitzeraADF'; src: url('SwitzeraADF-Bold.otf') format('opentype'); font-weight: bold; } -
@font-face是惰性加載字型的，需要用到的時候才會加載；但瀏覽器不管是否需要都會全部下載緩存 -
使用
@font-face可以自定義網頁上的字體，如果字體資源失效或格式不被瀏覽器支持，文本會使用備用的字體顯示 -
不同時代的不同瀏覽器支持的字體格式可能不同，可以使用下面的模版做到兼容(其余屬性采用默認)：
@font-face { font-family: 'SwitzeraADF'; src: url('SwitzeraADF-Regular.eot'); /* 針對ie9 */ src: url('SwitzeraADF-Regular.eot?#iefix') format('embedded-opentype'), /* 針對ie6～ie8 */ url('SwitzeraADF-Regular.woff') format('woff'), /* 針對多數現代桌面瀏覽器 */ url('SwitzeraADF-Regular.ttf') format('truetype'), /* 針對ios和android設備 */ url('SwitzeraADF-Regular.svg#switzera_adf_regular') format('svg'); /* 針對舊款的ios設備 */ } -
在線字體格式轉換網站：cloudconvert
font-weight
初始值：normal
取值范圍：normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
- 100或200可能是一樣的效果，這個跟字體的字重等級划分有關(小於9)，也就是說
值名稱對應某個數字區間，在這個區間內字體樣式不會發生改變
font-size
初始值：medium(默認16px)
取值范圍：xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <length> | <percentage>
- 較為常用的是數字+單位的組合，單位有em、rem、px、pt等
- 采用百分數的時候，會基於父元素的字號計算，
1em == 100% - 在某些瀏覽器中，等寬字體字號設置為基於父元素相關的值(父元素字號為medium)，不會基於父元素的字號計算，而是瀏覽器默認的等寬字號(默認13px)，可以采用
font-family: monospace, serif;解決，即添加serif
font-style
初始值：normal
取值范圍：italic | oblique | normal
- italic(斜體)和oblique(傾斜體)通常使用同一款字型，可以做到相互替代
font-stretch
初始值：normal
取值范圍：normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
- 字體拉伸只有在使用的字體有多個寬度字型的時候才會生效，不然都會是normal效果
font-kerning
初始值：auto
取值范圍：auto | normal | none
- none：用戶代理忽略字體中的字距信息
- normal：用戶代理正常處理字距，即使用字體中的字距數據
- auto：讓用戶代理選擇合適的處理方式，具體怎么做依賴於使用的字體
font-variant
初始值：normal
取值范圍：normal | small-cap (css2.1) (css3)
- small-cap：類似於
text-transform: uppercase;，區別：大寫字母采用較大的大寫字母顯示，小寫字母采用較小的大寫字母顯示 - 使用的字體不存在small-cap字型，用戶代理可能會自己創建或者采用和
text-transform: uppercase;一樣的效果