CSS中文字排版对界面的美观度影响有多大？（二）

前言

我这段时间一直在研究CSS章的文字排版，这过程中让我感触良多。其实很多东西它都有自己的一个专属领域，当你深入了解的时候，你会发现很多知识点并不仅仅限于我们所熟知的。当然也正因为这样，用心的人他会在研究中慢慢将这些他捕捉到的和已经知道的渐渐在大脑中形成一个系统，以至于越来越专业。那么在网页中也是，上一次我们说到了网页中文字的排版，那么今天我们接着聊CSS文字排版中的字体。上一篇没看的同学，可以点击链接查看CSS中文字排版对界面的美观度影响有多大？（一）

图片来自网络，侵权请联系删除！

怎样选用字体

• 正确的选用平台。不管是浏览器还是系统或者软件，不同的平台的通用字体是不一样的。相对而言Microsoft Office用户字体的选择性会大于非Office的用户。所以在网页布局中我们在选择字体时要充分考虑到浏览器兼容字体的问题。

• 该付费的时候付费。创意性字体需要收费，如果你需要用到付费字体，那还是老老实实的付费。为什么要这么做？首先付费用户对字体创作者的尊重；其次是为了避免侵权产生不必要的纠纷。

• 选准与网页风格相符合的字体。比如简约和大气的家居网站，我们就不应该选用图案呆萌的字体。

合理选择字体的大小

• 字体不宜过大，也不宜过小。有一些设计师比较倾向把字体设置更小，而有些设计师倾向设置大一点的字体。两者没什么本质区别，但是字体过大或者过小都会影响网页的可读性。字体太大显示效果不行，字体太小显得文字内容密密麻麻。

• 不同的浏览器字体的大小也是不一样的。因为当浏览器被不断地Ctrl-或者不断地Ctrl+的时候，字体被缩放的客观性会大幅度降低。

字体的单位

• 默认尺寸
  浏览器都有一个字体大小的默认值，大小大概时16px。

• 绝对单位
  预先确定或者给定字体的大小尺寸，常见的单位有cm，in，pt。

• 相对单位
  预先给定字体的大小尺寸，但是这是一种可变的字体，常见的单位有%，em，larger，smaller。像素实际上也是一个相对单位，原因时分辨率和显示器尺寸大小不一的情况下所显示的效果也是不一样的。比如，1280×720在15寸显示器上的2px比的21寸显示器上的1px要小很多。2em和300%比1em和100%要大两倍。

• 关键字
  合法值有xx-small，medium，x-large，广义来说，关键字属于绝对单位，但是在显示时，他们又不会表现得很精确。

内容设置

标题

• 主要标题起到总结内容的作用，我们可以设置150%或者2.2em。

• 次要标题主要是用来描述标题，起到一个解释作用，回答为什么。我们可以设置该字体为0.8em或者75%。

• 字体大小的关键字，xx-small，medium，x-large。绝对单位有一个缺点，就是字体的大小不够精确。

• 相对单位，不同的浏览器，字体缩放后的取值也不相同，比如有的13.4会取13，而有的浏览器会取14。

字体

• 关键字
  IE浏览器对使用关键的字体不是很友好，具体大家可以去测试一下。

• 使用em
  为了避免字体的误差，建议使用字体可以设置在1em以上，这样可以保持字体的一致性，从而增强字体的美观，。

• 切换样式
  如果想要精确控制屏幕上的字体，我们可以使用px。但是也不能完全依赖。

字体是web装饰的重点之一

• 排版上尽可能设计出视觉的冲击
  根据阅读模式（从左至右）去设置网页的重点内容。重点可以放在左上角。

• 为了增加可读性，我们可以在中长以上的文章立标题，看结构立次要标题。

• 标题
  1.标题颜色上尽可能地选用暗色/深色，必要时加粗字体，有文章更有结构性，达到突出重点地作用。
  2.标题长度不宜过长，也不宜过短，个人见解，大概有七八个字就差不多了。避免与内容相混淆。

• 段落与段落之间的距离不宜过长，避免阅读断层。

• 某些点子上可以插图说明，文字分页。

总结

关于排版还有好多要说的，这是门大学问。在实际生活中我们也并不是一定要学会很多东西才能上岗，边学边使用才是正确的成长方式。

(本文适合初学者，如果你是大佬级别的人物，我乐意接受指教！)
如果你觉得这篇文章对你有用的话不妨点个赞再走！