中文标准web字体

 

标准的简体中文web字体：

Windows	OS X
黑体：SimHei	冬青黑体: Hiragino Sans GB [NEW FOR SNOW LEOPARD]
宋体：SimSun	华文细黑：STHeiti Light [STXihei]
新宋体：NSimSun	华文黑体：STHeiti
仿宋：FangSong	华文楷体：STKaiti
楷体：KaiTi	华文宋体：STSong
仿宋_GB2312：FangSong_GB2312	华文仿宋：STFangsong
楷体_GB2312：KaiTi_GB2312
微软雅黑体：Microsoft YaHei [as of Win7]

在css中使用中文字体地良好习惯：

同时使用中文字体的中文名和英文名 

当声明一个中文字体的时候，同时声明中文字体的拉丁文名字和中文名字。

这样做的好处是不管你的中文字体是是以拉丁文名还是中文名存储的，你都可以使用中文字体。

font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;

 

英文字体的声明放在中文字体声明之前 

这不是官方的规则，只是我得个人偏好，为什么我要这样做呢？因为英文字形总是不包括中文字体，但是中文字体却包含a-Z单词，所以，如果你先声明中文字体的话，后面声明的英文字体就不会被执行。

所以，如果你先声明英文字体的话，对于英文字母会先执行英文字体，对于不能解析的中文字才会尝试着使用回退字体（也就是英文字体后面声明的字体）。

例如下面：

代码示例：

font-family: Georgia, "Times New Roman", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;

 

声明 MICROSOFT字体以及 MAC 字体

就像英语字体一样，你至少要声明适用于windows的字体和适用Mac的中文字体。至于哪个应该先声明，你要看你针对的平台是什么。

我需要用引号来引中文字体么？

你不需要如下的做法：

font-family: Georgia, "Times New Roman", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;

你应该这样做：

font-family: Georgia, "Times New Roman", "Microsoft YaHei", 微软雅黑, STXihei, 华文细黑, serif;

主要的中文字体

宋体12号 – SIMSUN 12PT FONT

font-family: Arial, Helvetica, tahoma, verdana, 宋体, SimSun, 华文细黑, STXihei, sans-serif;

微软雅黑 – MICROSOFT YAHEI

font-family: Tahoma, Arial, Helvetica, "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", sans-serif;

仿宋 – FANGSONG

font-family: Georgia, "Times New Roman", "FangSong", "仿宋", STFangSong, "华文仿宋", serif;

楷体 – KAITI

font-family: Georgia, "Times New Roman", "KaiTi", "楷体", STKaiti, "华文楷体", serif;

 

处理中文的 @FONT-FACE?

考虑到很多的中文字体文件很大，并且包含至少3000个基本的字形，所以中文对于@font-face支持度不是很好。

我许多的非标准中文字大于5MB，Considering that most Chinese font files are kinda ginormous and typically include at least 3000 base glyphs, Chinese doesn’t lend itself very well to @font-face embedding. Many of my non-standard Chinese fonts run upwards of 5MB, and the @font-face generator over at Font Squirrel has a 2MB file size limit. So, while it’s impractical on a CMS platform where you’re dealing with a bunch of user-generated data, that’s not to say it can’t be done.

You can use the CodeAndMore fontface generator to skip over Font Squrrel’s file size limit if you’re so inclined.

TYPEKIT-STYLE SYSTEMS FOR CHINESE FONTS

[November 15, 2013 UPDATE:] There is another way. I just found out about a company called JustFont based out of Taiwan that offers a Typekit-style font hosting for Chinese @font-face style fonts. They’ve got a decent library of font options, both for simplified and traditional Chinese characters (less for Simplified characters, but that may change in time). Problem: they don’t have an English-language interface, so if you can’t work in Chinese, you’ll have a problem using the site. They do, however, offer Facebook sign-up, so you’ll be able to get that far at least.

[Sept 5, 2014 UPDATE:] Aaaand another one: Youziku.com. This one is awesome – they have a much bigger font library than JustFont. My shop has tested these guys out, and for the most part, everything works well. They offer three embedding methods for their fonts, but only the webservice script really gives you similar usage freedom to @font-faceTwo issues that I’ve found: extra-thin fonts displayed at small sizes come out looking super ragged to the point of being unusable. And two, if you use their hosted service, there’s a little jump on page load – the page loads the content first then applies the font to it, so you see unstyled characters for a split second before the font settles into place.

WHAT’S UP WITH THE NEW FREE FONT, SOURCE HAN SANS?

So, Adobe, who put out Source Sans (English) font a few years ago, teamed up with Google in summer 2014 to releaseSource Han Sans, the best thing to happen to Chinese web fonts basically ever. Though these fonts are not yet available as hosted fonts on English servers (desktop version only on Typekit and Google as of Dec 2014), the font is hosted on Youziku.com, under its Chinese font name, 思源黑体.  Best thing about this is that unlike most Chinese fonts, this one comes in 7 weights all the way from Extralight to Heavy – yeah, baby. I hope to see this on Google / Typekit as a hosted option soon.

AND WHAT ABOUT NOTO SANS HANS?

Google is currently (Dec. 2014) working on a free font called “Noto Sans” (here’s the project page), which aims to support all the world’s languages. There are Chinese versions available for download, but these are not hosted on Google webfonts yet. The font’s lovely, though – you should get it. Google does offer an “Early Access Webfonts” page, where you can snag embedding code for experimental fonts. There are a couple of Traditional Chinese fonts there, but no Simplified fonts yet. A few versions of Noto Sans also support Pinyin.

WHAT’S THE DEAL WITH GOOGLE FONTS AND CHINA?

Mainland Chinese internet users are no longer able to connect to the Google Font API since the government blocked access to Google. Having a Google webfont on your Chinese website basically hangs the loading process for ages for users based in China as the site tries to render the font. Sometimes it works, mostly it fails. No one ever said life was fair.

[December 12, 2014 UPDATE:] So, Qihoo 360 is hosting a Google webfont mirror for Chinese users. If your site is only targeting China, you can use the Qihoo 360 mirror to load Google webfonts. If your site is targeting both China-based and non-China-based users, the recommendation is to load a script that decides which webfont source to use based on the user’s IP. Get the details on SEO Shifu.

NEED A CUSTOM CHINESE FONT OR LOGOTYPE MADE?

Makefont.com: These guys are hot-shit design-y Chinese typographers. And buy their ready-made fonts, they’re really cool.

WHAT’S THE DIFFERENCE BETWEEN BIG5 AND GB2312 CHINESE FONTS?

Quick history lesson: About 50 years ago, Chairman Mao controlled mainland China. And he decided that literacy rates were super low because Chinese characters were crazy complicated to write. So he decided to “Simplify” the whole written language. He hired some linguists, they came up with a writing system that removed a ton of the strokes from many of the characters, reducing the complexity of written Chinese.

Problem: Mao’s little plan only effected the people in Mainland China. That means that all the Chinese people living outside of Mao’s sphere of influence – people in Taiwan and Hong Kong, and Chinese immigrants to the U.S. and abroad – didn’t adopt the new system at all. So now, Chinese characters can be written two ways. One way is the old way, “traditional characters”. Or, as we call it in fonts on the web, Big5. The other way is the new way, used only in China proper, “simplified characters”, or GB2312.

If you are choosing fonts for a site that targets mainland China, choose GB2312. If you are targeting Hong Kong, China towns abroad and immigrant communities, Taiwan, etc., use Big5. Most Chinese websites offer both on multi-lingual platforms. The fonts on this page are all GB2312, but most have Big5 versions.

(Dear type-A devs: yup, I know. I know what an encoding is. It’s just easier to explain this way, kthxbye.)