在幾年的開發生涯中碰見過幾次由字體引起的各終端的頁面顯示差異。或許是由移動端等終端字體庫引起的差異引起的，或許是由 Modern Browser 或 IE Browser 直接的解析差異引起的，或許是由字體源設計表現引起的，或許是由所設置的通用字體族字符的編碼格式引起的.來一起來探個究竟吧~
body {
font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Helvetica Neue, PingFang SC, 'Hiragino Sans GB',
'Microsoft YaHei', '\u5fae\u8f6f\u96c5\u9ed1', '微軟雅黑', Arial, sans-serif;
}
兼容性問題說明 FAQS中文 IE9 Browser 不支持英文字體，font-family需設置一項中文的字體族字符，又因為某些瀏覽器不支持中文字符串，最後的方法是使用中文對應英文（或中文轉換 Unicode）的字體族字符。如設置宋體最保險的做法：font-family:Arial, '宋體', Helvetica,sans-serif; -> font-family:Arial, SimSun, Helvetica,sans-serif;如設置微軟雅黑最保險的做法：font-family:'Microsoft YaHei','微軟雅黑', sans-serif 或 font-family:'\u5fae\u8f6f\u96c5\u9ed1', 'Microsoft YaHei','微軟雅黑', sans-serif。IE 不支持 思源黑體探究：思源黑體與傳統字體的行高標準不同，其字體中的 FontBBox 這項屬性引起字體基線過高。字體源為第三方字體，如思源黑體時，Modern Browser 表現正常，IE Browser 表現字體行高不垂直居中。IE Browser 須引入 IE hook 針對性的在 IE Browser 為字體添加 padding-top:3px 解決，或者直接不引用瀏覽器不匹配的字體。字體族字符屬於字符的，不需要加引號，否則在 IE6/7 裡面會失效，並且後面的樣式也會不生效！在 Microsoft YaHei 後加上 微軟雅黑 是為了 兼容 opera。font-family:'Microsoft YaHei','微軟雅黑', sans-serif。針對 Windows 下 IE 的正文使用宋體效果好。針對雅黑字體，用 13px 和 15px 等奇數字體顯示效果更好。宋體在 Windows 作業系統上顯示良好，但是僅限於 12 像素和 14 像素。超出 14 像素的字基本就會出現字不夠方正，鋸齒明顯的現象。在 Mac 上各種字號都可以很好的顯示。這是因為 Mac 上針對字體所做的反鋸齒效果做的比較好。元素使用 line-height 時 Android 端表現不垂直居中。需用 flexbox 或 padding 解決。認識 font-family含義：為元素設置字體。字體是優先級從左往右順序執行，字體間由 逗號 分割的 字體名 或 字體族名。解析器會從左往右遍歷font-family的值，直到系統中含有並能顯示該字體為止。
語法：font-family: "Gill Sans Extrabold", sans-serif;
例如：Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif.`例如， "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif例如， "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace.`草書字體。這種字體有的有連筆，有的還有特殊的斜體效果。因為一般這種字體都有一點連筆效果，所以會給人一種手寫的感覺。例如，"Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive.`Fantasy 字體主要是那些具有特殊藝術效果的字體。例如，Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.`從瀏覽器所處平臺處獲取的默認用戶界面字體。由於世界各地的排版習慣之間有很大的差異，這個通用選項 is provided for typefaces that don't map cleanly into the other generics針對顯示數學相關字符的特殊樣式問題而設計的字體：支持上標和下標、跨行括號、嵌套表達式和具有不同含義的 double struck glyphs。一種漢字字體，介於宋體和楷體之間。這種字體常用於某些政府文件。<family-name>：一個字體族的名字。例如 Times 和 Helvetica 都是字體族名。字體族名可以包含空格，但包含空格時應該用引號。
<generic-name>：通用字體族名是一種備選機制，用於在指定的字體不可用時給出較好的字體。通用字體族名都是關鍵字，所以不可以加引號。在列表的末尾應該至少有一個通用字體族名。以下是該屬性可能的取值以及他們的定義。
實例展示-有效的字體族名字體族名或者是引號包括的字符串，或者是不含引號的一個或多個合法標識串構成的。
這意味著在沒有帶引號的字體族名的開頭是不能使用標點符號字符和數字字符的。
/* 有效字體 */
font-family: 'Gill Sans Extrabold', sans-serif;
font-family: 'Goudy Bookletter 1911', sans-serif;
/* 無效字體 */
font-family: Goudy Bookletter 1911, sans-serif; /* 字符間有空格需加引號 */
font-family: Red/Black, sans-serif; /* 使用標點符號字符 需要加引號 */
font-family: 'Lucida' Grande, sans-serif; /* 引號標錯，應為：'Lucida Grande' */
font-family: Ahem!, sans-serif; /* 使用標點符號字符 需要加引號 */
font-family: test @foo, sans-serif; /* 使用標點符號字符 需要加引號 */
font-family: #POUND, sans-serif; /* 使用標點符號字符 需要加引號 */
font-family: Hawaii 5-0, sans-serif; /* 使用數字字符 需要加引號 */
移動端三大手機系統字體ios 系統android 系統默認中文字體是 Droidsansfallbackwinphone 系統對比測試機 iphone 4s、三星 GT-N7000 android 2.3.6、HTC windows Phone 8.0 三種手機中的默認中文字體和英文字體展現：
終端字體差異對比有關襯線字體和無襯線字體的差別
有關襯線字體和無襯線字體的差別對比字體差異，建議使用系統默認字體，另外移動端手機都同時兼容 Helvetica Neue ，因此適配可為
body {
font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Helvetica Neue, PingFang SC, 'Hiragino Sans GB',
'Microsoft YaHei', '\u5fae\u8f6f\u96c5\u9ed1', '微軟雅黑', Arial, sans-serif;
}
中英文字體對照表在 css 中推薦使用中文字體的英文表示法，以下附常見中文字體的英文名：
Mac OS 的一些：
華文細黑：STHeiti Light [STXihei]蘋果儷中黑：Apple LiGothic MediumPMingLiU Windows 的一些：
仿宋_GB2312：FangSong_GB2312裝 Office 會生出來的一些：
字體中文名-英文名-Unicode 對照表字體中文名-英文名-Unicode對照表相關文獻修正思源黑體在 Adobe 軟體中文本選區過高的問題原文-web 端字體兼容性適配（https://liejiayong.github.io/idea-domain/post/%5Bfont%5D%5Bwebfont%5Dweb%E7%AB%AF%E5%AD%97%E4%BD%93%E5%85%BC%E5%AE%B9%E6%80%A7%E9%80%82%E9%85%8D.html#%E5%89%8D%E8%A8%80）