文字排版属性

文字排版属性

文字排版是网页设计中不可或缺的一部分，CSS3提供了丰富的属性来控制文字的显示效果。从字体选择到间距调整，再到装饰和阴影，这些属性让开发者能够精确地控制文本的呈现方式。

字体属性

font-family属性定义了文本的字体系列。可以指定多个字体作为备选，确保在不同设备上都能有良好的显示效果。

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

font-size控制文字大小，支持多种单位：

h1 {
  font-size: 2em; /* 相对单位 */
}
p {
  font-size: 16px; /* 绝对单位 */
}

font-weight设置字体的粗细程度：

strong {
  font-weight: 700; /* 等同于bold */
}

font-style用于设置斜体文本：

em {
  font-style: italic;
}

文本装饰与转换

text-decoration属性可以添加下划线、上划线、删除线等装饰：

a {
  text-decoration: none; /* 去除链接下划线 */
}
.del {
  text-decoration: line-through;
}

text-transform控制文本的大小写转换：

.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}

文本对齐与间距

text-align设置文本的水平对齐方式：

.center {
  text-align: center;
}
.justify {
  text-align: justify;
}

line-height定义行间距，对可读性影响很大：

article {
  line-height: 1.6; /* 无单位值表示相对于当前字体大小 */
}

letter-spacing和word-spacing分别控制字符和单词间距：

.heading {
  letter-spacing: 1px;
}
.spaced {
  word-spacing: 0.5em;
}

文本阴影与溢出

text-shadow为文本添加阴影效果：

h2 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

text-overflow处理文本溢出容器的情形：

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

高级排版特性

CSS3引入了@font-face规则，允许使用自定义字体：

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2');
}

font-feature-settings启用OpenType字体特性：

.oldstyle {
  font-feature-settings: "onum";
}

hyphens属性控制连字符断字：

p {
  hyphens: auto;
}

垂直对齐与书写模式

vertical-align控制行内元素的垂直对齐：

img.icon {
  vertical-align: middle;
}

writing-mode改变文本的书写方向：

.vertical-text {
  writing-mode: vertical-rl;
}

文本渲染优化

text-rendering属性提供渲染提示：

body {
  text-rendering: optimizeLegibility;
}

font-smooth控制字体抗锯齿：

body {
  -webkit-font-smoothing: antialiased;
}

多列文本布局

CSS3的多列布局可以创建类似报纸的排版：

.multicol {
  column-count: 3;
  column-gap: 2em;
  column-rule: 1px solid #ddd;
}

文本选择样式

::selection伪元素可以自定义文本被选中时的样式：

::selection {
  background: #ffb7b7;
  color: #000;
}

可变字体

CSS3支持可变字体，允许通过一个字体文件实现多种字重和宽度：

@font-face {
  font-family: 'VariableFont';
  src: url('font.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
}

.variable {
  font-family: 'VariableFont';
  font-weight: 650;
  font-stretch: 110%;
}