└── README.md


/README.md:
--------------------------------------------------------------------------------
 1 | # 中文排版常用字体 的 操作系统安装情况 和 CSS Fallback 方案 ![](https://img.shields.io/badge/release-no-red.svg?style=flat-square)
 2 | 
 3 | 
 4 | ## 操作系统默认字体
 5 | 
 6 | **PC**
 7 | 
 8 | 操作系统   | 宋体           | 黑体          | 楷体         | 仿宋体
 9 | --------- | ------------- | ------------ | ------------ | -------------
10 | Win XP    | 宋体（SimSun）, 新宋体（NSimSun）, 新细明體（PMingLiu）| 黑体（SimHei） | 楷体（Kaiti_GB2312）, 微軟標楷（DFKai-SB） | 仿宋（Fangsong_GB2312）
11 | Win 7     | 宋体（SimSun）, 新宋体（NSimSun）, 细明體（MingLiU）, 新细明體（PMingLiu） | 黑体（SimHei）, 微软雅黑（Microsoft YaHei）, 微軟正黑體（Microsoft JhengHei） | 楷体（Kaiti）, 微軟標楷（DFKai-SB）| 仿宋（Fangsong）
12 | Win 8     | 宋体（SimSun）, 新宋体（NSimSun）, 细明體（MingLiU）, 新细明體（PMingLiu）, 华文宋体（STSong）| 黑体（SimHei）, 微软雅黑（Microsoft YaHei）, 微軟正黑體（Microsoft JhengHei）, 华文细黑（STXihei） | 楷体（Kaiti）, 微軟標楷（DFKai-SB）, 华文楷体（STKaiti）| 仿宋（Fangsong）, 华文仿宋（STFangsong）
13 | OS X      | 华文宋体（STSong）,儷宋 Pro（LiSong Pro）| 冬青黑体简体中文 （Hiragino Sans GB）, 华文黑体（STHeiti）, 兰亭黑（LantingHei）, 儷黑 Pro（LiHei Pro） | 华文楷体（STKaiti） | 华文仿宋（STFangsong）
14 | 
15 | > - 根据 [百度统计 - 操作系统份额报告](http://tongji.baidu.com/data/os) 排序, 截止 2015-5
16 | > - Windows 字体信息 [Microsoft Typography - Fonts and Products](http://www.microsoft.com/typography/fonts/product.aspx#Windows)  
17 | > - OS X 字体信息 [Mac OS X v10.6: Fonts list](https://support.apple.com/en-us/HT202408)
18 | 
19 | **Mobile**
20 | 
21 | 操作系统 | 宋体   | 黑体                       | 楷体         | 仿宋体
22 | -------- | ----- | ------------------------- | ------------ | -------------
23 | Android  | -     | Roboto, DroidSansFallback | -            | -
24 | iOS      | -     | Heiti SC                  | -            | -
25 | 
26 | >  - Android 字体信息 [Android Design - Typography](http://developer.android.com/design/style/typography.html)
27 | >  - iOS 字体信息 [iOS Fonts](http://iosfonts.com/) 
28 | 
29 | **待修订**
30 | 
31 | - Win 2003 占有率统计也列入前五，暂未考虑
32 | - Linux, Ubuntu 系统未覆盖
33 | - 明朝體（MS Mincho）定义为日文字体，要归类到宋体么？
34 | 
35 | ## CSS Fallback
36 | 
37 | - 宋体
38 | 
39 | ```
40 | font-family: 'Arial Narrow', 'Times New Roman', STSong, '宋体', serif;
41 | ```
42 | 
43 | - 黑体
44 | 
45 | ```
46 | font-family: Helvetica, Arial, 'Hiragino Sans GB', 'Microsoft Yahei', '黑体', sans-serif;
47 | ```
48 | 
49 | - 楷体
50 | 
51 | ```
52 | font-family: 'Times New Roman', STKaiti, KaiTi, '楷体', serif;
53 | ```
54 | 
55 | - 仿宋体
56 | 
57 | ```
58 | font-family: 'Times New Roman', STFangSong, FangSong, '仿宋', serif;
59 | ```
60 | 
61 | **使用 [`lang`](http://www.w3.org/TR/html5/dom.html#the-lang-and-xml:lang-attributes) 区分 繁体、简体，楷体为例**  
62 | 
63 | ```
64 | :lang(zh-Hans) {
65 |     font-family: 'Times New Roman', STKaiti, KaiTi, '楷体', serif;
66 | }
67 | 
68 | :lang(zh-Hant) {
69 |     font-family: 'Times New Roman', DFKai-SB, STKaiti, KaiTi, '楷体', serif;
70 | }
71 | ```
72 | 
73 | 关于 `Fallback` 还有一个更巧妙的解决方案，来自 [`Han.css`](https://github.com/ethantw/Han)：
74 | 
75 | - 黑体 GB (中國國標)
76 | 
77 | ```
78 | @font-face {
79 |   font-family: 'Han Heiti GB';
80 |   src:
81 |     local('Hiragino Sans GB'),
82 |     local('Lantinghei SC'),
83 |     local('Heiti SC'),
84 | 
85 |     local('Microsoft Yahei'),
86 | 
87 |     local('Droid Sans Fallback')
88 |   ;
89 |    unicode-range: U+"+270C";
90 | }
91 | ```
92 |  
93 | [`unicode-range`](http://dev.w3.org/csswg/css-fonts/#descdef-unicode-range) 在 IE8-, Firefox 上有兼容性问题，加上不可避免的中英文混排场景，还是推荐使用 `font-famliy` 解决 `Fallback` 问题
94 | 
95 | > [can i use - unicode-range](http://caniuse.com/#search=unicode-range)
96 | 


--------------------------------------------------------------------------------