跳至主要內容

文本和字体属性

Kpsmart2025年3月4日大约 5 分钟

文本和字体属性

控制文本和字体显示的属性，包括 font、text、line 等相关属性。

属性列表

下面是文本和字体属性的完整列表，点击属性名可跳转到 MDN 文档查看详细信息。

字体属性

属性名描述语法
font在一个声明中设置所有字体属性font: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar
font-family指定文本的字体族font-family: [ <family-name> | <generic-family> ]#
font-size指定字体的大小font-size: <absolute-size> | <relative-size> | <length-percentage>
font-style指定字体的样式font-style: normal | italic | oblique | oblique <angle>
font-weight指定字体的粗细font-weight: normal | bold | bolder | lighter | <number>
font-variant指定字体变体font-variant: normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name>#) || character-variant(<feature-value-name>#) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ]
font-stretch指定字体的伸缩变形font-stretch: <font-stretch-absolute>
font-size-adjust独立于字体的实际大小，调整其视觉大小font-size-adjust: none | <number>
font-synthesis控制浏览器合成字体的粗体或斜体font-synthesis: none | [ weight || style ]
font-kerning控制字体的字距调整font-kerning: auto | normal | none
font-variant-caps控制大写字母的替代字形font-variant-caps: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps
font-variant-numeric控制数字、分数和序号标记的替代字形font-variant-numeric: normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]
font-variant-ligatures控制文本中使用的连字font-variant-ligatures: normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]

文本属性

属性名描述语法
color设置文本内容的颜色color: <color>
text-align指定文本的水平对齐方式text-align: start | end | left | right | center | justify | match-parent
text-decoration设置文本的修饰线text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-thickness'>
text-decoration-line设置文本修饰线的位置text-decoration-line: none | [ underline || overline || line-through || blink ]
text-decoration-color设置文本修饰线的颜色text-decoration-color: <color>
text-decoration-style设置文本修饰线的样式text-decoration-style: solid | double | dotted | dashed | wavy
text-decoration-thickness设置文本修饰线的粗细text-decoration-thickness: auto | from-font | <length> | <percentage>
text-indent指定文本块中首行文本的缩进text-indent: <length-percentage> && hanging? && each-line?
text-overflow指定当文本溢出包含元素时的显示方式text-overflow: [ clip | ellipsis | <string> ]{1,2}
text-shadow为文本添加阴影text-shadow: none | <shadow-t>#
text-transform控制文本的大小写text-transform: none | capitalize | uppercase | lowercase | full-width | full-size-kana
white-space设置如何处理元素内的空白white-space: normal | pre | nowrap | pre-wrap | pre-line | break-spaces
word-break指定单词内断行的规则word-break: normal | break-all | keep-all | break-word
word-spacing设置单词之间的间距word-spacing: normal | <length-percentage>
word-wrap允许长单词断行到下一行word-wrap: normal | break-word
overflow-wrap指定当内容超过行框时是否断行overflow-wrap: normal | break-word | anywhere
letter-spacing设置文本字符之间的间距letter-spacing: normal | <length>
line-height设置行高line-height: normal | <number> | <length> | <percentage>
line-break指定如何处理中文、日文或韩文文本的换行line-break: auto | loose | normal | strict | anywhere
vertical-align设置行内元素的垂直对齐方式vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>
hyphens指定单词断字的方式hyphens: none | manual | auto
text-justify指定文本对齐时使用的对齐方法text-justify: auto | inter-character | inter-word | none
text-underline-position指定下划线的位置text-underline-position: auto | from-font | [ under || [ left | right ] ]
text-rendering提供浏览器关于如何优化文本渲染的信息text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision

书写模式属性

属性名描述语法
direction指定文本方向direction: ltr | rtl
unicode-bidi与 direction 属性一起使用，处理文档中的双向文本unicode-bidi: normal | embed | isolate | bidi-override | isolate-override | plaintext
writing-mode指定文本行是水平还是垂直布局writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
text-orientation指定垂直模式下文本的方向text-orientation: mixed | upright | sideways
text-combine-upright将多个字符组合到单个字符空间中text-combine-upright: none | all | [ digits <integer>? ]

使用示例

/* 基本字体设置 */
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

/* 标题样式 */
h1 {
  font-size: 2.5em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* 段落文本样式 */
p {
  text-align: justify;
  text-indent: 2em;
  word-spacing: 0.1em;
}

/* 强调文本 */
.highlight {
  color: #e74c3c;
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: rgba(231, 76, 60, 0.5);
  text-decoration-style: wavy;
}

/* 截断溢出文本 */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 垂直文本 */
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

浏览器兼容性

大多数现代浏览器都支持这些文本和字体属性。较新的属性如 font-variant-* 系列、text-decoration-thickness 和 text-underline-position 在较新的浏览器中得到支持。具体兼容性信息请参考各属性的 MDN 文档。

相关资源