珠峰培训

网站css样式调整之文字样式的控制

作者:

2016-07-24 16:42:28

229

css属性之文字控制

连字符断行

很多网页设计师在设计网页的时候,都喜欢将一段文字段落两端对齐,不过在网页中两端对齐到是不特别常用,而且有经验的设计师也是极少使用的,但是从css 1开始就已经有text-align:justify;,但是为什么不使用呢?

text-align:justify;

但是调节两端对齐处理的时候,需要调节单词的间距,此时会出现一个单词和其他单词距离过大的情况,这样看起来反而更加的糟糕,而且损伤了可读性,文本看起来就不是特别的自然。

那有什么方式来解决这个问题呢?
css 3引入了一个新的属性hyphens,它接收三个值:none、manual和auto。

hyphens:manual;是默认的初始值
hyphens:none;是默认的初始值
hyphens:auto;是默认的初始值

在使用这个属性的同时,也需要在html标签中的lang属性中指定合适的语言,这个是一个网页在开始搭建的时候就应该做的事情。

如果需要更细致的控制连字符的行为,仍然是需要通过一些软连字符来辅助浏览器进行断词,hyphens属性先处理文字,再去计算需要断词的位置。

如果浏览器不支持此属性,那么浏览器就会优雅降级,依然会正常的显示页面中的内容。

自定义下划线

text-decoration:underline;文本下滑线
但是有些时候,这个属性在设计师眼中并不完美,那么我们可以使用border来模拟下划线的样式。

a[href]{
border-bottom:1px solid #000000;
text-decoration:none;
}

但是这样也有一些问题,如果是单行文本,那么是大概可以的,但是收到行高的影响,下划线就是和文本有一些距离。

那么怎样将这个问题解决呢?

display:inline-block;
border-bottom:1px solid #000000;
line-height:.9;

虽然这样可以解决文本距离下划线过长,但是会影响正常文本换行,那么我们还可以尝试用box-shadow来实现。

box-shadow:0 -1px #000000 inset;

但是和border-bottom一样,也会出现距离过大的问题。

怎样解决呢?
那就是background相关属性,三行代码,天下无敌。

background:linear-gradient(#000,#000) no-repeat;
background-size:100% 1px;
background-position:0 1.15em;

进一步的调整一下,更加美观。

background:linear-gradient(#000,#000) no-repeat;
background-size:100% 1px;
background-position:0 1.15em;
text-shadow:0.5em 0 white , -0.5em 0 white;

这个方法很灵活,也可以形成虚线,例如:

background:linear-gradient(90deg #000 70%,transparent 0) repeat-x;
background-size:0.2em 2px;
background-position:0 1em;