前言
昨天说了一下文字字体的排版，今天一大早翻开自己当时做的笔记，才发现有些东西没说完。接下来我想再做一点补充——文本内容的排版。前几篇没看的同学可以点击下方链接查看：
CSS中文字排版对界面的美观度影响有多大？（一），
CSS中文字排版对界面的美观度影响有多大？（二）。
图片来自网络，侵权请联系删除！
怎样避开文本排版的雷区
正文
-
尽可能60个字符一行，避免字数过多或过长，因为不管是哪一种，都会影响文本的可读性。
-
文章记得分段，尽量每段长控制在5-6行左右，文本字句短而精悍，易读易理解。
-
文本内容不要使用高亮的颜色，花花绿绿的字体颜色容易是读者反感。如果一定要出现，那么尽可能放在重点文字或者链接上。
重点文字
-
可以使用鲜艳的颜色，但是尽可能使用柔和的暗色系。这样就会减少读者在视觉上有一种亮瞎眼睛的感觉。
-
所有的重点文字尽量颜色保持一致，避免不必要的出戏。
-
重点文字尽量短，行数少，关键时刻记得插图说明，便于读者理解。
怎样优化文本细节
文本的细节需要控制的是行距，边距，字体调整等。其实做过或者在做公众号的同学应该都有去了解过文本的字面排版，而且也都知道一个好的公众号它的页面排版的质量一定不会很差。那就废话不多说了，先补充几个我们经常使用的CSS处理文本的属性。
font-variant
-
作用
主要用于定义小型大写字母文本。 -
基本属性
font-variant: small-caps;//文字转小型大写
font-variant: normal;//浏览器默认显示一个标准的字体
font-variant: inherit;//继承父级的字体设置
图1
text-transform
-
作用
控制字符大小写。 -
基本属性
text-transform: capitalize;//英文字符首字母大写
text-transform: uppercase;//所有字母大写
text-transform: lowercase;//所有字母小写
text-transform: none;//默认标准
图2
text-decoration
-
作用
格式化文字。 -
基本属性
text-decoration: none;//默认
text-decoration: underline;//下划线
text-decoration: line-through;//删除线
text-decoration: overline;//上划线
text-decoration: blink;//时隐时现
图3
注：并非所有的浏览器都支持text-decoration的 blink属性；还有一点就是需要注意underline，它容易与链接相混淆。
line-height
-
作用
用于设置行高，该属性可以被设置绝对值，相对大小，长度或者百分比以及inherit。 -
代码示例
line-height: 1;||line-height: 8;
图3
图4
注：line-height可以不给单位。
letter-spacing
-
作用
作用于控制字符间距。 -
基本属性
letter-spacing: 1em;//给定值
letter-spacing: normal;//默认正常
图5
注：考虑到屏幕分辨率低的问题，我们尽量不要给大段文字设置字符间距，否则文本会拉长，如果很长的话，文本的可观性会降低。建议在标题或者比较短的自然段中使用。
text-align
-
作用
用于文字对齐。 -
基本属性
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
word-spacing
-
作用
用于调整单词的间距。 -
基本属性
word-spacing: inherit;
word-spacing: normal;
word-spacing: 1em;
图6
总结
关于文字排版到这里就好一段落了。说了一些平时也会碰到的小知识，不过不一样的是，同样的常识应用到不同的领域用法就不太一样了。好的作品拆出来，每一个细节都是无可挑剔的，也许这样的作品不会多如牛毛，但是我相信肯定有设计师注重这些的。
(本文适合初学者，如果你是大佬级别的人物，我也欢迎指教！)
网友评论