网页文字与字体

发表于 | 更新于 | 分类于 |
字数统计 2,297 | 阅读时长 9

网页文字效果多种多样，丰富多彩，本文记述了常见的特效实现方式。

文本缩进和首字符下沉

文本缩进利用 text-indent 来实现，该属性规定文本块中首行文本的缩进大小，其值可能有以下几种情况：

  1. 确切数值：定义固定的缩进
  2. 百分数：定义基于父元素宽度的百分比的缩进

注意，数值可以为负，若为负值，首行将会向左缩进。

首字符下沉的效果可通过 :first-letter 伪类选择器和向左浮动 float: left; 来实现。

下面是 CSS 代码示例，期中 a 为一块文本的 id。

1
2
3
4
5
6
7
8
9
#a {
    text-indent: 20px;
    font-size: 25px;
}
#a:first-letter {
    float: left;
    text-transform: uppercase;  /* 将首字母转换为大写 */
}

上例中出现的属性 text-transform 用于控制文本的大小写。其值列表如下：

  1. none：默认，定义带有小写字母和大写字母的标准的文本
  2. capitalize：文本中的每个单词以大写字母开头
  3. uppercase：大写
  4. lowercase：小写
  5. inherit：规定应该从父元素继承 text-transform 属性的值

自定义文本被选中时的样式

当鼠标选中网页上的文本时，默认的样式问蓝底白字，在 CSS3 中，这种样式是可以自定义的。CSS 3 中有 UI 元素状态伪类 ::selection，该属性可以设置文本选中的效果。

示范 CSS 代码如下：

1
2
3
4
5
6
7
8
9
::-moz-selection {
    color: red;
    background-color: yellow;
}
::selection {
    color: red;
    background-color: yellow;
}

注意：Firefox 通过其私有属性 ::-moz-selection 支持此属性。

文本对齐

文本（强调一下，注意是文本！！！）的对齐非常简单，使用 text-align 属性即可，该属性最常见的三个值为 left、center、right ，分别表示左、中间、右对齐。另外，CSS3 引进了值 justify 表示两端对齐，不过现在浏览器的支持情况并不好。

有一点需要注意，如果要让文字居于一个块的中央部位，需使用以下代码：

1
2
3
4
{
    text-align: center;
    line-height: 20px;
}

期中，属性 line-height 的值需要设置为与包容此文字的块的 height 值相同。

文字、字符间距

控制汉字、英文单词内部字符的间距使用 letter-spacing 属性，该属性值允许为负。

控制英文单词之间的距离使用 word-spacing 属性。

控制一段文字的行间距使用 line-height 属性，其值可以为纯数字（但是不能为负），此数字会与当前的字体尺寸相乘来设置行间距。

属性 white-space 用于控制文字中的空格与回车。其可能的值与作用如下表：

值 作用
pre 原文本格式化输出
nowrap 连续多个空格合并为一个，不换行直到遇到 br 标签
pre-line 合并连续多个空格，保留换行
pre-wrap 保留空格，保留换行

注意：浏览器对 Tab 的处理方式与空格符相同

##文本装饰与字体粗斜

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 文本装饰 */
text-decoration: overline;  /* 下划线 */
text-decoration: line-though;   /* 穿过线 */
text-decoration: overline;  /* 上划线 */
/* 字体正斜 */
font-style: italic; /* 斜体 */
font-style: oblique;    /* 倾斜样式的字体 */
/* 字体粗细 */
font-weight: bold;  /* 粗体 */
font-weight: bolder;    /* 更粗的字体 */
font-weight: lighter;   /* 更细的字体 */
font-weight: 具体数值;  /* 定义由粗到细的字符 */

注意：font-style 属性值有两个，italic（斜体） 和 oblique（倾斜），二者的区别在于：italic（斜体）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观；而 oblique（倾斜）则是将正常竖直的文本按一定角度倾斜得到的。通常情况下，二者所表现出来的外观在浏览器中看上去完全一样。

文字阴影

属性 text-shadow 是 CSS3 新增属性，利用它可以创造出文字阴影的效果。
该属性同时接受 4 个参数：依次是：阴影相对于原对象的水平偏移值（正数为向右，允许负值）、阴影相对于原对象的垂直偏移值（正数为向下，允许负值）、阴影的模糊程度（0时与原对象一样，数值越大越模糊）、阴影颜色。
例如：text-shadow: 10px 8px 5px red 表示阴影为红色，位于原对象右下方 (10, 8) 处，模糊程度为 5px。

文字毛玻璃效果

使用文字阴影和字体透明颜色可以合成毛玻璃效果，其主要代码为

1
2
3
box-shadow: 1px 1px 2px 2px #ccc;
color: rgba(0,0,0,0,);
text-shadow: 0 0 10px black;

上面代码中第1行为边框阴影，第3行为文字阴影，第2行通过透明度的设置使得文字变为不可见状态，只留下文本阴影的模糊效果。

注意：使用完全透明的效果并不等同于使用白色，本示例若使用白色，可以清晰地看到白色字体，而不是模糊的效果。

文本溢出处理

网页设计经常发生文本内容超出容器范围的问题，在内容较多时采用分页效果，在内容较少时则采用一些普通的文本溢出处理。常用的文本溢出处理方式有：

  • 简单裁切
  • 简单隐藏
  • 隐藏并显示省略号
  • 使用滚动条

与文本溢出处理相关的属性有 2 个，overflow 和 text-overflow。前者的处理主要是针对包含文本的容器而言，比如 div 啦；而后者的处理主要是针对文本本身而言。下面是代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 简单隐藏 */
div.hidden {
    overflow: hidden;
}
/* 使用滚动条 */
div.scroll {
    overflow: scroll;
}
/* 简单裁切 */
div.clip {
    border: 1px solid;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
}
/* 超出部分显示省略号 */
div.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

金属质感文字

文字的金属质感效果直接实现较为困难，本节效果的实现原理为在文本上方添加一个使用半透明和渐变效果的遮罩层。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
p {
    color: white;
    background: black;
    font-weight: bold;
    font-size: 30px;
    position: relative;
}
span.cover {
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(to bottom, black 0%, transparent 50%, black);
    opacity: 0.5;   /* 设置透明度 */

上述代码在 p 标签中使用一个 span，该 span 的大小与父元素相同。为了实现金属质感，在第 2 行设置文字为黑底白字。span 上使用渐变，从顶部渐变到底部，从黑色渐变到透明再渐变到黑色（第8行渐变部分只使用了W3C标准）在第9行对span的整体透明度进行了设置，这不是必要的，但可以效果更好。

注意：span 部分也可以使用半透明的背景图片实现，只是不如渐变灵活。

隐藏文本

隐藏网页元素的方法有很多种，比如使用 display: none;，或是使用全透明（opacity）。有时并不希望文本丢失，而通常是把文字转移到屏幕的外面，换句话说，文字在屏幕之外，用户看不见，但它依然是存在的。下面是两种隐藏文本的方式：

  • 使用 text-indent 隐藏，图片替换文本、搜索引擎优化
  • 使用定位隐藏——利于屏幕讲述工具的阅读

text-indent 属性本来是用于文本缩进的，当文本缩进使用负参数缩进到屏幕之外时，文本就变得不可见了。此方法可以用图片代替文本，之前很多网站使用 h1 标签，把文本用此方法隐藏，在 h1 上设置 logo 为背景并设置居中来做搜索引擎优化（目前用此方法做搜索引擎优化效果已经过时）。

1
2
3
4
5
6
7
h1 {
    text-indent: -9999px;
    margin: 0 auto ;
    width: 490px;
    height: 200px;  
    background: url("img/baidu.jpg") norepeat;  /* 背景图 */
}

使用绝对定位使文本脱离文档流，然后把文本设置在屏幕的不可见区域即可。很多网页就使用此方法隐藏图标下的字体，但同时有利于“屏幕讲述者”阅读文本对视觉障碍者提供便利。其本质为绝对定位使得文字不可见。

1
2
3
4
5
.screen-reader-text {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

文字旋转

利用 CSS3 变形可以方便地实现文字旋转：

1
2
3
4
5
-webkit-transform:rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);

现代字体栈

CSS 字体栈是一系列的字体，它包含了能在不同操作系统和平台上展示的字体，以尽可能地使排版保持一致性。浏览器会在 font-family 规定的所有字体中从前往后依次查找，如果找不到当前字体就查找下一个字体。网页设计的一个大目标是向大范围用户提供漂亮的排版，而且要考虑字体对所有的用户都有效，所以创建字体栈的原则是使用多个操作系统或终端所共有的或者交叉范围大的一系列字体，需要大量备用字体。