Ant Design React 字體

字體是體系化界面設計中最基本的構成之一。

我們的用戶通過文本來理解內容和完成工作，科學的字體系統(tǒng)將大大提升用戶的閱讀體驗及工作效率。Ant Design 字體方案，是基于「動態(tài)秩序」的設計原則，結合了自然對數(shù)以及音律的規(guī)則得出的，再經(jīng)過了大量的螞蟻中后臺產(chǎn)品驗證之后，推薦給大家。在中后臺視覺體系中定義字體系統(tǒng)，我們建議從下面五個方面出發(fā)：

1. 字體家族
2. 主字體
3. 字階與行高
4. 字重
5. 字體顏色

字體家族

優(yōu)秀的字體系統(tǒng)首先是要選擇合適的字體家族。Ant Design 的字體家族中優(yōu)先使用系統(tǒng)默認的界面字體，同時提供了一套利于屏顯的備用字體庫，來維護在不同平臺以及瀏覽器的顯示下，字體始終保持良好的易讀性和可讀性，體現(xiàn)了友好、穩(wěn)定和專業(yè)的特性。

@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  'Noto Color Emoji';

參考自 https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ 和 http://markdotto.com/2018/02/07/github-system-fonts/

另外，在中后臺系統(tǒng)中，數(shù)字經(jīng)常需要進行縱向對比展示，我們單獨將數(shù)字的字體 font-variant-numeric 設置為 tabular-nums，使其為等寬字體。

參考 https://stackoverflow.com/questions/32660748/how-to-use-apples-new-san-francisco-font-on-a-webpage#comment78509178_32660790

主字體

我們基于電腦顯示器閱讀距離（50 cm）以及最佳閱讀角度（0.3）對 Ant Design 的主字體進行了一次升級，從原先的 12 上升至 14，以保證在多數(shù)常用顯示器上的用戶閱讀效率最佳。

字階與行高

字階和行高決定著一套字體系統(tǒng)的動態(tài)與秩序之美。字階是指一系列有規(guī)律的不同尺寸的字體。行高可以理解為一個包裹在字體外面的無形的盒子。

Ant Design 受到 5 音階以及自然律的啟發(fā)定義了 10 個不同尺寸的字體以及與之相對應的行高。

在 Ant Design 的視覺體系中，我們建議的主要字體為 14，與之對應的行高為 22。其余的字階的選擇可根據(jù)具體情況進行自由的定義。建議在一個系統(tǒng)設計中（展示型頁面除外），字階的選擇盡量控制在 3-5 種之間，保持克制的原則。

字重

字重的選擇同樣基于秩序、穩(wěn)定、克制的原則。多數(shù)情況下，只出現(xiàn) regular 以及 medium 的兩種字體重量，分別對應代碼中的 400 和 500。在英文字體加粗的情況下會采用 semibold 的字體重量，對應代碼中的 600。

字體顏色

標題字體#000000E0#FFFFFFD9一級文本#000000E0#FFFFFFD9二級文本#000000A6#FFFFFFA6禁用字體#00000040#FFFFFF40一級邊框#D9D9D9FF#424242FF分割線#0505050F#FDFDFD1F布局背景#F5F5F5FF#000000FF

文本顏色如果和背景顏色太接近就會難以閱讀。考慮到無障礙設計的需求，我們參考了 WCAG 的標準，將正文文本、標題和背景色之間保持在了 7:1 以上的 AAA 級對比度。

建議

字體系統(tǒng)的構建，是「動態(tài)秩序之美」的第一步。在實際的設計中，我們還有三點建議：

1. 建立體系化的設計思路： 在同一個系統(tǒng)的 UI 設計中先建立體系化的設計思路，對主、次、輔助、標題、展示等類別的字體做統(tǒng)一的規(guī)劃，再落地到具體場景中進行微調。建立體系化的設計思路有助于強化橫向字體落地的一致性，提高字體應用的性價比，減少不必要的樣式浪費。
2. 少即是多： 在視覺展現(xiàn)上能夠用盡量少的樣式去實現(xiàn)設計目的。避免毫無意義的使用大量字階、顏色、字重強調視覺重點或對比關系。
3. 嘗試讓字體像音符一樣跳躍： 在需要拉開差距的時候可以嘗試在字階表中跳躍地選擇字體大小，會令字階之間產(chǎn)生一種微妙的韻律感。