网页中文字型除了微软正黑体, 还有这些好选择！(windows)

 对于网页能使用的中文字体，我们比较难有自订的选择。上一篇「网页中英文字型跨平台设定最佳化」说明了，由于中文字型档太大，网页绝对不能引用外部中文字型档，否则载入速度可以让访客好整以暇地泡好一杯咖啡，并跳离该页面。

前阵子Google发布了免费的中文字型「思源黑体」，不过请打消将这个字型设定在网页上的念头，因为这不是作业系统的预设字型，多数访客的电脑中依然没有这个档案，就算设定了这个字型，访客仍然看不到思源黑体的。

而在使用者最大宗Windows系统下，网页设定中文字型比较顺眼、常见的选择会是「微软正黑体」。但WFU BLOG设定的几项字型中，主要使用的是「明了体」，如果没听过的话，其实还有更多你没听过的字型可用。想知道还有哪些不错的中文字体可选择吗？请见以下详细的整理。

一、不适合在内文使用的中文字型

1. Windows所有可用的中文字型

以Win8为例，进入系统资料夹Windows → Fonts可看到所有字型档，其中「中、日、韩」这三个地区的文字特点是"都有汉字" 。虽然「日、韩」字型会缺字，不过网页基本的常见字都还有，所以可拿来当中文字型用。下图是可用字型一览── 2.不适合在网页内文呈现的字体 上面列表在中文的部份，有黑体、明体、楷体、宋体(简)可选择。当这些字体用于标题，在比较大的像素24px以上展现时，看起来的效果都还好。不过在内文中使用的字体一般较小，约13px～18px这个范围，以下是这些字体用于内文时的效果比较── WFU的个人感觉是，在字体较小时，使用黑体看起来会比较舒服、顺眼一些。不过微软雅黑比较可惜的是，其预设是简体，若在小字的情况下当内文使用时，繁、简混杂会让很多字看起来非常不搭。而宋体的评价排在黑体之后、其他字体之前。 结论是使用非简体的黑体，当作内文使用会表现较好，而黑体以外的字型，可以考虑用在网页其他区块，或是特定点缀、装饰用途。以下先讨论适合内文的字型，将比较各语系的黑体字型。3.各语系的黑体字型列表 排除不相关字型后，以下是所有的黑体字型：

• SimHei (简)
• 微软正黑体
• Microsoft YaHei (微软雅黑简)
• Meiryo (明了体日)
• MS Gothic (日)
• MS PGothic (日)
• Yu Gothic (游黑体日)
• Dotum (韩)
• Malgun Gothic (清黑体韩)

接下来看看他们在内文字体大小的效果比较。

二、黑体字型效果比较

1.内文效果在小字13px的表现：

• 雅黑、明了体比较清楚
• 清黑体(Malgun Gothic韩)也OK,但可惜"伪"漏字，转而以细明体展示。
• SimHei (简) 也够清楚，但繁体字比较难看一些。
• 其他黑体的线条稍微偏细。

在小字18px 的表现：

• 个人觉得明了体综合表现第一
• 雅黑还不错，但繁、简体的字摆在一起，有些看起来似乎不太搭。
• 字体放大后，很多都比较好看了，不过线条偏细的那几个，可能还是不适合设定来显示内文，读者可凭自己喜好挑选。

2.标题效果大字24px标准字体的表现：

• 几乎全体表现都不错，个人认为雅黑综合表现第一(小字时的简、繁不搭情形，因为字体放大后，不是那么容易看出来)

因为标题通常使用粗体，需要比较24px 粗体的表现：

• 雅黑及明了体似乎有过粗的感觉，不过若将字型再放大、拿来当网站标题是适合的。
• 除了漏字的问题，清黑体(Malgun Gothic 韩) 综合水准是不错的。
• 除了以上过粗的两个字体，几个日文字体例如游黑体(Yu Gothic 日)都不错、其他的黑体看起来也不差。

三、字型设定实作

如何跨平台设定网页的中英文字型，可详阅：

• 网页中英文字型最佳化

下面以Blogger为例，只说明Windows系统部份的字型设定，而其他作业系统的字型设定，请务必参考以上教学连结。

非Blogger的平台若想套用以下实作范例来修改CSS，建议使用「Chrome开发人员工具」找出区块的class或id，在浏览器变更CSS参数来测试，再到范本或后台修改字型的CSS设定。


1.网站次标题

如前所述，在大字体的表现，个人比较欣赏清黑体(Malgun Gothic韩)的效果，而韩文会漏字的情形，在后面指定一个粗细差不多的中文黑体字型，即可解决这个问题。经过审慎比较后，选择了SimHei(简)这个字型。

网站次标题"伪‧云端‧ Blogger调校资料库"便是采用这个方案，以下为操作步骤── 

在范本中找到.Header .description {...}这个区间，新增或修改以下参数： 下图为效果── 2.文章标题 文章标题使用了粗细均匀的游黑体(Yu Gothic日)，而日、韩字型会漏字的情况，一样交给线条比例相当的SimHei(简)，以下为操作步骤── 在范本中找到.post-title {...}这个区间，新增或修改以下参数： 下图为效果── 3.文章次标题 前面两项都没使用微软雅黑体，是为了避免过粗显得突兀，而

font-size: 30px;
font-family: "malgun gothic", simhei; /* 其他作業系統的字型設定請參考前述教學連結 */
font-weight: bold;
font-size: 26px;
font-family: "Yu Gothic", SimHei; /* 其他作業系統的字型設定請參考前述教學連結 */
文章中的次标题都是重点提示，需要使用最粗的效果，此时雅黑便派上用场。

WFU在文章中设定次标题的方法请参阅「 Blogger文章标题最佳化__(3)修改范本H1 H2 H3标签实用技巧」→「三、加强文章中的SEO效果」→「2.有效率的文章范本范例」。

这些自行设定的h2、h3、h4标签要设定字型CSS的话，以Blogger为例，后台范本→自订→进阶→新增CSS： 效果可见本文的文章次标题(如果你使用Windows系统的话) 。4.文章内文 本站在内文使用「明了体」已经有不短的时间，觉得比「微软正黑体」的效果好上不少，同时将字体调大后可让读者有非常舒适的阅读体验。 而「明了体」这个日文字型会漏字的情况，我选择交给「微软正黑体」。以下为操作步骤── 在范本中找到 .post-body {...}这个区间，新增或修改以下参数： 效果可见本文的内文字体(如果你使用Windows系统的话)。5.导览列、标签、侧边栏 更改个别区块的字型CSS设定，如前所述建议使用「 Chrome开发人员工具」找出区块的class或id，在浏览器直接变更CSS参数无误后，再到范本中修改会比较快。 目前本站导览列使用的是「雅黑」，网站其他部份使用的是「SimSun(宋体简)」

.post-body h2, .post-body h3, .post-body h4 {
font-size: 22px;
font-family: "Microsoft YaHei"; /* 其他作業系統的字型設定請參考前述教學連結 */
}
font-size: 18px;
font-family: Meiryo, "微軟正黑體", "Microsoft JhengHei"; /* 其他作業系統的字型設定請參考前述教學連結 */

四、一些补充

1.搭配的英文字型

设定完黑体字型后，跟英文字型的视觉效果能否搭配也是一个学问。最简单的方法就是只设定中文字型、去除英文字型的设定，那么网页在抓英数文字时，仍会去读取黑体的字型。

只不过，不是每个中文字型的预设英文效果，都能跟中文搭配得很好。如果想要更美、又能搭配黑体的英文字型，可参考这篇「 word预设中英搭配有什么问题」，来找出更好的选择。


2.其他平台

虽然这篇只有提到Windows系统的中文字型，不过只要依照同样的流程，也是能找出其他作业系统(例如Mac)最适合自己网页的中文字型，并进行最佳化设定。


3.个人观点

由于这篇的范例选择算是个人观点，不代表这样的审美观一定是好的，也不见得这些选择适合每个网站，也不一定需要为不同区块都设定不同字型。

不过本文提供了各种Windows现成字型的图示与效果，只需要参考范例、及教学连结，相信读者都能找到自己心目中理想的字型，并成功套用在自己的网站。