CSS字体属性

146 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第3天,点击查看活动详情

字体属性:

1.font-size(重要)

font-size决定字体的大小

常用设置

具体数值+单位

比如100px

也可是使用em单位(不推荐):1em代表100%;0.5em代表50%

百分比

基于父元素的font-size计算,比如50%表示等于父元素font-size的一般

2.font-family(重要,不过一般仅设置一次)

font-family用于设置文字的字体名称

可以设置1个或多个字体名称;

浏览器会选择列表中第一个该计算机上有安装的字体;

或者通过@font-face制定的可以直接下载的字体。

3.font-weight(重要)

font-weight用于设置文字的粗细(重要)

常见的取值:

100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900:每一个数字代表一个重量

normal:等于400

bold:等于700

注释:strong、b、h1~h6等标签的font-weight默认就是bold

4.font-style(一般)

font-style用于设置文字的常规、斜体显示

normal:常规显示

italic(斜体):用字体的斜体显示(通常会有专门的字体)

oblique(倾斜):文本倾斜显示(仅仅是让文字倾斜)

注释:em、i、cite、address、var、dfn等元素的font-style就是默认就是italic

5.font-variant(了解)

font-variant可以影响小写字母的显示形式

variant是变形的意思;

可以设置的值如下

normal:常规显示

small-caps:将小写字母替换为缩小过的大写字母

6.line-height

7.font

font是一个缩写属性

font属性可以用来作为font-style,font-variant,font-weight,font-size,line-height和font-family属性的简写;

font-style font-variant font-weight font-size/line-height font-family

规则:

font-style、font-variant、font-weight可以任意调换顺序,也可以省略

/line-height可以省略,如果不省略,必须跟在font-size后面

font-size、font-family不可以调换顺序,不可以省略