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

前言

关于技术，我其实没有什么大的梦想，如果一定要说有，那唯一的想法就是想成为 一名出色的全栈工程师。这个社会对斜杠青年总是有一些大大小小的看法，简单来说看斜杠青年就像看煎饼侠一样，什么都要去试一试，心里总想着面面俱到，却从未发现自己每一面的厚度都不够。我很喜欢CSS，也坚信，通过努力，一切都会越变越好。我其实比较擅长的是后端服务，但与此同时我也注重前端界面的美观，包括JS交互，深入每一个细节。好的产品一定不是只在于后端多么强大，前端的舒适也是重中之重，为什么要说这么多，因为接下来我要讲CSS的文字排版。

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

关于文字

以web为例，一个界面的组成，我们看到最多就是视频，动画，音乐，程序，图片和文字。其中文字是最web最为基本的内容之一。与文字相关的有字体的形状，样式，颜色，颜色深度以及字体的大小，粗细等等。如果你不相信，你可以打开手机点开手机主题，看看文字的样式是不是很多，而且还有了字体的分类。那这是好事还是坏事呢？肯定是好事呀，字体样式越丰富，说明我们的选择性就会越大，选择性越大，选择的难度也就越大。

文字与界面

不同的项目界面需要配合不一样的风格，，文字也并非是自始不变的。先看下CSS禅意花园的排版，对于久坐并每天对着密密麻麻的代码的我来说，打开这个网页就好像走进了大自然，总觉得眼前一亮。文字配上主体风格，简约而又大气。

好的作品并不需要华丽的篇幅去修饰，相比之下，简约质朴的排版才是最深得人心的。

文字排版须知的几个知识点

1.合理选择字体的样式

• 字体粗细的几个基本属性

font-weight: normal;//字体常规大小，数值为400
font-weight: 100;//字体细度最小值，最粗为900
font-weight: bolder;//字体更粗，最高值为900
font-weight: bold;//字体加粗，比bolder细，与<strong>等值
font-weight: lighter;//字体会比父级细一些，
font-weight: inherit;//文字会紧随父级的粗细相同

• 字体风格

font-style: oblique;//字体倾斜
font-style: italic;//不是常规字体，手写风格
font-style: inherit;//具有继承性，与父级元素的字体一脉相连
font-style: normal;//字体为默认值，浏览器显示一个标准的字体样式。

• 字体颜色

color: #00FFFF !important; //字体颜色设置

• 字体的对比度

-ms-high-contrast-adjust: auto;
-ms-high-contrast-adjust: inherit;
-ms-high-contrast-adjust: none;
-ms-high-contrast-adjust: unset;

2.合理选择字体本身

• 字体的颜色和对比度
  给设有背景颜色的界面搭配字体的颜色和对比度显得很重要，正常来说，背景为白色，我们可以搭配黑色字体或者其他比较柔和的颜色，这样界面的可读性以及舒适度就会提高很多。先看下对比图，如下所示

  
  
  

没有对比就没有伤害，效果很明显。也许这几张图还不足以说明什么，但是如果不合理搭配，文字一多起来，舒适度和可读性就会下降很多，这一点毋庸置疑。

• 字号设置
  不同的字号需要设置字体间距，同一模块的展示内容也许会用到不同的字体样式，其中也包括字体大小，注重突出的重点可以改变字体大小，或者字体样式。具体可以参考以下图：

看完有没有感到有达到重点与阐述的效果，就好像一个是内容，一个是标题一样，很明确。

总结

字体与界面本该就是一个相辅且相称的组合。所以在实际开发中我们也要用心去做好这些细微的设计。另外，说个题外话，我刚接触编程的时候觉得专注于后端的才算是真正的在研究技术。但现在看来有点打脸，也深刻明白自己当时的想法是不对的。其实前端跟后端就像一个锅子跟锅铲一样，需要两者的配合才能把菜炒好。总之，各有各有学问在里面。你觉得呢？

如果本文对你有帮助或者有幸让你喜欢，不妨点个赞再走。你也可以关注我的公众号《周小年》，我期待与你相逢。
(本文适合初学者，如果你是技术大佬，欢迎指教！)