当前位置：首页 > news >正文

CSS【详解】文本相关样式（含 font 系列，文本排版，文本装饰，分散对齐，渐变色文本等）

news 2025/8/3 14:56:33

文本风格 font-style

font-style:italic

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	加载对应字体的斜体字体文件，若找不到斜体字体文件，则进行物理上的倾斜。标签默认font-style:italic
oblique	浏览器会显示一个倾斜的字体样式。

文本粗细 font-weight

font-weight: bold;

属性值

关键字：normal bold
具体数值：100 200 300 400（等同于normal） 500 600 700（等同于bold） 800 900
相对值（相对于父级元素）：lighter bolder

有时候看不到粗细变化，是因为所使用的字体不支持。比如“微软雅黑”，只支持 400 和 700 这两种粗细，而 Mac 上的 “苹方” 字体，支持从100到900之间的各种粗细。

文本大小 font-size

font-size:20px;

默认值为16px
设置为 0，可用于隐藏文本，如隐藏网站左上角的logo中的文字

行高 line-height

行高：两行文字“基线”之间的垂直距离
在这里插入图片描述

属性值：

normal【默认值】—— 和字体font-family有关，不同系统不同浏览器不一样，所以，通常都要对line-height的默认值进行重置。
数值 —— 行高 = 数字* font-size ，所有的子元素继承的都是这个值，比如1表示1倍行距，2表示2倍行距
- 重图文内容展示的网站，如博客、公众号等，一定要使用数值作为单位，设置在1.6～1.8。
百分比值 —— 行高 = 百分比* font-size ，所有的子元素继承的是最终的计算值
长度值 —— 所有的子元素继承的是最终的计算值，推荐使用line-height:20px，排版时方便计算

父元素内多个内联元素排列在一行时，line-height 最大的内联元素决定了父元素的高度。父元素内内联元素和替换元素排列在一行时，line-height 决定了父元素的最小高度。

字体 font-family

font-family: "Times New Roman","微软雅黑","宋体";

英文采用 Times New Roman 字体，中文采用微软雅黑字体（要给英文设置另一个字体，则英文字体需写在中文字体前面！）
若用户电脑里没有安装微软雅黑字体，那么就会采用宋体。
所有的中文字体，都有英语别名。
- 微软雅黑的英语别名：font-family: “Microsoft YaHei”;
- 宋体的英语别名：font-family: “SimSun”;

【最佳实践】无衬线字体

笔划粗细基本一致，只剩下主干，造型简明有力，起源也很晚。适用于标题、广告等，识别性高，更符合现代审美

@font-face {font-family: Emoji;src: local("Apple Color Emoji"),local("Segoe UI Emoji"), local("Segoe UI Symbol"),local("Noto Color Emoji");unicode-range: U+1F000-1F644, U+203C-3299;
}
body {font-family: system-ui, -apple-system, Segoe UI, Roboto, Emoji, Helvetica, Arial, sans-serif;
}

【最佳实践】衬线字体

在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同，如宋体、楷体

.font-serif {font-family: Georgia, Cambria, "Times New Roman", Times, serif;
}

【最佳实践】等宽字体

每个字符在同等font-size下占据的宽度相同。一般是针对英文字体而言的，因为东亚字体都是等宽的。常用于呈现代码，IDE代码编辑器也推荐使用等宽字体。

.font-mono {font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

【最佳实践】数学公式

math {font-family: Cambria Math, Latin Modern Math;
}

Cambria Math 是 Windows 操作系统中的数学字体
Latin Modern Math 是 macOS 中的数学字体

文本样式 font

是以上几种文本样式的综合简写形式，语法为：

font:文本风格 文本粗细 文字大小/行高 字体

文字大小和字体必须要有！

范例：

font:italic bold 12px/20px arial,sans-serif;

文本颜色 color

color:red

文字填充颜色 text-fill-color

默认值：transparent
其功能与 color 基本相同，但当 text-fill-color 和 color 同时存在时，text-fill-color 会覆盖 color

文本排版

首行缩进 text-indent

在这里插入图片描述

<p style="text-indent: 2em">很久很久以前，门口有座山，山上有座庙，庙里有一老一少两个和尚。有一天，老和尚给小和尚讲了一个故事。
</p>

1em是一个中文，2em即2个中文宽度，实现每个段落空两个字开头的效果！

text-indent 的百分比值相对于当前元素的“包含块”计算
display计算值为 inline 的内联元素设置 text-indent 无效，如果计算值是inline-block/inline-table 则会生效。

文本换行 word-break

值	描述
normal	使用浏览器默认的换行规则。
break-word	尽量不断开单词
break-all	允许在单词内换行。
keep-all	只在半角空格或连字符处换行，还可以保护中文词组不被断开，非常有利于优化中文排版。

浏览器默认的换行规则

Space普通空格、Enter（回车）空格和Tab（制表符）空格这3种空格无论怎样组合都会合并为单个普通空格。
文字可以在中文/日文/韩文文本、普通空格和短横线连字符处换行，连续英文单词和数字不换行。

动态内容换行

p {/* 支持破折号换行 */word-break: break-all;/* 兼容IE浏览器和Edge浏览器的破折号换行 */word-wrap: break-word;/* 中文标点也能换行 */line-break: anywhere; 
}

静态内容换行

如果是英文单词，则使用软连字符优化排版；

软连字符在换行的位置会显示为“-”, 在非换行的位置不可见。
如果是非英文单词，则使用<wbr>标签优化排版。
- wbr元素标签，可以实现连续英文和数字的精准换行，具体效果如下：如果宽度足够，不换行；如果宽度不足，则在wbr元素所在的位置进行换行。
```
/* IE浏览器并不支持wbr标签，使用以下css代码实现兼容 */
wbr:after { content: '\00200B'; }
```

在这里插入图片描述

  <p>大家好，今天是星期天，天气真的好，很高兴再次见到大家，我叫zhang&shy;san&shy;feng，感谢大家记得我！</p><p>大家好，今天是星期天，天气真的好，很高兴再次见到大家，我叫zhang<wbr />san<wbr />feng,感谢大家记得我！</p>

文本溢出 text-overflow

值	描述
clip	修剪文本
ellipsis	显示省略号来代表被修剪的文本
string	使用给定的字符串来代表被修剪的文本。

 <div class="textBox">文字超出容器的宽度，溢出啦!</div>

.textBox{width: 100px;white-space: nowrap;border: 1px solid black;margin: 30px;overflow:hidden;text-overflow: ellipsis;/*超出部分显示为省略号*/
}

在这里插入图片描述

文本溢出换行 overflow-wrap word-wrap

CSS3 中将 word-wrap 改名为 overflow-wrap，所以使用 overflow-wrap 时，最好同时使用 word-wrap 作为备选，来增强兼容性。

normal：允许内容顶开或溢出指定的容器边界。
break-word：内容将在边界内换行。如果需要，单词内部允许断行。

字母间距 letter-spacing

<p style="letter-spacing: 1cm">Hello World 你好，世界!</p>

在这里插入图片描述

单词间距 word-spacing

仅作用于空格字符

<p style="word-spacing: 1cm">Hello World 你好，世界!</p>

在这里插入图片描述

缩进大小 tab-size

控制Tab键输入的空格（U+0009）的长度大小。

tab-size: 2;

表示每个Tab键输入的空格的宽度等同于2个Space键输入的空格的宽度。

tab-size: 2em;

表示每个Tab键输入的空格的宽度等同于2个常规汉字的宽度。

使用场景：设置源代码展示时使用Tab键输入的空格的缩进距离

pre {-moz-tab-size: 4;tab-size: 4;
}

效果见 https://demo.cssworld.cn/new/9/3-2.php

文本大小调整 text-size-adjust

PC端无效，仅移动端有效

使用场景——禁止iphone横屏时字号自动调整的行为

body {-webkit-text-size-adjust: none;
}

文本装饰

含文本装饰线 text-decoration ，文字描边 stroke，文本外描边 paint-order，文本强调字符装饰，文本阴影 text-shadow 等。
https://blog.csdn.net/weixin_41192489/article/details/140270966

单词大小写 text-transform

uppercase（单词大写）
lowercase（单词小写）
capitalize（每个单词的首字母大写）

<p style="text-transform: lowercase">Hello World!</p>

Hello World!

实战范例：身份证的输入框自动大写

input {text-transform: uppercase;
}

【实战】分散对齐（两端对齐）

满足以下两点时，才能呈现出预期效果：

有分隔点，如空格；
要超过一行，此时非最后一行内容会两端对齐。

在这里插入图片描述

<template><p>很久很久以前，门口有座山，山上有座庙，庙里有一老一少两个和尚。有一天，老和尚给小和尚讲了一个故事。</p><h4>两端对齐后</h4><p class="demo">很久很久以前，门口有座山，山上有座庙，庙里有一老一少两个和尚。有一天，老和尚给小和尚讲了一个故事。</p>
</template><style scoped>
.demo {/* 最后一行左对齐 */text-align-last: left;text-align: justify;/* 兼容所有浏览器，inter-ideograph的字面意思是“国际象形文字” */text-justify: inter-ideograph;
}
</style>

【实战】渐变色的文本

在这里插入图片描述

<template><p class="demo">很久很久以前，门口有座山，山上有座庙，庙里有一老一少两个和尚。有一天，老和尚给小和尚讲了一个故事。</p>
</template><style scoped>
.demo {/* 设置背景图片为线性渐变色 */background-image: linear-gradient(135deg, red, blue);/* 规定背景的绘制区域。(-webkit-用于解决兼容问题) */-webkit-background-clip: text;/* 前景色设置为透明，才能显示背景色（相当于镂空文本） */color: transparent;
}
</style>