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

文本风格 font-style

登录后复制

font-style:italic

• 1.

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

文本粗细 font-weight

登录后复制

font-weight: bold;

• 1.

属性值

• 关键字：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;

• 1.

• 默认值为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 决定了父元素的最小高度。

• 1.
• 2.
• 3.

字体 font-family

登录后复制

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

• 1.

• 英文采用 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;
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.

【最佳实践】衬线字体

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

登录后复制

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

• 1.
• 2.
• 3.

【最佳实践】等宽字体

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

登录后复制

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

• 1.
• 2.
• 3.

【最佳实践】数学公式

登录后复制

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

• 1.
• 2.
• 3.

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

文本样式 font

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

登录后复制

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

• 1.

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

范例：

登录后复制

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

• 1.

文本颜色 color

登录后复制

color:red

• 1.

属性值：

• 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)

• 1.

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

RGBA 表示法

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

登录后复制

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

• 1.

HSLA 表示法

文字填充颜色 text-fill-color

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

文本排版

首行缩进 text-indent

登录后复制

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

• 1.
• 2.
• 3.

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; 
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.

静态内容换行

• 如果是英文单词，则使用­软连字符优化排版；
  ­软连字符在换行的位置会显示为“-”, 在非换行的位置不可见。
• 如果是非英文单词，则使用<wbr>标签优化排版。

• wbr元素标签，可以实现连续英文和数字的精准换行，具体效果如下：如果宽度足够，不换行；如果宽度不足，则在wbr元素所在的位置进行换行。

登录后复制

/* IE浏览器并不支持wbr标签，使用以下css代码实现兼容 */
wbr:after { content: '\00200B'; }

• 1.
• 2.

登录后复制

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

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

文本溢出 text-overflow

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

登录后复制

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

• 1.

登录后复制

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

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.

文本溢出换行 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>

• 1.

单词间距 word-spacing

仅作用于空格字符

登录后复制

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

• 1.

缩进大小 tab-size

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

登录后复制

tab-size: 2;

• 1.

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

登录后复制

tab-size: 2em;

• 1.

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

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

登录后复制

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

• 1.
• 2.
• 3.
• 4.

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

文本大小调整 text-size-adjust

PC端无效，仅移动端有效

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

登录后复制

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

• 1.
• 2.
• 3.

文本装饰

含文本装饰线 text-decoration ，文字描边 stroke，文本外描边 paint-order，文本强调字符装饰，文本阴影 text-shadow 等。

单词大小写 text-transform

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

登录后复制

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

• 1.

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

登录后复制

input {
　text-transform: uppercase;
}

• 1.
• 2.
• 3.

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

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

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

登录后复制

<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>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.

【实战】渐变色的文本

登录后复制

<template>
  <p class="demo">
    很久很久以前，门口有座山，山上有座庙，庙里有一老一少两个和尚。有一天，老和尚给小和尚讲了一个故事。
  </p>
</template>

<style scoped>
.demo {
  /* 设置背景图片为线性渐变色 */
  background-image: linear-gradient(135deg, red, blue);
  /* 规定背景的绘制区域。(-webkit-用于解决兼容问题) */
  -webkit-background-clip: text;
  /* 前景色设置为透明，才能显示背景色（相当于镂空文本） */
  color: transparent;
}
</style>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.

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

原创作者: u_15715491 转载于: https://blog.51cto.com/u_15715491/11457402