CSS【详解】文本相关样式（含 font 系列样式，文本颜色 color，三种颜色表示法，文本排版-含最佳实战范例，文本装饰，分散对齐，渐变色文本，文本超长显示省略号等）

朝阳39

已于 2024-08-13 15:50:30 修改

阅读量1.3k

点赞数 17

分类专栏： # CSS 文章标签： css

于 2024-07-09 14:41:45 首次发布

本文链接：https://blog.csdn.net/weixin_41192489/article/details/140264311

版权

CSS 专栏收录该内容

149 篇文章 13 订阅

订阅专栏

文本风格 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

属性值：

transparent 透明
red、green、blue、orange、gray等，不区分大小写。
- 暗灰色 darkgray 比灰色 gray 更浅，因此，并不是有 “dark” 前缀的颜色就更深。
10进制表示：rgb(255,0,0)
16进制表示：#FF0000、#0000FF、#00FF00等，#aabbcc 的形式可简写位 #abc。

颜色有多种表示方式：

RGB表示法

color:rgb(255,0,0)

rgb 函数内是三个参数依次是红、绿、蓝，每个参数值的取值范围都是 0-255，通过这三种颜色的混合，便能表示各种颜色。

RGBA 表示法

在RGB的基础上，增加了A（Alpha通道，即透明度，取值为0-1）

color: rgba(0, 0, 255, 0.3);

HSLA 表示法

https://blog.csdn.net/weixin_41192489/article/details/102549564

文字填充颜色 text-fill-color

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

文本排版

文本水平对齐 text-align

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。

  /* 最后一行左对齐 */
  text-align-last: left;

首行缩进 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>

在这里插入图片描述

文本空白 white-space

值	描述
normal	【默认值】合并空白字符和换行符。
pre	空白字符不合并，并且内容只在有换行符的地方换行。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	合并空白字符，但不允许文本环绕，即禁止文本换行，文本会在在同一行上继续，直到遇到<br> 标签为止。
pre-wrap	空白字符不合并，并且内容只在有换行符的地方换行，同时允许文本环绕。
pre-line	合并空白字符，但只在有换行符的地方换行，允许文本环绕。
inherit	规定应该从父元素继承 white-space 属性的值。

缩进大小 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>

【实战】一篇优雅的文章（中英文） vs 聊天框的特别排版

https://blog.csdn.net/weixin_41192489/article/details/134273061

【实战】文字超出显示省略号

单行文本

.demoBox {
    border: 1px solid #ccc;
    width: 100px;
    white-space: nowrap; /* 不换行 */
    overflow: hidden;
    text-overflow: ellipsis; /* 超出省略 */
}

多行文本

.demoBox {
    border: 1px solid #ccc;
    width: 100px;
    overflow: hidden;
    display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
    -webkit-box-orient: vertical; /* 设置子元素排列方式 */
    -webkit-line-clamp: 3; /* 显示几行，超出的省略 */
}