第三十五章字体-易看设计 - 专业设计师平台

前面我们说到，关于文字的属性，好多其实是和字体相关的。这一章我们来讲如何设置字体。

我知道，大家已经开始感到很兴奋了。如果把自己的页面设置成各种奇奇怪怪的字体，一定会显得非常个性，非常好玩。这种事情别说做，光是想想，都让人觉得热血沸腾。

那么大家回想一下，你见过多少网页里边的字体，是很奇怪的，或者说是很特殊的？当然，我们说的是纯文字，不是图片上的文字哦。我想经过大家努力的回忆，会发现这种情况非常少。

这是什么原因呢？我们知道要使用一个字体，首先要下载安装这个字体，你电脑中没有这个字体，它是显示不出来的。而普通的，我们在网页中设置字体，只是说一下这个元素使用哪个名称的字体。能不能显示出来，就看你电脑里有没有相应的字体了。当然如果没有，浏览器也要努力让文字得以显示，那就只好用浏览器设定的默认字体了。

所以你看，我们的选择范围其实是局限于用户电脑中有哪些字体的。你不可能要求用户安装所有你需要的字体，而只能按着最坏的情况打算，用户的电脑刚装上系统，这时候电脑中有哪些字体就用哪些字体。当然，如果大家都是 Windows 电脑也算了，都是苹果电脑也很美好，毕竟情况变得非常统一。然而，我们不仅要考虑不同的操作系统，甚至不同操作系统的版本，然后还有手机呢……

于是我们一般就只能使用最基础最基础的字体，有一个称呼叫做“Web 安全字体”。这种事情说出来，都觉得泪目。

好啦，先学习一下如何去写：

p {font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;}

这个写起来好像很长的样子，其实他是同时指定了多个字体，中间用逗号进行分隔。为什么要这么写呢？原因刚才我们已经说了，这里依旧是为了防止没有相应的字体，所以多设置一些字体进行备用。选用的原则是，从前往后，使用第一个可用的字体。

当然还有一种情况是有一些英文字体很漂亮，但是它们并不包含中文。那么前面写英文字体后面写中文字体。遇到英文的时候，就使用英文字体进行渲染；而遇到中文，因为英文字体无法适配中文，那就只好选用后面的中文字体进行渲染了。

然后如果字体名称中有空格，或者某些特殊字符，要用引号标记整个字体的名称。如果字体的名称是中文，一般也需要引号标记。

说到中文，我们发现上面有微软雅黑，文泉驿微米黑，苹方和黑体等字体，但在这里都用了英文名称。这是为了获得更好的兼容性，反正总之，一般情况下，我们都会使用字体的英文名称。常用名称我会附录在后面，以供大家参考。

不过一般情况下，大家按照上面的设置^[1]去写，就已经可以得到不错的效果了，下面还有一个更细致一些的方案可供大家选择：^[2]

p {font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;}