CSS - 文本样式

发表于   |   分类于   |  

网页是由文字、图片、音视频组成，因此网页的文字很大程度影响网页的美观度，CSS 的常用文字样式属性如下：

属性 标记
字体 font-family
字号 font-size
颜色 font-color
字重 font-weight
样式 font-style

font 标签

1
<h1><font face="宋体" size="20px" color="red">hello</font></h1>

字体可以通过 <font> 标签设置，但是建议通过 style 标签和属性来设置字体，因为在很多版本中，<font> 标签已被弃用。

font-family 字体

定义元素内的字体，包含空格的字体名个中文字体名，需要用英文 "" 包裹，多个字体使用英文 , 隔开，当使用 style 属性声明字体时，使用英文 '' 包裹，如：

1
2
3
4
5
6
7
<style media="screen">
    h1 {
        font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    }
</style>
<h1 style="font-family:'宋体';">hello</h1>

font-family 的属性值可以是字体名，也可以是字体集，字体集是一类字体的统称。

font-size 字号

font-size 用于定义元素内的字体大小，它的值可以相对单位，也可以是绝对单位。绝对单位有以下几种：

属性值 单位
in 英寸
cm 厘米
mm 毫米
pt 磅，印刷的点数，1英寸 = 72磅。
pc 1pc = 12pt

当没有设置 font-size 时，网页会使用浏览器默认的字体大小，一般是 16px。我们也可以使用绝对值来定义 font-size，可用的绝对值有以下几种：

属性值 对应字号
xx-small 9px
x-small 11px
small 13px
medium 16px
large 19px
x-large 23px
xx-large 28px

绝对单位不会因为设备分辨率或父元素的大小而改变，且根据浏览器和默认设置的不同，展示效果也不一样，因此绝对单位在 font-size 中并不常用。

相对单位有两种单位，px 、 em、 %，相对单位会根据屏幕分辨率的不同，改变自身的大小。其中 em 和 % 都是根据父元素的 font-size 进行计算得出值。2em 也就是父元素字体大小的 2 倍，200% 等同于 2em。

相对单位还有两个特殊的值 smaller 和 larger，它们会根据父元素的 font-size 变大或变小。

color 文字颜色

color 属性用于定义元素内文字的颜色，color 的值可以是英文名、Hex、RGB。

font-weight 字体粗细

font-weight 用于为元素内的文字设置粗细，font-weight 的值有以下几种：

值 标记
默认 normal / 400
粗 bold / 700
更粗 bolder
更细 lighter
数字 100 - 900

font-style 字体样式

在 HTML 中，我们使用 <em> 和 <i> 标签设置斜体，那么在 CSS 中，如何设置斜体呢？那就是 font-style，它有以下几个常用的值：

值 标记
默认 normal
斜体 italic
倾斜 oblique

font-variant 字体变形

设置元素中文本为小型大写字母，只针对英文有效， font-variant 常用的值有以下几种：

值 标记
默认 normal
小型大写字母 small-caps

text-align 水平对齐

设置元素内文本的水 平对齐方式，text-align 常用的值有以下几种：

值 标记
left 左对齐
right 右对齐
center 居中对齐
justify 两段对齐

需要注意的是，text-align 只对块级元素有效。

vertical-align 垂直对齐

设置元素内容的垂直方式，vertical-align 有以下几个常用的值：

值 描述
baseline 基线对齐
sub 下标
super 上标
top 元素顶部对齐
text-top 文字顶部对齐
middle 垂直居中对齐
bottom 元素底部对齐
text-bottom 文字底部对齐
长度 比如 15、-15
百分比 比如 30%、-30%。

vertical-align 对行内元素有效，对块级元素无效。vertical-align 设定的是行内元素在父级元素中，两条基线的垂直对齐方式。

CSS 垂直对齐

line-height 行高

用于设定元素中文本的的行高，它的值可以是长度和 %，em。使用长度作为行高，如果 font-size 发生变化，由于 line-height 大于或小于 font-size，会造成页面文字挤压或过于稀疏，这种情况可以使用百分比来设定行高。

word-spacing 和 letter-spacing

字体属性 描述
word-spacing 设定元素内单词之间的间距
letter-spacing 设定元素内字母之间的间距

word-spacing 属性以空格作为单词的依据，将单词之间的间距增加或缩小。

text-transform

text-transform 用于设定元素内文本的大小写，有以下几个常用的值：

值 描述
capitalize 首字母大写
uppercase 大写
lowercase 小写
none 默认值

text-transform 是以空格区分文本中的单词，如 text-align 这样的单词，在一些浏览器中，可能不会生效。

text-decoration

text-decoration 用以设定元素内文本的装饰，有以下几个常见的值：

值 描述
underline 下划线
overline 上划线
line-through 删除线
blink 闪烁
none 默认