最標準的系統字體規范font-family

kk_miles 發布于2019-08-29 13:43 / 2430人閱讀

摘要：最標準的系統字體規范注意系統默認字體和瀏覽器默認字體這個差別。值得一提的是，上默認的中文字體渲染是華文黑體，而非作為系統字體的蘋方即冬青黑體，是我們整個中唯一不是系統字體的字體。我們標準化的核心思路是使用系統字體。

最標準的系統字體規范font-family

注意系統默認字體和瀏覽器默認字體這個差別。

直接提供方案：

font: 14px/1.6 
/*西文*/-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial,
/*中文*/PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif;

這些都是些什么字體？ 1、-apple-system, BlinkMacSystemFont：

這兩個值是特殊供 iOS 和 macOS(OS X) 使用的屬性值，前者只被 Safari 識別，后者只被 Chrome 識別。也就是說它們是 Webkit 私有屬性，這兩個值強大的地方就在于，其會根據系統版本的不同，渲染出不同的字體。

2、"Segoe UI", Roboto, Ubuntu：

西文字體的第二梯隊，分別對應了：
"Segoe UI" 對應的是 Windows 和 Windows Phone；
Roboto 對應的是 Google 家的 Android 和 Chrome OS"；
Ubuntu 對應的是 Linux。

3、Helvetica Neue,Helvetica,Arial：

西文字體的最終 fallback：
"Helvetica Neue"對應的是 OS X pre-EI Capitan，實際上它位置靠后的更重要原因是，它在非 EI Capitan 的機器上是一個比較常見的字體；
Helvetica 是世界通用的經典無襯線體；
Arial 是 Windows 3.1 開始就一直隨視窗系統分發的字體，作為最后的回退方案。

4、"PingFang SC", "Hiragino Sans GB"：

"PingFang SC" 即蘋方，是 OS X EI Capitan(10.11) 上的系統中文字體。值得一提的是，EI Capitan 上 Chrome 默認的中文字體渲染是 ST Heiti(華文黑體)，而非作為系統 UI 字體的蘋方；
"Hiragino Sans GB" 即冬青黑體，是我們整個 fallback list 中唯一不是系統字體的字體。加入冬青黑體是因為考慮到無論是在 Mac 還是 Windows 上，冬青黑體的表現都會比微軟雅黑優秀。而自 10.6 開始，OS X 就系統自帶了冬青黑體，因此將其置于微軟雅黑之前。

5、"Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN"

中文字體的第二梯隊：
"Microsoft YaHei UI" 即微軟雅黑 UI ，隨 Windows 8.1 一同發布，相較于微軟雅黑，其對英文、數字的筆畫做了一定修改；
"Microsoft YaHei" 即微軟雅黑，隨 Windows Vista 一同發布，是 Vista 至 Windows 8 的系統字體（Windows 8.1 改用 “微軟雅黑 Light”）；
"Source Han Sans CN" 即思源黑體，是大部分 Android 的系統中文字體。

6、sans-serif

中文字體的最終 fallback，無襯線體，與中文字體的黑體相對應。

思路是什么？

其實，我們使用系統字體規范 font-family 的思路很簡單 —— 從西文到中文，分別對各平臺作一個最基礎的降級

一些問題: 1. 不聲明不就是系統字體嗎？

不聲明字體時，瀏覽器渲染的是默認字體，不一定是系統字體。比如 macOS ，Chrome 默認渲染華文黑體（ST Heiti），而非系統字體蘋方（PingFang SC）；Windows 7，瀏覽器默認渲染中易宋體（Simsun），而非系統字體微軟雅黑（Microsoft YaHei）。

我們標準化的核心思路是使用系統 UI 字體。

顯式地聲明字體，更重要的是保證頁面樣式的安全與可控。比如，我們為 Android 聲明英文字體 Roboto 與中文字體思源黑，是因為 Android 機型百(luan)家(cheng)爭(yi)鳴(tuo)。實際上，即使如此，正如我們的測試結果所示，我們還是不能保證所有 Android 機器都”正確“渲染。因此我們更認為這樣有必要。

2. 寫得越多就一定越好嗎？

回過頭看知乎的 font-family ：

    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

寫得越多顯得越專業嗎？恐怕不是的。也許正是因為專業、經過了思考，知乎才對字體做了刪除、中文字體只做了最基本的 sans-serif 限制。即使在 Windows 7 上，這套 font-family 的渲染是 Arial 和中易宋體（Simsun），即使在 macOS 上英文字體也沒有使用最新的 San Francisco，不過它真的足夠安全。

而我們考慮到業務場景需求，在安全的基礎上，盡量優化各平臺的顯示效果。
所以這東西，不能以好與壞來衡量。

3. 對于設計團隊的意義是什么？

對于設計師而言：
設計師了解各平臺的字體分布、了解字體選擇的限制，以及用戶在該平臺的基本體驗；
在實現設計稿時，能根據所針對的平臺，調整設計稿所用的字體，保持設計稿字體與用戶所見最終效果的一致。

對于 UI 工程師而言：
保證各項目字體樣式的標準統一；
對字體樣式的調試有更清楚地把控。

GPU云服務器云服務器標準規范安全防范視頻監控施工標準規范 linux系統安全加固規范 font-family

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112659.html

給自己的Fonts教程

摘要：書體宋體仿宋體黑體等例如自帶的宋體實為中易宋體。傳統上說的等線體以當代視角來看通常是較為幼細的黑體。前面的過程我們稱之為編碼，后面的這個過程我們稱之為解碼。部分瀏覽器比如可以選擇編碼自動檢測功能，使用基于統計的方法判斷未定編碼。準備工作字符 - Character 字母、數字、漢字、符號等，是一種抽象實體。字形 - Glyph 單個「字符」的具體表達，一個字可有多個不同的字形。 ...

pkwenda 2019-08-29 12:50 評論0 收藏0
CSS編碼規范

摘要：代碼風格文件建議文件使用無的編碼。解釋編碼具有更廣泛的適應性。示例空格強制選擇器與之間必須包含空格。示例字號強制需要在平臺顯示的中文內容，其字號應不小于。示例響應式強制不得單獨編排，必須與相關的規則一起定義。轉載：原地址 1 前言 CSS作為網頁樣式的描述語言，在百度一直有著廣泛的應用。本文檔的目標是使CSS代碼風格保持一致，容易被理解和被維護。雖然本文檔是針對CSS設計的，...

flyer_dev 2019-08-28 18:04 評論0 收藏0
前端筆記之CSS（上）

摘要：宋體注意使用某種特定的字體系列宋體完全取決于用戶機器上該字體系列是否可用這個屬性沒有指示任何字體下載。但是記住，最終選擇上的是最后的那個后代元素。層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對...

番茄西紅柿 2019-04-23 11:45 評論0 收藏0
CSS超全筆記（適合新手入門）

摘要：選擇器和類選擇器區別標準規定，在同一個頁面內，不允許有相同名字的對象出現，但是允許相同名字的。選擇器和類選擇器最大的不同在于使用次數上。當需要設置英文字體時，英文字體名必須位于中文字體名之前。CSS CSS初識 CSS(Cascading Style Sheets) 美化樣式 CSS通常稱為CSS樣式表或層疊樣式表（級聯樣式表），主要用于設置HTML頁面中的文本內容（字體、大小、對齊方式等）...

番茄西紅柿 2019-04-23 11:56 評論0 收藏0
前端基礎入門二（CSS）

摘要：輸入的時候少按一個鍵瀏覽器兼容問題比如使用的選擇器命名，在是無效的能良好區分變量命名變量命名是用不要純數字中文等命名，盡量使用英文字母來表示。選擇器和類選擇器最大的不同在于使用次數上。當需要設置英文字體時，英文字體名必須位于中文字體名之前。回顧上一節HTML 思維導圖 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...

Lorry_Lu 2019-08-30 15:55 評論0 收藏0