CSS

CSS中文字排版对界面的美观度影响有多大?(三)

2020-04-27  本文已影响0人  雨落流年

前言

昨天说了一下文字字体的排版,今天一大早翻开自己当时做的笔记,才发现有些东西没说完。接下来我想再做一点补充——文本内容的排版。前几篇没看的同学可以点击下方链接查看:
CSS中文字排版对界面的美观度影响有多大?(一)
CSS中文字排版对界面的美观度影响有多大?(二)

图片来自网络,侵权请联系删除!

怎样避开文本排版的雷区

正文
重点文字

怎样优化文本细节

文本的细节需要控制的是行距边距字体调整等。其实做过或者在做公众号的同学应该都有去了解过文本的字面排版,而且也都知道一个好的公众号它的页面排版的质量一定不会很差。那就废话不多说了,先补充几个我们经常使用的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
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

总结

关于文字排版到这里就好一段落了。说了一些平时也会碰到的小知识,不过不一样的是,同样的常识应用到不同的领域用法就不太一样了。好的作品拆出来,每一个细节都是无可挑剔的,也许这样的作品不会多如牛毛,但是我相信肯定有设计师注重这些的。
(本文适合初学者,如果你是大佬级别的人物,我也欢迎指教!)

上一篇下一篇

猜你喜欢

热点阅读