{ Hello Magento 2 }

解决 Magento 2 应用问题,更注重深度挖掘。(ง •̀_•́)ง

0%

中文 Web 安全字体

上一篇 Web 字体 讲了 css 的 font-family 规则以及西文的 Web 安全字体。这篇我们来讲中文安全字体。

操作系统预装字体有哪些

首先我们需要知道操作系统的预装字体有哪些。

Windows

OS X

黑体:SimHei

冬青黑体: Hiragino Sans GB (SNOW LEOPARD 10.6 开始提供)

宋体:SimSun

华文细黑:STHeiti Light (又名STXihei)

新宋体:NSimSun

华文黑体:STHeiti

仿宋:FangSong

华文楷体:STKaiti

楷体:KaiTi

华文宋体:STSong

仿宋_GB2312:FangSong_GB2312

华文仿宋:STFangsong

楷体_GB2312:KaiTi_GB2312

微软雅黑:Microsoft YaHei (Windows 7开始提供)

注:在XP系统中,没有仿宋、楷体,只有仿宋_GB2312和楷体_GB2312这两种字体。但是到了Win7系统,却只有仿宋和楷体,没有了仿宋_GB2312和楷体_GB2312这两种字体。所以在XP系统下制作的公文在Win7系统中打开,全部转换成系统默认的微软雅黑字体。而在Win7系统下制作的公文在XP系统中打开,全部转换成系统默认的宋体。

font-family 使用注意

使用 css font-family 需要注意以下几点:

  1. 中文字体有英文名称的,建议把中英文名称都写上,比如:

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

    “Microsoft YaHei” 是 “微软雅黑” 的英文名

  2. 在声明中文字体前声明英文字体 原因是 font-family 会优先使用前面的字体,这样如果中文字体包含了英文字母,那么就会用中文字体库来渲染,这样往往不好看。

  3. 字体名如果由多个单词组成,那么需要使用引号

衬线体和无衬线体

衬线体(Serif)是比划末端带有衬线的字体,衬线体装饰性强,易于辨认,常用于正文。 无衬线体当然就是不带衬线的字体,常用于标题,用于强调和突出。

常见的中文字体

宋体 (SimSun)

宋体是最常用的字体。很多人不喜欢宋体,就像很多设计师不喜欢 Arial 一样(windows 的错…)。 如果没有指定字体,windows 系统往往会选择宋体来渲染。 声明就像这样:

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

微软雅黑 (Microsoft YaHei)

微软雅黑应该说是 windows 平台上最主要的字体了。不过这个字体表现良好主要归功于 ClearType feature,但是 Windows XP 默认关闭了这个功能,所以在 XP 上看起来就惨不忍睹了。 当然 XP 并没有预装这种字体,可以给微软雅黑设置一个 fallback 宋体或者黑体。不过黑体比较粗,不适合用于字号较小的文字。 OS X 对应的字体是华文细黑 (STXihei) 声明就像这样:

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

仿宋 (FangSong)

仿宋是一种更具装饰性的字体,是衬线体。只有 14 px 以上才比较好,不然太模糊了。(仿宋体是国家规定的机械制图标准字体。)

楷体 (KaiTi)

楷体的装饰性也很强,字面比仿宋体还宽一点,笔画更清楚些,模仿手写体,但是也不宜用在 14 px 以下。

冬青黑体简体中文 (Hiragino Sans GB)

这是 OS X 系统的字体,从 10.6 开始提供,苹果系统使用了很长世间的华文黑体 STHeiti 。从 OS X 10.6 开始 STHeiti 被彻底修订了(combining 华文黑体STHeiti and 华文细黑STXihei),重命名为(汉黑) HanHei SC ,并且作为系统的默认字体。但是,冬青黑被认为是最好的 web 中文字体,但冬青黑不是 Mac 系统的默认字体。

兰亭黑 pro

兰亭黑 pro 是兰亭黑的改造版,很适合演示。不过不在安全字体的讨论范围内。因为系统是没有预装兰亭黑 pro 的

字体的排位

很多时候我们会将 Windows 的字体放在 OS X 系统之前,按照道理是没问题的,反正 OS X 系统里又没有 Windows 的字体。但是由于各种因素 (比如 Office for Mac 软件帮你安装了 Win 下常用的中文字体),所以这个时候对 OS X 的用户来说,体验就不好了。相反,Windows 的用户较少安装 OS X 的字体,所以我们应该将针对 OS X 的字体放在 Win 的前面。

不一定是最佳实践的 Tip

1
font-family: Helvetica, Tahoma, Arial, "Hiragino Sans GB", "Microsoft YaHei","WenQuanYi Micro Hei", sans-serif;

“WenQuanYi Micro Hei” 用于 Linux 用户。 其他的就让他自己 fallback 吧。 然后博主又去找了 Apple 网站的字体设置

1
font-family: 'HanHei SC', 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', 'Arial', sans-serif;

看起来没有考虑 Windows 用户呢 … 就让系统自己选吧 然后是微软商城的

1
font-family: "SegoeUI", "Microsoft YaHei", "Hiragino Sans GB";

好像位置不正确呢?… 也许可以参考小米、简书的。

常见字体效果比较

windows 平台,安装了冬青黑体简体中文和汉黑,下载地址 下图是 chrome 下的效果 chrome 上没有指定字体使用的是宋体,但是博主在 firefox 上测试发现未指定字体使用的是微软雅黑,而且浏览器中可以设置字体。 最后附上这段效果的 html 代码,有兴趣的可以自行测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body {
text-align: center;
margin-top: 50px;
background-color: #efe1d6;
font-size: 14px;
}
.songti {
font-family: 'SimSun',宋体;
}
.fsong {
font-family: 'FangSong',仿宋;
}
.kai {
font-family: 'KaiTi',楷体;
}
.yh {
font-family: 'Microsoft YaHei',微软雅黑;
}
.dqh {
font-family: 'Hiragino Sans GB';
}
.hh {
font-family: 'HanHeiSC';
}
</style>
</head>
<body>
<p>没有没有指定字体这里是可以比较的文本内容</p>
<p class="songti">宋体宋体宋体宋体这里是可以比较的文本内容</p>
<p class="fsong">仿宋体仿宋体仿宋这里是可以比较的文本内容</p>
<p class="kai">楷体楷体楷体楷体这里是可以比较的文本内容</p>
<p class="yh">微软雅黑微软雅黑这里是可以比较的文本内容</p>
<p class="dqh">冬青黑体简体中文这里是可以比较的文本内容</p>
<p class="hh">汉黑汉黑汉黑汉黑这里是可以比较的文本内容</p>
</body>
</html>

参考地址

Chinese Standard Web Fonts: A Guide to CSS Font Family Declarations for Web Design in Simplified Chinese Chinese Web Fonts – Part 1 Web 中文字体应用指南 如何优雅的选择默认字体(font-family)