跳到主要内容

2.4-文本和段落样式

Create by fall on — — 2019 Recently revised in 14 May 2024

文本风格​

控制单个文字的展现形式，下划线，加粗，删除线，是否进行处理等

会从顶层元素向下传递

  • font 表示字体，只和文字本身（字体大小，什么字体，字体粗细）有关
  • text 表示文字，和文字无关，和对字体的装饰，排列有关

常用样式​

font-size：字体大小，默认：14px

body{
  font-size:14px;
  /* 也可以写为  large、small，不推荐该写法，字体大小不够直观 */
  /* font-size:large; */
}

在 Chrome 中，会将最小字体设置为 12px 以便用户进行阅读，开发时会遇到一些问题，因此，如果想要更小的字体，需要进行 transform: scale(0.5,0.5) 进行缩小，并且注意，占用空间也需要改变。

font-weight：字体的粗细

<strong> 标签控制字体的粗细

body {
  font-weight: bold;
  /* 通常是通过数字的大小来决定文字的粗细 */
  /* font-weight:600 */
}
/* 100-500 都为正常 600-900为加粗  */

text-align：对齐方式

  • left、right、center、justify
.box{
  text-align:center;
}

font-family​

字体类型：font-family

黑体，宋体或者是等线字体的选择，英文，中文字体，一般设置在根元素 <body> 上，

/* 如果有空格，需要用 "" 引用 */ 
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji";
}

当指定网页字体时，列出至少一种网页安全的后备字体，以避免意外的行为。并且在列表末尾添加一个 CSS 通用字体名称，如 serif 或 sans-serif，这样可以使浏览器回到默认字体。

引入在线字体

谷歌字体：https://developers.google.cn/fonts/docs/getting_started

<!-- 例如，引入 Tangerine, Inconsolata, Droid Sans，有空格的内容使用 + 代替 -->
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans">
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
  body {
    font-family: 'Tangerine', serif;
    font-size: 48px;
  }
</style>

font-style​

font-style：字体的风格

body{
  font-style:normal;/* 可选值：italic、oblique */
}
/* oblique 也表示斜体，区别在于所有字体都可以设置，italic 代有倾斜属性则不可以没有则不行，所以是强行斜体，可能会影响美观） */

text-decoration​

text-decoration：文本修饰

  • 下划线 underline、上划线 overline、删除线：line-though
  • 波浪线：wavy、点状：dotted
  • 以及设置颜色：green
  • 没有样式：none
.text{
  text-decoration: line-through underline;
}
.text2{
  text-decoration: wavy underline #00ff00;
}

一些标签的默认样式就是使用 text-decoration 装饰的：

<del>删除，中划线</del>

<ins>下划线</ins>

text-emphasis​

字体强调，顶部的装饰

.text{
  text-emphasis: filled red;
}
.text2{
  text-emphasis: filled double-circle #ffb703;
}

text-transform​

text-transform：针对英文文本，大小写

  • 小写：lowercase
  • 大写：uppercase
  • 首字母大写：capitalize

text-indent​

text-indent：首行文本缩进

.box{
  text-indent:2em; /* 首行两个缩进 */
}

text-overflow​

文字溢出属性

text-overflow: clip;
// clip
// ellipsis 
// 或者是其它文本，例如 "]..."
// 仅 firefox 支持：设置两个值，分别代表开头和结尾的两个隐藏

使用文字移除属性需要保证以下前提

.box{
  display:block; // 只在块元素中生效
  overflow: hidden; // 必须有溢出隐藏
  white-space: nowrap; // 不去换行
}

另外的隐藏方式，控制超过三行隐藏

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

text-shadow​

字体的阴影，可以实现一些特殊效果

/* 抖音风格的字体 */
.tik-tok {
  font-size:40px;
  text-shadow: -0.06em 0 red, 0.06em 0 cyan;
}
/* 3D 风格的字体 */
.three-dimensional{
  font-size:40px;
  color: #fff;
  text-shadow: 0px 1px 0px #c7c8ca, 0px 2px 0px #b1b3b6, 0px 3px 0px #9d9fa2, 0px 4px 0px #8a8c8e, 0px 5px 0px #77787b, 0px 6px 0px #636466, 0px 7px 0px #4d4d4f, 0px 8px 7px #001135;
}

text-wrap​

  • balance，英文段落的换行从此进行自动均衡
.box{
  text-wrap: balance;
}

其他文本样式​

这些文本样式需要添加一些前缀

.box{
  // 文本的边框颜色
  -webkit-text-stroke: 2px red;
}
.box2{
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 1px;
}

段落​

word-break​

强行进行折行

word-wrap​

先进行换行操作，不够使用后在进行折行

word-spacing​

单词之间的间距（只针对英文单词）

letter-spacing​

字体之间的间距

.class{
  letter-spacing:2px;
}

white-space​

空格，换行符的处理方式

属性作用
normal默认，空白会被浏览器忽略。
pre空白会被浏览器保留。类似 HTML 中的 <pre> 标签。
nowrap文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
pre-wrap保留空白符序列，但是正常地进行换行。
pre-line合并空白符序列，但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值

line-height​

定义行高（文本所占的高度）

上边距，下边距相等，再加上文字大小等于行高。 默认行高随着字体变化而进行变化 取值（number(px)|scale(比例值)

vertical-align​

vertical-align，只对 display:inline，或者是 inline-block 元素生效，比如说

shape-margin​

设置文字和形状之间的间隔

inline-size​

writing-mode 为水平（vertical）时，表示垂直的高度

writing-mode 为水平（horizontal）时，表示水平的宽度

<style>
  .element{
    inline-size: 150px;
		writing-mode: horizontal-tb;
  }
</style>

writing-mode​

columns​

columns：分栏布局，通常用在文本上面

大片新闻，如果想分左右两边展示，需要用到分栏布局

column-count: 分栏个数 ————>选一个 column-width: 分栏的宽度————> column-gap : 分栏的间距 column-span : 合并分栏

文字效果​

文字避让​

文字避让的使用场景很少出现，并且要搭配 float 进行使用：当有 float 出现时，避让 float 的内容。

shape-outside 更改文本环绕盒子的方式。

属性指定使用下面列表的值来定义浮动元素的浮动区域。这个浮动区域决定了行内内容（浮动元素）所包裹的形状。

/* 可选值：margin-box border-box padding-box content-box none */
shape-path
/* 选择 png 文件的内容，有透明的区域 */
shape-outside: url(/media/examples/round-balloon.png);

参考文章​

文章名称链接
MDN 文档https://developer.mozilla.org/en-US/docs/Web/CSS/outline