中文Web字体方案

[z4rd]

参考

http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/
http://webdesign.tutsplus.com/articles/the-complete-beginners-guide-to-chinese-fonts--cms-23444
http://daoinsights.com/chinese-web-fonts-part-1/
http://www.zhihu.com/question/19911793
http://yukikodesign.com/orangutangy/?p=191
http://www.uisdc.com/visual-designer-web-fonts
http://www.w3ctech.com/topic/669
http://lepture.com/zh/2014/chinese-fonts-and-yue-css

[z4rd]

Webfont in China

• 现状：
  • 英文webfont api情况：
• 安全解决方案
  （各个平台的最佳显示与安全字体与书写推荐）：
• 更酷的解决方案：
  • 显示测评对比
  • 工具推荐

[z4rd]

There already have lots of great Chinese posts talk about this,
Everything taken into consideration ( font license, loading speed, browsers rendering, windows clearType, encoding, character incomplete, compatibility in different system... )
Chinese developer prefer to choose a safer way, and in some past time we even use png for title in some one page site.

Best display in different device/system( the safer way ):

1.Windows：Choose from “Microsoft YaHei” and “SimSun” 。bold and large text better to choose "Microsoft YaHei", if didn't installed, will replace by “SimSun”.
2.OS X："Hiragino Sans GB"，if didn't installed, will replace by "STHeiti".
3.iOS：Use default "STHeiti".
4.Linux："WenQuanYi Micro Hei", if didn't installed, will replace by else.
5.Android: Use default "Droid Sans".

So the css can be write like this:

font-family: ..., "Hiragino Sans GB", "Microsoft YaHei",
"WenQuanYi Micro Hei", sans-serif;

("..." means English fonts)

Chinese web font( If necessary? ):

Not always free because of the license,
People use this because the site can help compress the font files to a smaller one(only the character you used in the site)..
http://www.youziku.com/
http://cn.justfont.com/
http://www.fonts.com/web-fonts

Other Chinese fonts can be use

And my next step is to find some open source of these font if it's possible, and maybe do some test on different system.. ( There're so many limitations of Chinese web font, maybe people don't like do this because of the time cost )

Webfont generator:
http://www.fontsquirrel.com/tools/webfont-generator
Tool for compress:
http://font-spider.org/

[z4rd]

How to choose a chinese webfont

不同于英文WebFont的五花八门
中文WebFont的选择像抛硬币一样简单 看你怎么选择了

我在乎性能，字体就是要就要简单粗暴得体大方

不同平台的最佳显示效果建议：
1.Windows：Choose from “Microsoft YaHei” and “SimSun” 。bold and large text better to choose "Microsoft YaHei", if didn't installed, will replace by “SimSun”.
2.OS X："Hiragino Sans GB"，if didn't installed, will replace by "STHeiti".
3.iOS：Use default "STHeiti".
4.Linux："WenQuanYi Micro Hei".
5.Android: Use default "Droid Sans".
综上，CSS可以这样写：

font-family: ..., "Hiragino Sans GB", "Microsoft YaHei",
"WenQuanYi Micro Hei", sans-serif;

("..." 代表英文字体，由于每个中文字体都自带英文字型，所以如果想要自定义英文字体的话，需要优先级高于中文字体)

我不怕麻烦，我要最佳中文屏幕阅读体验

源自于选择者某种微妙情感，叫做
‘我不能控制我这颗时时想要不一样的心’ 或者 ‘我想，和设计师做朋友’
时间倒退5年
为了实现设计师所选择的任何字体，中国的前端工程师是这样实现的
图片，siFR，Cufon，@font-face …
@font-face听起来是个不错的选择

CHS	ENG
方正兰亭黑(包括微软雅黑)	"Lantinghei SC" (include "Microsoft YaHei")
冬青黑	"Hiragino Sans GB"
文泉驿米黑	"WenQuanYi Micro Hei"
方正悠黑	"FZYouHeiS-GB"
汉仪旗黑	"HYQiHei"
思源黑体	Source Han Sans/ Noto Sans CJK
信黑体	XinGothic

带宽什么的不重要 我就是要毁灭世界

对于这种比较极端的情况，我有以下建议
1.引入完整版的中文字体
2.用JPG/PNG/SVG/WEBP

[z4rd]

Web not that safe font in Chinese

Easy, safe, readable, more than 90% Chinese developers choose the webfont like this:
"Hiragino Sans GB" or "STHeiti" for ios,
"Microsoft YaHei" or “SimSun” for Windows,
"WenQuanYi Micro Hei" for Linux,
...
中文字符太多了，没有人引用完整的字体文件，为了避免耗时对字体库进行压缩和按需提取，大家甚至没有激情去使用更美的字体，除了上面谈到的，
本文献给
“充满激情的人们"
"想要和设计师做朋友的web developer"

标题字体

正文字体

工具与方法

In past 5 years,
为了实现设计师运用在标题上的特殊字体，中国的前端工程师img，siFR，Cufon
问题在于 SEO 不友好，不具备的可编辑性，不支持 Accessibility 原则

[z4rd]

How can I choose Chinese web font

基本原则：

• 为各平台选择合适的字体。
• 避免强制某平台使用不适合该平台的字体。（比如在 font-family 列表里过于靠前的地方写「SimSun」，这让安装了 Microsoft Office 的 OS X 被迫用它来显示网页。）
• 充分利用各平台高质量的新字体，比如 OS X 的冬青黑体简体中文。
• 对 Windows 这种字体渲染效果反人类的平台优化，避免使用一些效果不佳的字号和字体搭配。比如正文- 可以选择用中易宋体点阵还是微软雅黑，但标题一般就比较适合用微软雅黑——但在 ClearType 的强奸之下，微软雅黑在某些字号的效果也很差（尤其粗体）。DirectWrite 带来一丝转机，但它的普及还需时日。
• 处理好字号、行高、栏宽等字体排印参数的关系。
• 选择合适的西文字体与中文字体搭配。可以尝试使用西文 web font。

Best display in different device/system( the safer way ):

1.Windows：Choose from “Microsoft YaHei” and “SimSun” 。bold and large text better to choose "Microsoft YaHei", if didn't installed, will replace by “SimSun”.
Windows 在 Vista 之前都以中易宋体（在 Windows 里显示名称为宋体，英文名 SimSun）为简体中文默认字体。它在正文字号时为点阵，尚可接受，但字号稍大就难以接受了。中易宋体没有粗体，它的西文部分也完全没法用。
从 Vista 开始，微软提供了微软雅黑作为新的简体中文默认字体。这款字体跟上了时代，但褒贬不一。微软雅黑有粗体，西文部分达到了 Windows 的水准。在自己的网页设计中要不要用微软雅黑来显示正文——这是一大抉择。
注意，决定用不用微软雅黑时要考虑到 pansz 说的 ClearType 问题：有一些 Windows 平台（包括一些 Windows XP）会因为种种原因拥有微软雅黑但却没开 ClearType，此时微软雅黑的效果很糟糕。
Windows 的主要问题在于字体渲染技术依赖过多的人工干预，且 ClearType 的抗锯齿风格不适合汉字。近年来有 DirectWrite 新的抗锯齿风格加入，在大字号时字体渲染效果大有好转，但正文字号的改善有限，且各浏览器并未跟上 DirectWrite 的步伐，以致 Windows 上的字体渲染情况较为混乱。

2.OS X："Hiragino Sans GB"，if didn't installed, will replace by "STHeiti".
OS X 一直用华文黑体（重组后称「黑体-简」）作简体中文默认字体，这个字体族有常规体和粗体，西文部分很差劲（和中易宋体西文差的原因倒还不太一样）。
从 OS X 10.6 开始，系统自带了冬青黑体简体中文（该字体在 10.7 以前没有中文名，叫作 Hiragino Sans GB）。这款字体至今没有成为系统的简体中文默认字体，但它是目前 OS X 上最好的简体中文字体。
OS X 的字体渲染技术显然是目前所有操作系统中最佳的。
另外，OS X 还有一款叫 Hei Regular（family name 是「Hei」）的老旧字体——绝对不要再用它了，除非你知道自己在干什么。

3.iOS：Use default "STHeiti".
4.Linux："WenQuanYi Micro Hei", if didn't installed, will replace by else.
Linux 社区常用的简体中文介面字体似乎主要有文泉驿点阵宋体、文泉驿正黑和文泉驿微米黑，另有一些人会把 Windows 或 OS X 的字体拿去用。文泉驿点阵宋体类似 Windows 的中易宋体，而文泉驿正黑是在无自由黑体可用的情况下被迫制作的质量不太高的黑体。文泉驿微米黑是 Linux 社区现有的最佳简体中文介面字体，但它没有粗体。又因为文泉驿微米黑的质量也没有绝对优势，加之 Linux 各发行版的情况非常复杂，所以或许不指定字体最好。
各 Linux 发行版默认的字体渲染效果参差不齐，成熟一些的（比如 Ubuntu）在某些方面会略强于 Windows。
5.Android: Use default "Droid Sans".

So the css can be write like this:
自由：
font-family: ..., sans-serif;
控制：
font-family: ..., "Hiragino Sans GB", "Microsoft YaHei",
"WenQuanYi Micro Hei", sans-serif;
("..." means English fonts)

为什么没有很多漂亮的、可用于屏幕显示（而非印刷）的简体中文字体可用？
技术
要在有限的像素矩阵上显示文字，就要设法合理的分配给每个笔画适量的像素点。现在主流的网页上一般使用的正文字号算下来通常在 12~20 个像素这个范围，也就是说要在最多 20x20 这么大的一个像素矩阵中显示一个字符。英文的字符数量少，每个字符笔画相对简单，因此可以在这个有限的空间中展示不同的比较优化的排布组合，实现不同个性的字体。中文就要相对困难很多，因为中文字符数量庞大，每个字符的笔画又很复杂，要在有限的像素矩阵中合理分配给每个笔画使得可以区分不同字符是相当困难的。最终的结果就是，相对优化的排布组合是很有限的（这还是在忽略很多复杂部件的笔画细节的基础上），小字号下不同中文字体看起来其实大同小异。
文化
事实上大多数人根本也不在乎字体的多样性。他们只要能看清楚文字就行了，
商业
印刷字体直接从出版商、设计师、电视媒体等地获得收入，而屏幕字体向来依赖操作系统与设计师的推广，由于缺乏相应的产权保护和盈利模式，漂亮而多样的字体对于字体厂家来说是高成本低回报的事情。

[z4rd]

More complex or simpler: How Chinese developer order their font-family

Differences?

Different from diverse English webfonts, 并没有很多漂亮的、可用于屏幕显示（而非印刷）的简体中文字体可用, 原因如下
1 中文的特殊性
要在有限的像素矩阵上显示文字，就要设法合理的分配给每个笔画适量的像素点。现在主流的网页上一般使用的正文字号算下来通常在 12~20 个像素这个范围，也就是说要在最多 20x20 这么大的一个像素矩阵中显示一个字符。英文的字符数量少，每个字符笔画相对简单，因此可以在这个有限的空间中展示不同的比较优化的排布组合，实现不同个性的字体。中文就要相对困难很多，因为中文字符常用字数量庞大（导致完整的字体文件过大），每个字符的笔画又很复杂，要在有限的像素矩阵中合理分配给每个笔画使得可以区分不同字符是相当困难的。最终的结果就是，相对优化的排布组合是很有限的（这还是在忽略很多复杂部件的笔画细节的基础上），小字号下不同中文字体看起来其实大同小异。
另一方面也有商业原因，印刷字体直接从出版商、设计师、电视媒体等地获得收入，而屏幕字体向来依赖操作系统与设计师的推广，由于缺乏相应的产权保护和盈利模式，漂亮而多样的字体对于字体厂家来说是高成本低回报的事情。

所以我们在这里谈到的主要是如何利用不同平台系统内置的网页安全字体从而实现最佳阅读体验，即使针对外部字体引用仍然有许多解决方案（按需读取外置font文件的脚本，webfont 提供商..etc )，但对于大多数中国程序员来说，是一件没有那么省心而益处不多的事情。

Basic principle

1. 为各平台选择合适的字体。
2. 避免强制某平台使用不适合该平台的字体。（比如在 font-family 列表里过于靠前的地方写「SimSun」，这让安装了 Microsoft Office 的 OS X 被迫用它来显示网页。）
3. 充分利用各平台高质量的新字体，比如 OS X 的冬青黑体简体中文。
4. 对 Windows 这种字体渲染效果反人类的平台优化，避免使用一些效果不佳的字号和字体搭配。比如正文- 可以选择用中易宋体点阵还是微软雅黑，但标题一般就比较适合用微软雅黑——但在 ClearType 的强奸之下，微软雅黑在某些字号的效果也很差（尤其粗体）。DirectWrite 带来一丝转机，但它的普及还需时日。
5. 处理好字号、行高、栏宽等字体排印参数的关系。
6. 选择合适的西文字体与中文字体搭配。可以尝试使用西文 web font。

Best display in different device/system

1.Windows：Choose from “Microsoft YaHei” and “SimSun” 。bold and large text better to choose "Microsoft YaHei", if didn't installed, will replace by “SimSun”.
Windows 在 Vista 之前都以中易宋体（在 Windows 里显示名称为宋体，英文名 SimSun）为简体中文默认字体。它在正文字号时为点阵，尚可接受，但字号稍大就难以接受了。中易宋体没有粗体，它的西文部分也完全没法用。
从 Vista 开始，微软提供了微软雅黑作为新的简体中文默认字体。这款字体跟上了时代，但褒贬不一。微软雅黑有粗体，西文部分达到了 Windows 的水准。在自己的网页设计中要不要用微软雅黑来显示正文——这是一大抉择。
注意，决定用不用微软雅黑时要考虑到 pansz 说的 ClearType 问题：有一些 Windows 平台（包括一些 Windows XP）会因为种种原因拥有微软雅黑但却没开 ClearType，此时微软雅黑的效果很糟糕。
Windows 的主要问题在于字体渲染技术依赖过多的人工干预，且 ClearType 的抗锯齿风格不适合汉字。近年来有 DirectWrite 新的抗锯齿风格加入，在大字号时字体渲染效果大有好转，但正文字号的改善有限，且各浏览器并未跟上 DirectWrite 的步伐，以致 Windows 上的字体渲染情况较为混乱。

2.OS X："Hiragino Sans GB"，if didn't installed, will replace by "STHeiti".
OS X 一直用华文黑体（重组后称「黑体-简」）作简体中文默认字体，这个字体族有常规体和粗体，西文部分很差劲（和中易宋体西文差的原因倒还不太一样）。
从 OS X 10.6 开始，系统自带了冬青黑体简体中文（该字体在 10.7 以前没有中文名，叫作 Hiragino Sans GB）。这款字体至今没有成为系统的简体中文默认字体，但它是目前 OS X 上最好的简体中文字体。
OS X 的字体渲染技术显然是目前所有操作系统中最佳的。
另外，OS X 还有一款叫 Hei Regular（family name 是「Hei」）的老旧字体——绝对不要再用它了，除非你知道自己在干什么。

3.iOS：Use default "STHeiti".
4.Linux："WenQuanYi Micro Hei", if didn't installed, will replace by else.
Linux 社区常用的简体中文介面字体似乎主要有文泉驿点阵宋体、文泉驿正黑和文泉驿微米黑，另有一些人会把 Windows 或 OS X 的字体拿去用。文泉驿点阵宋体类似 Windows 的中易宋体，而文泉驿正黑是在无自由黑体可用的情况下被迫制作的质量不太高的黑体。文泉驿微米黑是 Linux 社区现有的最佳简体中文介面字体，但它没有粗体。又因为文泉驿微米黑的质量也没有绝对优势，加之 Linux 各发行版的情况非常复杂，所以或许不指定字体最好。
各 Linux 发行版默认的字体渲染效果参差不齐，成熟一些的（比如 Ubuntu）在某些方面会略强于 Windows。
5.Android: Use default "Droid Sans".

You can order like this:

Free：
font-family: ..., sans-serif;
Strict ：
font-family: ..., "Hiragino Sans GB", "Microsoft YaHei",
"WenQuanYi Micro Hei", sans-serif;
("..." means English fonts)

Just suggest, if you take a look of different chinese you may 大多遵循以上原则，随着屏幕清晰度和相关从业人员的日益增多中文字体正在变得越来好。

[Xuanwo]

这文章的排版也太糟心了