字體屬性包含的內(nèi)容很多，我們可以根據(jù) Sketch 或 Figma 的文字屬性欄為例，分別進行解釋。

1.1 字體選擇 Font-family

字體就是文字的不同風(fēng)格。

在 UI 的字體應(yīng)用中，字體正常顯示的條件，是你的設(shè)備加載過對應(yīng)的字體文件。比如我們在 Windows Font 文件夾中添加的字體，就是為了在設(shè)計過程可以調(diào)用它們。

同理，我們想要設(shè)計一套 B 端界面，使用的字體不僅僅是要你自己電腦裝過，還需要用戶的電腦也裝過。所以，B端的設(shè)計中，我們對字體的使用的字體范圍是很小的，中英文常用字體如下所示：

針對中文項目的設(shè)計，除非對部分?jǐn)?shù)字想進行凸顯可以選擇其它英文字體，不然建議統(tǒng)一使用微軟雅黑或者思源黑展開設(shè)計即可（即使中間出現(xiàn)英文）。

不用太擔(dān)心這兩字體用戶沒有這樣的問題，比較標(biāo)準(zhǔn)的黑體樣式差異不會太大，網(wǎng)頁的基礎(chǔ) CSS 樣式表調(diào)用字體都會做多手準(zhǔn)備，比如下面這段代碼：

Font-family：PingFang SC, "SF Pro SC", "SF Pro Text", "Helvetica Neue", Helvetica, Roboto,'arial', 'microsoft yahei ui', "Microsoft YaHei", SimSun, sans-serif

每一個逗號前是一個字體，瀏覽器會根據(jù)這個排序依次讀取你本地相關(guān)的字體文件，來顯示網(wǎng)頁中的文字，如果第一個沒有，就換第二個，以此類推。如果全部指定字體沒有的話，就會根據(jù)你當(dāng)前系統(tǒng)默認(rèn)的字體來顯示。

最后，還有一點就是很多設(shè)計師關(guān)心的字體商用版權(quán)問題，在網(wǎng)頁可用的這幾個字體范圍內(nèi)，不需要考慮任何版權(quán)問題，放心使用即可。更復(fù)雜的細(xì)節(jié)我就不在這里展開了。

1.2 字號選擇 - Font-size

文字字號就是文字使用的大小號數(shù)，在網(wǎng)頁中，字體大小根據(jù) px 單位來制定。

通常，網(wǎng)頁設(shè)計中的中文字體最小字號控制在 12px，到 11px 已經(jīng)會有很多文字不能正常顯示了。而純英文或數(shù)字文本最小字號則在 9px 左右。

下表是不同類型文本中使用的字號區(qū)間：

注釋英文、數(shù)字：9-11px

注釋、小段文本：12-13px

正文、小標(biāo)題：14-16px

大標(biāo)題和大數(shù)字：16-20px

建議新手做設(shè)計直接背下這個表，定義字號的時候根據(jù)文本的類型來設(shè)置，不要把 B 端界面設(shè)計當(dāng)成平面畫冊的設(shè)計，會導(dǎo)致字體大小非常失衡。

1.3 字重的選擇 Font-weight

字重是字體筆畫的粗細(xì)，在 UI 設(shè)計的過程中，我們對字體字重的控制，是根據(jù)字體自帶的字重進行調(diào)整的。一套成熟的字體會包含多個級別的字重。

當(dāng)我們點開字重選項菜單的時候，里面顯示的字重是字體文件本身攜帶的，如果沒有包含其它字重，則字重選項就只會有一個默認(rèn)的值。

所以，在設(shè)計過程中無論中英文，只使用 細(xì)體（Light）、常規(guī)（Regular）、粗體（Bold）三種字重即可。

1.4 字色的認(rèn)識 Color

字色，自然就是文字的色彩了。我們對字色的應(yīng)用會放在下一篇色彩規(guī)范里具體說明，在這邊先分享一些網(wǎng)頁中字色的基本常識。

在網(wǎng)頁中，字體的用色只能用純色，避免在 B 端使用漸變性字色。同時，網(wǎng)頁的色彩只使用 RGB 模式，并且用 16 進制代碼來指向具體的色彩，也就是色彩面板中常見的那一串符號。

1.5 文本樣式 Font-style、Text-Description

除了這些選項外，最后再說一個，就是文本的樣式內(nèi)容。在網(wǎng)頁設(shè)計中，除了以上的文字屬性設(shè)置外，CSS 還可以為文本添加下面的效果：

除了對文字本身的樣式屬性做設(shè)置外，我們還需要考慮文字置入到畫布中的排版問題。為了讓文本可以更好的實現(xiàn)頁面的布局、瀏覽的效果，就要來了解下面這些設(shè)置。

2.1 文本區(qū)域 Display

首先講文本區(qū)域，我們說過任何 B 端設(shè)計中的元素，都包含一個矩形的視圖。對于一整段文字來說，它的視圖區(qū)域即接下來要說的文本區(qū)域。

網(wǎng)頁文本區(qū)域設(shè)置和軟件中的設(shè)置是非常一致的（比手機客戶端直觀得多），文本區(qū)域分水平適應(yīng)、定款模式、固定尺寸三種。

在設(shè)計過中，我們要根據(jù)該段文本的類型，來決定使用哪種文本模式。

2.2 對齊模式 Text-align

對齊模式，則是文字內(nèi)容在文本區(qū)域中的對齊方向，最常規(guī)的左中右對齊就不多做介紹了。

我們要講講在網(wǎng)頁設(shè)計中，是提供水平對齊選項的。如果一個文本區(qū)域大于文字的高度，那么文字就會水平方向居中。

水平居中的作用類似在表格中，有的表內(nèi)文本既可能只有一行，也可能有兩行，于是使用這種對齊模式就可以適應(yīng)不同的情況。而該設(shè)置在移動端設(shè)計中是很少用到的。

還有，在網(wǎng)頁的范疇里，文本的對齊是不會使用兩端對齊的。

因為兩端強行對齊會導(dǎo)致文字間距被奇怪的修改，非常影響視覺效果和閱讀體驗。專業(yè)的網(wǎng)站對多行文本的處理都使用自然對齊，右側(cè)不統(tǒng)一是正?，F(xiàn)象。

2.3 行高 Line-height

行高，也是一個讓所有 UI 設(shè)計師都頭疼的問題。行高是文本區(qū)域內(nèi)一行文字實際高度的數(shù)值，和字號不是同一個屬性。

使用行高的主要目的是為了讓多行文本的閱讀體驗?zāi)軡M足我們的需要，因為如果行高沒有設(shè)置，在網(wǎng)頁中兩行文字等于沒有間距，無法正常閱讀，所以我們可以通過行高制定成寬松或緊湊的樣式。

在網(wǎng)頁設(shè)置中，最讓新手困惑的就是行高應(yīng)該怎么定。建議新手行高控制在字號的 1.2-2 倍之間，然后根據(jù)自己需要和實際效果做決定即可，沒有萬能的行高默認(rèn)數(shù)值，一定要自己做測試。

2.4 段間距 P padding

最后，在文字布局中軟件有提供給我們一個屬性，段間距，即段落之間的區(qū)域，通過增加留白來提升閱讀體驗。

段間距并不是一個 CSS 默認(rèn)的屬性，在實現(xiàn)它的時候往往要用其它屬性代替。盡量避免在 B 端設(shè)計中多段文本使用一個文本框，將每段獨立成一個文本框的設(shè)計，能在最大化開發(fā)的效率。

文字部分的規(guī)范就先介紹到這里，關(guān)于色彩應(yīng)用這個比較麻煩的部分我們就留在下篇進行統(tǒng)一的講解。

下篇再賤～