CSS中文字排版对界面的美观度影响有多大?(三)
前言
昨天说了一下文字字体的排版,今天一大早翻开自己当时做的笔记,才发现有些东西没说完。接下来我想再做一点补充——文本内容的排版。前几篇没看的同学可以点击下方链接查看:
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
总结
关于文字排版到这里就好一段落了。说了一些平时也会碰到的小知识,不过不一样的是,同样的常识应用到不同的领域用法就不太一样了。好的作品拆出来,每一个细节都是无可挑剔的,也许这样的作品不会多如牛毛,但是我相信肯定有设计师注重这些的。
(本文适合初学者,如果你是大佬级别的人物,我也欢迎指教!)