在界面設計(jì)中經常要(yào)處理(lǐ)文(wén)字，會(♠‍‍huì)面對(duì)大(dà)量的(de)字體(tǐ)對(duβ$><ì)象。網頁中的(de)字體(tǐ)是(shì)如(rú)何顯示的β¥(de)？這(zhè)個(gè)問(wè→Ωn)題和(hé) CSS 中的(de) font-₹↕family 有(yǒu)著(zhe)緊密的(de)關系。當我們≈∏α←拿(ná)到(dào)設計(jì)稿去(qù)實現(xi"∑ ¶àn)一(yī)個(gè)網頁時(shí)，經常會(huì$∏♦↓)發現(xiàn)設計(jì)稿當中一(yī)般使用(yòngσ≥)的(de)字體(tǐ)都(dōu)是(shì)&nδ©bsp;PingFang SC 這(zhè)一(y↑∞φī)款字體(tǐ)。這(zhè)是(shì✘‌$)因為(wèi)我們的(de) UI 設計(jì)師(shī) 一(y♥™ī)般使用(yòng)的(de)都(dōu)是(shì) Mac 電(di♥§♦àn)腦(nǎo)制(zhì)作(zuò)的(de)設計(jì>ε>Ω)稿。但(dàn)是(shì)我們并不(bù)能(néng)傻乎‍✔®乎的(de)就(jiù)按照(zhào)設計(jì)稿直接設置 fφ←ont-family:PingFang S"≈β•C; 這(zhè)樣的(de)代碼。

一(yī)般我們都(dōu)會(huì)為(wèi) &π♥↔;body 标簽，指定 font-f÷∑amily 屬性，為(wèi)整個(• gè)網頁設置統一(yī)的(de)字體(tǐ)，而且盡可←↕ ≤(kě)能(néng)的(de)使用(yò ↑ng)各個(gè)系統下(xià)的(de)默認字體(tǐ)。₹"font-family 是(shì)前端≠±的(de)一(yī)個(gè) CSS 屬性，用(yòng)來(lái)€₹ε 定義字體(tǐ)名稱，控制(zhì)網頁用(yòng)什(shén)麽字體™'₩∞(tǐ)顯示。它會(huì)根據所填的(de)字體(tǐ)↔₩∏®名稱查找用(yòng)戶電(diàn)腦(nǎo)是(sh≈↔α≥ì)否有(yǒu)對(duì)應的(de)字體(tǐ)，進 λ‌而讓字體(tǐ)顯示在網頁中。由于 Windows 電 ©(diàn)腦(nǎo)默認是(shì)沒有(yǒu)蘋方的(de)，₩Ω®所以我們的(de)蘋方字體(tǐ)設計(π​₹jì)稿在 Windows 中就(jiù↓§α)顯示微(wēi)軟雅黑(hēi)。看(kàn)著(zhe)÷★φ↔簡單的(de)文(wén)字，其實還(hái)可(kě)以拆分(fēn)為('πwèi)更細化(huà)的(de)屬性，比如(rú)字體(tǐ)、大(dà)♦©↓小(xiǎo)、顔色、字重、行(xíng)高(gāo)、對(duì) ÷γ£齊方式等等。在設計(jì)師(shī)常用(yòn≠®'g)的(de) Photoshop、Sk‍↕etch 設計(jì)軟件(jiàn)中都(dōu)有(yǒu)對(duì) ≤‍€應的(de)設置。基本上(shàng)，所有(yǒu)的(de)網頁都(dō¥₽u)需要(yào)定義 font-family。為(wèi)了(le)保$" 持同一(yī)個(gè)網頁在不(bù)同平台環境的(de)兼容α←↑性，需要(yào)寫不(bù)止一(yī)個 ₽¥(gè)字體(tǐ)。font-family 也♦λδ(yě)是(shì)可(kě)以根據不(bù)同網站(zhàn)風✔₩✘'(fēng)格和(hé)需求設置不(bù)同的σ€φ(de)字體(tǐ)。那(nà)麽這(zhè)裡(lǐ)就(j>☆<♣iù)拿(ná)個(gè)結構更簡單、理(lǐ)解更容易的≈↕(de)例子(zǐ)來(lái)說(shuō)明(m↑∑≠íng)。比如(rú)一(yī)個(gè)比較标準的(de) f•<★☆ont-family 例子(zǐ)，不(bù)同字體(tǐδ™÷)用(yòng)英文(wén)逗号隔開(kāi)，含有(yǒu)空(kōng™₽)格的(de)要(yào)加英文(wén)雙引号。調用(yòng)規則是(s​π≥∑hì)：如(rú)果浏覽器(qì)不(bù)$‌♠支持第一(yī)個(gè)字體(tǐ)，則會(huì)嘗試下(xià"£)一(yī)個(gè)，以此類推。由于英文φ₽(wén)字體(tǐ)中大(dà)多(duō)不(bù)‍π±包含中文(wén)，需要(yào)先對(duì)英文(wén)字體(tǐ)聲 ‍明(míng)，這(zhè)樣不(bù)會(huì)影(yǐng)響到>$¶(dào)中文(wén)字體(tǐ)的(de₽£φ>)選擇。所以優先使用(yòng)效果最好(hǎo)的(de)英文(wén)字‌Ωγ體(tǐ)，中文(wén)字體(tǐ)聲明(míng)則緊随其次。為(wèi) ≥了(le)讓 Mac 系統使用(yòng)到(dào) '顯示效果最好(hǎo)的(de)字體(tǐ)，優先聲明(míng) &→'φMac 系統字體(tǐ)。Win 系統默認沒有(yǒu)安裝 Mac 系統€Ωα字體(tǐ)，因此會(huì)延後調用(yòng) Arial 和(h→∞é)微(wēi)軟雅黑(hēi)。

字體(tǐ)兩種最基礎：有(yǒu)襯線字體(tǐα₩λ≤) serif 和(hé)無襯線字體(tǐ) sans-serif。其中襯線₽"指的(de)是(shì)字母結構筆(bǐ)畫(huà)之外★β✘β(wài)的(de)裝飾性筆(bǐ)畫(huà)，比∑÷©¶如(rú)宋體(tǐ)就(jiù)是(shì)典型的♠→∏(de)有(yǒu)襯線字體(tǐ)，常用(yòng)于印刷。而©≈€在互聯網時(shí)代，用(yòng)的(de)最多(duō)的(​÷de)是(shì)無襯線字體(tǐ)，比如(rú)微(‌ δ★wēi)軟雅黑(hēi)。所以在 UI 設計(£ jì)中，主要(yào)界面框架基本使用(yòng)的(de♥♥×)就(jiù)是(shì)無襯線字體(tǐ)。一('©yī)段 font-family 代碼，最後•÷•一(yī)個(gè) sans-serif  就(jiù)表示無襯≈€線字體(tǐ)。關于通(tōng)用(yòng)字體(tǐ)族&✔名，有(yǒu)5種：serif 襯線字體(tǐ)族；sa£≈↔ns-serif 非襯線字體(tǐ)族；m•♣€¶onospace 等寬字體(tǐ)，即字體(tǐ)中每個(♥↔gè)字寬度相(xiàng)同；cursive 草(c ‌←ǎo)書(shū)字體(tǐ)；fantasy 主要(yào)是(✔•shì)那(nà)些(xiē)具有(yǒu)特殊藝術(‌×shù)效果的(de)字體(tǐ)。中文(wén)字體(×  ↑tǐ)界，兩個(gè)有(yǒu)代表性的(←♣←de)分(fēn)類——宋體(tǐ)和(hé)黑(hēi)體(tǐ)☆§​，分(fēn)别對(duì)應著(zhe'♣↑✘)襯線字體(tǐ)和(hé)無襯線字體(tǐ)。選擇字體(tǐ)的Ω₽♣(de)時(shí)候要(yào)考慮多(duō)操 §∑作(zuò)系統。例如(rú) MAC ε©OS 下(xià)的(de)很(hěn)多(duō)中文(wén)字體(t≥×φ™ǐ)在 Windows 都(dōu)沒有→∏ &(yǒu)預裝，為(wèi)了(le)保證 MAC 用(yòng)戶的(de)§→<體(tǐ)驗，在定義中文(wén)字體(tǐ)的(d≥•©£e)時(shí)候，先定義 MAC 用(yòng)戶的(de)中文(wσ♦₩πén)字體(tǐ)，再定義 Window©¶"s 用(yòng)戶的(de)中文(wén)字體(tǐ →)。

所以，為(wèi)什(shén)麽 Windows 顯示微(♦γ​•wēi)軟雅黑(hēi)，Mac 顯示蘋方，歸根到(dào)底還(hái)是☆"≥(shì)在于系統中有(yǒu)沒有(yǒu)安裝對(duì× ★π)應的(de)字體(tǐ)。兼顧中西(xī)，西(xī)文(wε<™←én)在前，中文(wén)在後。Font-family 設置的(de)目的♠™Ω(de)就(jiù)是(shì)讓不(bù)同的(de)系統在面對(duì)>₽錯(cuò)綜複雜(zá)的(de)字體(tǐ)環境時(‌↓shí)，能(néng)夠選擇出适合自(zì)®←δ己顯示效果最好(hǎo)的(de)字體(tǐ)，以此提高(¥‍gāo)網頁界面的(de)視(shì)覺兼容性，提升用(yò↓☆§∑ng)戶體(tǐ)驗。