CSS3之美(五):网页文本

CSS3 全新引入的文本阴影特性值得让人兴奋,现在,我们只需简单的几句语句既可以让文本拥有阴影效果了,赞b( ̄▽ ̄)d!

文本阴影text-shadow

text-shadow 属性是用于设置文本阴影的,其总共可接受 4 个参数,语法如下:

1
E { text-shadow: left top blur color }

其中:

  • left 为阴影相对于元素左上角的水平偏移值(向右为正,允许负值)
  • top 为阴影相对于元素左上角的垂直偏移值(向下为正,允许负值)
  • blur 为阴影的模糊程度(不允许负值),其值越大阴影越模糊,该值可以省略,如果省略,默认为0
  • color 为阴影的颜色

当然了,我们可以为同一元素使用多个阴影,这样就能有多重阴影的效果了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.one {
text-shadow:
0 -2px 3px #FFF,
0 -4px 3px #AAA,
0 -6px 6px #666,
0 -8px 9px #000;
}
.two {
color: #FFF;
text-shadow:
0 2px rgba(0, 0, 0, 0, 4),
0 4px rgba(0, 0, 0, 0, 4),
0 6px rgba(0, 0, 0, 0, 4),
0 8px 0 rgba(0, 0, 0, 0, 4);
}

活版印刷效果

text-fill-color

该属性是 Webkit 浏览器的专有属性,主要用于设置元素中的文字的填充颜色。使用示例如下:

1
2
3
h1 {
text-fill-color: transparent;
}

注意:如果该属性不设置,则会继承 color 属性的值,如果设置了该属性,则会覆盖掉 color 属性的值。

利用这个属性,可以很轻松地做出镂空文字:

text-outline和text-stroke

CSSS3 的文本模块提供了一种更好的控制轮廓的方式,即 text-outline 属性,这个属性可以接受三个值:

1
E { text-outline: thickness blur color }

其中:

  • thickness: 描边厚度,必需要有
  • blur: 模糊程度,可选
  • color: 描边颜色,必需要有

注意:text-outline 属性当前未得到任何主流浏览器的支持实现

庆幸的是,Webkit 引擎的浏览器实现了另一个与之类似的专有属性 text-stroketext-stroke 属性用法如下:

1
2
3
4
5
6
7
E {
text-stroke-width: value;
text-stroke-color: value;
}
/* 简写属性 */
E { text-stroke: width color }

以其简写方式为例,其中:

  • width: 描边宽度
  • color: 描边颜色

值得注意的是 text-stroke-width 的属性值不可过大,因为太高的宽度值,会让文本变得难以辨认,不好看。个人建议最佳实践是大小保持在 3px 以内。

限制文本溢出

text-overflow 属性用于控制文本在容器中溢出时的表现,其属性值有两个

  • clip 默认值,将溢出元素容器的文本内容截断
  • ellipsis 在溢出之前使用省略号(…)替换掉最后的字符

注意:要使得 text-overflow 属性生效,块容器必须显示定义 overflow 为非 visible 值,同时显示或者隐式地定义 width 为非 auto 值,white-spacenowrap 值。

改变元素大小

resize 属性可以设置是否允许用户缩放,调节元素尺寸大小。

注意:若要使此属性生效,必须设置元素的 overflow 属性,值可以是 atuohiddenscroll

resize 属性值可取的关键字值有:

  • none 不允许用户调整大小
  • horizontal 可以调整宽度
  • vertical 可以调整高度
  • both 用户可以调节元素的宽度和高度

文本对齐

属性 text-align 已经存在一段时间了,但 CSS3 为它添加了两个新的属性值:

  • start
  • end

这两个属性对于习惯从左到右阅读的人来说,分别相当于值 leftright。不过,对于那些可能会使用从右至左文本的国际化网站,它们的作用是显而易见的。

CSS3 新引入了一个名为 text-align-last 的属性,它允许我们单独控制文本的最后一行的对其方式。这个属性接受和 text-align 属性一样的值。

文本换行

word-wrap

word-wrap 属性指定浏览器是否可以把长单词折断,使其容纳在父元素中。其属性值可以取如下值:

  • normal 默认值,允许内容顶开或溢出指定的容器边界
  • break-word 内容将在边界内换行。如果需要,单词内部允许换行

设置文本渲染选项

Firefox 和 Webkit 浏览器支持一个名为 text-rendering 的属性,允许开发者控制文本渲染速度或者对文本可识别性的优化。这个新特性意味着开发者可以选择浏览器如何渲染页面上的文本。其语法如下:

1
E { text-rendering: keyword; }

该属性值有四个指定的关键字值:

  • auto: 默认值,允许浏览器做出渲染的选择
  • optimizeSpeed: 速度优先于可识别性,禁用高级字体特性以得到更快的渲染
  • optimizel: 可识别性优先于速度
  • optimizeLegibility
  • geometric-Precision