CSS字体设计的新手指南在这篇文章中，我将谈一谈用CSS对文本进行造型，使用以下属性。 text-transform t

在这篇文章中，我将谈一谈用CSS对文本进行造型，使用以下属性。

text-transform
text-decoration
text-align
vertical-align
line-height
text-indent
text-align-last
word-spacing
letter-spacing
text-shadow
white-space
tab-size
writing-mode
hyphens
text-orientation
direction
line-break
word-break
overflow-wrap

`text-transform`

这个属性可以改变一个元素的情况。

有4个有效值。

capitalize 大写每个单词的第一个字母
uppercase 大写所有的文字
lowercase 小写所有的文本
none 禁用文本转换，用于避免继承该属性。

例子。

p {
  text-transform: uppercase;
}

`text-decoration`

这个属性是用来给文本添加装饰的，包括

underline
overline
line-through
blink
none

例子。

p {
  text-decoration: underline;
}

你还可以设置装饰的样式，以及颜色。

例子。

p {
  text-decoration: underline dashed yellow;
}

有效的样式值是solid,double,dotted,dashed,wavy 。

你可以在一行中完成所有工作，或者使用特定的属性。

text-decoration-line
text-decoration-color
text-decoration-style

例子。

p {
  text-decoration-line: underline;
  text-decoration-color: yellow;
  text-decoration-style: dashed;
}

`text-align`

默认情况下，文本对齐有start ，意味着文本从包含它的盒子的 "开始"，原点0，0开始。这意味着在从左到右的语言中是左上角，而在从右到左的语言中是右上角。

可能的值是start,end,left,right,center,justify （很好的是在行尾有一个一致的间距）。

`vertical-align`

确定内联元素如何在垂直方向上对齐。

我们对这个属性有几个值。首先，我们可以指定一个长度或百分比值。这些都是用来对齐文本的位置，比父元素的基线高或低（使用负值）。

然后我们有关键词。

baseline (默认值)，将基线与父元素的基线对齐
sub 使一个元素下标，模拟 HTML元素的结果sub
super 使一个元素成为上标，模拟 HTML元素的结果sup
top 将元素的顶部对齐到行的顶部
text-top 将元素的顶部对齐到父元素字体的顶部
middle 将元素的中间部分与父元素的行的中间部分对齐
bottom 将元素的底部对准行的底部
text-bottom 将元素的底部对齐到父元素字体的底部

`line-height`

这允许你改变一行的高度。每行文字都有一定的字体高度，但在行与行之间又有额外的垂直间距。这就是行高。

p {
  line-height: 0.9rem;
}

`text-indent`

将段落的第一行缩进一个设定的长度，或段落宽度的一个百分比。

p {
  text-indent: -10px;
}

`text-align-last`

默认情况下，段落的最后一行是按照text-align 值对齐的。使用此属性可以改变这一行为。

p {
  text-align-last: right;
}

`word-spacing`

修改每个单词之间的间距。

你可以使用normal 关键字，重置继承值，或者使用一个长度值。

p {
  word-spacing: 2px;
}

span {
  word-spacing: -0.2em;
}

`letter-spacing`

修改了每个字母之间的间距。

你可以使用normal 关键字，重置继承值，或使用一个长度值。

p {
  letter-spacing: 0.2px;
}

span {
  letter-spacing: -0.2em;
}

`text-shadow`

给文本施加阴影。默认情况下，文本现在有阴影。

这个属性接受一个可选的颜色和一组值，用来设置

阴影与文本的X偏移
阴影与文本的Y偏移
模糊半径

如果没有指定颜色，阴影将使用文本的颜色。

例子。

p {
  text-shadow: 0.2px 2px;
}

span {
  text-shadow: yellow 0.2px 2px 3px;
}

`white-space`

设置CSS如何处理元素内部的空白处、新行和制表符。

折叠白色空间的有效值是。

normal 折叠白色空间。当文本到达容器末端时，必要时添加新行
nowrap 折叠白色空间。当文本到达容器的末端时不添加新行，并抑制任何添加到文本的换行符
pre-line 折叠留白。当文本到达容器末端时，必要时添加新行

保留白色空间的有效值是。

pre 保留白色空间。当文本到达容器的末端时不添加新行，但保留添加到文本的换行符
pre-wrap 保留留白。当文本到达容器末端时，必要时添加新行

`tab-size`

设置制表符的宽度。默认是8，你可以设置一个整数值，设定它所占用的字符空间，或者一个长度值。

p {
  tab-size: 2;
}

span {
  tab-size: 4px;
}

`writing-mode`

定义文本行是水平排列还是垂直排列，以及块的进展方向。

你可以使用的值是

horizontal-tb (默认值)
vertical-rl 内容是垂直排列的。新行放在前一行的左边。
vertical-lr 内容是垂直排列的。新行放在前一行的右边。

`hyphens`

确定在进入新行时是否应自动添加连字符。

有效值是

none (默认)
manual 只在已经有可见的连字符或隐藏的连字符（一个特殊字符）的情况下添加连字符
auto 当确定文本可以有连字符时添加连字符。

`text-orientation`

当writing-mode 在垂直模式下，决定文本的方向。

有效值是

mixed 是默认值，如果一种语言是垂直的（如日语），它将保留该方向，而旋转西方语言书写的文本
upright 使所有文本都是垂直方向的
sideways 使所有文字都是水平方向的

`direction`

设置文本的方向。有效值是ltr 和rtl 。

`word-break`

这个属性指定了如何在字里行间断句。

normal (默认）意味着文本只在字与字之间断开，不在字内断开。
break-all 浏览器可以断字（但不加连字符）。
keep-all 抑制软包装。主要用于中日韩（Chinese/Japanese/Korean）文本。

说到中日韩文字，属性line-break ，用来决定文字的断行方式。我不是这些语言的专家，所以我将避免涉及它。

`overflow-wrap`

如果一个词太长，无法容纳一行，它就会溢出容器之外。

这个属性也被称为word-wrap ，尽管这是非标准的（但仍然可以作为一个别名）。

这是默认行为(overflow-wrap: normal;)。

我们可以使用。

p {
  overflow-wrap: break-word;
}

来打断它的确切长度，或者

p {
  overflow-wrap: anywhere;
}

如果浏览器发现前面有一个软换行的机会，则可以用：。在任何情况下，都不会添加连字符。

这个属性与word-break 非常相似。我们可能想在西方语言上选择这个属性，而word-break 对非西方语言有特殊处理。