font-family 字體及各大主流網站對比

@經常使用字體對應表：

HTML，CSS，font-family：中文字體的英文名稱

宋體 SimSun
黑體 SimHei
微軟雅黑 Microsoft YaHei
微軟正黑體 Microsoft JhengHei
新宋體 NSimSun
新細明體 PMingLiU
細明體 MingLiU
標楷體 DFKai-SB
仿宋 FangSong
楷體 KaiTi
仿宋_GB2312 FangSong_GB2312
楷體_GB2312 KaiTi_GB2312

宋體：SimSuncss中中文字體（font-family）的英文名稱
Mac OS的一些：
華文細黑：STHeiti Light [STXihei]
華文黑體：STHeiti
華文楷體：STKaiti
華文宋體：STSong
華文仿宋：STFangsong
儷黑 Pro：LiHei Pro Medium
儷宋 Pro：LiSong Pro Light
標楷體：BiauKai
蘋果儷中黑：Apple LiGothic Medium
蘋果儷細宋：Apple LiSung Light
Windows的一些：
新細明體：PMingLiU
細明體：MingLiU
標楷體：DFKai-SB
黑體：SimHei
新宋體：NSimSun
仿宋：FangSong
楷體：KaiTi
仿宋_GB2312：FangSong_GB2312
楷體_GB2312：KaiTi_GB2312
微軟正黑體：Microsoft JhengHei
微軟雅黑體：Microsoft YaHei
裝Office會生出來的一些：
隸書：LiSu
幼圓：YouYuan
華文細黑：STXihei
華文楷體：STKaiti
華文宋體：STSong
華文中宋：STZhongsong
華文仿宋：STFangsong
方正舒體：FZShuTi
方正姚體：FZYaoti
華文彩雲：STCaiyun
華文琥珀：STHupo
華文隸書：STLiti
華文行楷：STXingkai
華文新魏：STXinwei

@網站應用：
1，京東body和字體初始化代碼（借鑑）：
a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var {
    margin: 0;
    padding: 0;
}
body {
    background: #fff none repeat scroll 0 0;
    color: #666;
    font: 12px/150% Arial,Verdana,"宋體";
}
2，黃淮字體初始化代碼(反面教材)：
body {
    
    color: #666;
    font-family: "宋體","SimSun";
    font-size: 12px;
    line-height: 1.5;
}
---宋體在顯示英文時很醜，例如小寫的g
3，物通網字體初始化代碼：
body {
    background: #fff none repeat scroll 0 0;
    color: #333333;
    font-family: Tahoma,Arial,"宋體";
    font-size: 12px;
    line-height: 22px;
    margin: 0;
    padding: 0 0 12px;
}
4，新一站body和字體初始化代碼（借鑑）：
body, html {
    font-family: Tahoma,Arial,"Hiragino Sans GB",simsun,sans-serif;
    font-size: 12px;
    height: 100%;
    line-height: 1.6;
}
a, abbr, acronym, address, article, aside, audio, blockquote, body, button, canvas, caption, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, iframe, img, ins, label, legend, li, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, s, section, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, u, ul, var, video {
    border: 0 none;
    margin: 0;
    padding: 0;
}
5，淘寶body和字體初始化代碼（借鑑）：
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0;
    padding: 0;
}
body, button, input, select, textarea {
    font: 12px/1.5 tahoma,arial,"Hiragino Sans GB",宋體,sans-serif;
}
6，錘子科技body和字體初始化代碼（借鑑）：
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
}
body {
    color: #666;
    font-family: Helvetica,Arial,"Hiragino Sans GB","Microsoft Yahei","微軟雅黑",STHeiti,"華文細黑",sans-serif;
    font-size: 14px;
}

6，新浪body和字體初始化代碼（借鑑）：
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
    margin: 0;
    padding: 0;
}
body {
    background: #fff none repeat scroll 0 0;
    color: #333;
    font: 12px/20px "SimSun","宋體","Arial Narrow",HELVETICA;
    padding: 5px 0;
}
.main-nav {
    font-family: "Microsoft YaHei","微軟雅黑","SimSun","宋體";
}
body, td, th {
    font-family: 宋體;
}
---整站大部分用的是宋體16x/26x

@CSS設置字體方法

1，CSS如何控制字間距？

在須要設置的CSS標籤下加入一下代碼便可。 word-spacing:8px; letter-spacing: 1px; 具體是哪一個本身配置測試下。

 

@CSS,font-family,好看經常使用的中文字體

轉載自http://www.zreading.cn/ican/2014/10/css-font-family/

例1（小米米官網）：font-family: "Arial","Microsoft YaHei","黑體","宋體",sans-serif;

例2（淘寶技術研發中心）：font: 12px/1.5 Tahoma,Helvetica,Arial,'宋體',sans-serif;

例3（加網 ）：font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;

例4（淘寶UED）：font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;

例5（一淘UX）:font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微軟雅黑', Arial, sans-serif;

font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;

---總結百家所長：font: 12px/150% Tahoma,Helvetica,Arial,Verdana,"Microsoft YaHei","SimSun","宋體";

 

Windows 中的中文字體。
在默認狀況下，也就是未自行安裝新字體或者 Office 等文字處理軟件的狀況下，Windows 默認提供下列字體：
Windows 95/98/98SE 宋體、黑體、楷體_GB23十二、仿宋_GB2312
Windows XP/2000/2003/ME/NT 宋體/新宋體、黑體、楷體_GB23十二、仿宋_GB2312 (Windows XP SP3 宋體-PUA)
Windows Vista/7/2008 宋體/新宋體、黑體、楷體、仿宋、微軟雅黑、SimSun-ExtB
那麼每種字體能顯示那些漢字呢？
Vista 以前的 Windows 中宋體/新宋體、黑體支持 GBK 1.0 字符集，
楷體_GB23十二、仿宋_GB2312 支持 GB2312-80 字符集。
（注：Windows 3.X 只能支持 GB2312-80 字符集）
Vista 及以後的 Windows 中宋體/新宋體、黑體、楷體、仿宋、微軟雅黑支持 GB18030-2000 字符集，
SimSun-ExtB 只支持 GB18030-2005 字符集擴展 B 部分。
下面對字符集進行簡單的介紹：
GB2312-80 < GBK 1.0 < GB18030-2000 < GB18030-2005
GB2312-80 中的字符數量最少，GB18030-2005 字符數量最多。
GB2312-80 是最先的版本，字符數比較少；
GBK 1.0 中的漢字大體與 Unicode 1.1 中的漢字數量相同；
GB18030-2000 中的漢字大體與 Unicode 3.0 中的漢字數量相同，主要增長了擴展 A 部分；
GB18030-2005 中的漢字大體與 Unicode 4.1 中的漢字數量相同，主要增長了擴展 B 部分；
因爲 Unicode 5.2 的發佈，估計 GB18030 會在近期發佈新版本，增長擴展 C 部分。
須要說明的是在 GB18030 中擴展 B 部分並非強制標準。
若是想查看 GB18030 的標準文本，請訪問 http://www.gb168.cn 中的強標閱讀。
若是想了解 Unicode 的內容，請訪問 http://www.unicode.org。
如今糾正網上廣泛的一個錯誤：
GB18030-2000 和 GB18030-2005 都不支持單字節的歐元符號
與簡體中文有關的代嗎頁以下：
936 gb2312 簡體中文(GB2312)————實際上是GBK
10008 x-mac-chinesesimp 簡體中文(Mac)
20936 x-cp20936 簡體中文(GB2312-80)
50227 x-cp50227 簡體中文(ISO-2022)
51936 EUC-CN 簡體中文(EUC)
52936 hz-gb-2312 簡體中文(HZ)
54936 GB18030 簡體中文(GB18030)
補充：
使用楷體_GB23十二、仿宋_GB2312後，在 Windows 7/Vista/2008 中可能再也不顯示爲對應的字體。
這是由於 Windows 7/Vista/2008 中有楷體、仿宋，默認狀況下沒有楷體_GB23十二、仿宋_GB2312，字體名稱相差「_GB2312」。

@總結：
1，Arial出鏡率最高，通常在第二位，Arial 確實是前 ClearType 時代 Windows 裏最好的幾個
正文字體之一（還有 Verdana 和 Tahoma 等）。
2，其次是Tahoma，3個大網站把它放在第一位。
3，宋體，"SimSun"---微軟宋體，通常放在最後兩位。
4，總結，使用原則------Tahoma，Arial，Verdana能夠放在前邊，宋體放在最後。其餘能夠嘗試用下微軟雅黑等字體。

@字體名稱最好寫成英文，不然編碼問題有些地區可能看到的是亂碼
1，simsun=宋體
2，在西方國家羅馬字母陣營中，字體分爲兩大種類：Sans Serif(偏粗，厚)和Serif(偏細)
---Verdana等則屬於Sans Serif字體。對中文而言，一樣存在這兩大種類，很明顯，
宋體、細明體(繁體中經常使用)等就屬於Serif，而黑體、幼圓等則屬於Sans Serif。 
3，Microsoft Yahei微軟雅黑
4，tahoma字體，Tahoma和Verdana師出同門，同爲名設計師馬修·卡特的做品。
---xyz首選字體
5，Arial，xyz次選字體
6，不會設計，仿好的網站，例如新一站的字體初始化代碼：font-family: Tahoma,Arial,"Hiragino Sans GB","simsun",sans-serif;

 

摘自：https://www.cnblogs.com/zxrbky/p/9275338.html