社区首页 >专栏 >【CSS】文本样式：font & text

【CSS】文本样式：font & text

毛大姑娘

发布于 2021-05-06 02:01:38

1.2K00

代码可运行

文章被收录于专栏：向全栈出发向全栈出发

运行总次数：0

代码可运行

本节主要关注文字如何展示。文本颜色由 "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	通过拉伸字符来排齐内容。