【CSS】文本样式：font & text
【CSS】文本样式：font & text
本节主要关注文字如何展示。 文本颜色由 "color" 属性设置。
font
在一个声明中设置所有字体属性。
.text{
font:italic arial,sans-serif;
}可以按顺序设置如下属性：
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
font-style
该属性设置使用斜体、倾斜或正常字体。
.text{
font-style: normal | italic | oblique | inherit;
}font-style 值 | 作用 |
|---|---|
normal | 默认值。浏览器显示一个标准的字体样式。 |
italic | 浏览器会显示一个斜体的字体样式。 |
oblique | 浏览器会显示一个倾斜的字体样式。 |
inherit | 规定应该从父元素继承字体样式。 |
font-variant
font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
.text{
font-variant: normal | small-caps | inherit;
}font-variant 值 | 作用 |
|---|---|
normal | 默认值。浏览器会显示一个标准的字体。 |
small-caps | 浏览器会显示小型大写字母的字体。 |
inherit | 规定应该从父元素继承 font-variant 属性的值。 |
font-weight
设置文本的粗细。
.text{
font-weight: normal | bold | bolder | lighter | 具体值 | inherit;
}font-weight 值 | 作用 |
|---|---|
normal | 默认值。定义标准的字符。 |
bold | 定义粗体字符。 |
bolder | 定义更粗的字符。 |
lighter | 定义更细的字符。 |
100/200/300/400/500/600/700/800/900 | 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 |
inherit | 规定应该从父元素继承字体的粗细。 |
font-size
设置字体的尺寸。
.text{
font-size: 28px | small | smaller | larger | 80% | inherit;
}font-size 值 | 作用 |
|---|---|
xx-small/x-small/small/medium/large/x-large/xx-large | 把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。 |
smaller | 把 font-size 设置为比父元素更小的尺寸。 |
larger | 把 font-size 设置为比父元素更大的尺寸。 |
length（如：28px） | 把 font-size 设置为一个固定的值。 |
% （如：80%） | 把 font-size 设置为基于父元素的一个百分比值。 |
inherit | 规定应该从父元素继承字体尺寸。 |
font-family
规定元素的字体系列。
.text{
font-family: "SF Pro SC","SF Pro Text","SF Pro Icons","PingFang SC", Verdana, Arial, '微软雅黑','宋体';
}有两种类型的字体系列名称：
指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个，直到找到可识别的第一个值。
font-family 值 | 作用 |
|---|---|
family-name/generic-family | 用于某个元素的字体族名称或/及类族名称的一个优先表。默认值：取决于浏览器。 |
inherit | 规定应该从父元素继承字体系列。 |
line-height
设置行间距离（行高）。
.text{
line-height: 28px | normal | number | 80% | inherit;
}line-height 值 | 作用 |
|---|---|
normal | 默认。设置合理的行间距。 |
number | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 |
length（如：28px） | 设置固定的行间距。 |
% （如：80%） | 基于当前字体尺寸的百分比行间距。 |
inherit | 规定应该从父元素继承 line-height 属性的值。 |
text
text-align
规定元素中的文本的水平对齐方式。
.text{
text-align: left | right | center | justify | inherit;
}text-align 值 | 作用 |
|---|---|
left | 把文本排列到左边。默认值：由浏览器决定。 |
right | 把文本排列到右边。 |
center | 把文本排列到中间。 |
justify | 实现两端对齐文本效果。 |
inherit | 规定应该从父元素继承 text-align 属性的值。 |
文本水平垂直居中
text-align与line-height配合使用可以使文本水平方向和垂直方向都居中。
.text{
height: 50px;
text-align: center;
line-height: 50px;
}将line-height设置成height同样的高度，就能达到垂直居中的效果，水平居中由 text-align控制。
text-decoration
文本的修饰。
.text{
text-decoration: none | underline | overline | line-through | blink | inherit;
}text-decoration 值 | 作用 |
|---|---|
none | 默认。定义标准的文本。 |
underline | 定义文本下的一条线。 |
overline | 定义文本上的一条线。 |
line-through | 定义穿过文本下的一条线。 |
blink | 定义闪烁的文本。 |
inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
text-decoration 衍生属性：
text-shadow
当文本溢出包含元素时如何处理。
.text{
text-shadow: clip | ellipsis | string;
}text-shadow 值 | 作用 |
|---|---|
clip | 修剪文本。 |
ellipsis | 显示省略符号来代表被修剪的文本。 |
string | 使用给定的字符串来代表被修剪的文本。 |
text-transform
控制文本的大小写。
.text{
text-transform: clip | ellipsis | string;
}text-transform 值 | 作用 |
|---|---|
none | 默认。定义带有小写字母和大写字母的标准的文本。 |
capitalize | 文本中的每个单词以大写字母开头。 |
uppercase | 定义仅有大写字母。 |
lowercase | 定义无大写字母，仅有小写字母。 |
inherit | 规定应该从父元素继承 text-transform 属性的值。 |
text-indent
规定文本块中首行文本缩进的距离。
.text{
text-indent: 50px | 20% | inherit;
}text-indent 值 | 作用 |
|---|---|
length（如：50px） | 定义固定的缩进。默认值：0。 |
% （如：20%） | 定义基于父元素宽度的百分比的缩进。 |
inherit | 规定应该从父元素继承 text-indent 属性的值。 |
text-justify
规定当 text-align 被设置为 justify 时的齐行方法。
.text{
text-align:justify;
text-justify: auto | inter-word | inter-ideograph | inter-cluster | distribute | kashida | trim;
}text-justify 值 | 作用 |
|---|---|
auto | 浏览器决定齐行算法。 |
none | 禁用齐行。 |
inter-word | 增加/减少单词间的间隔。 |
inter-ideograph | 用表意文本来排齐内容。 |
inter-cluster | 只对不包含内部单词间隔的内容（比如亚洲语系）进行排齐。 |
distribute | 类似报纸版面，除了在东亚语系中最后一行是不齐行的。 |
kashida | 通过拉伸字符来排齐内容。 |
腾讯云开发者
