前端项目开发-08_CSS属性-字体.pdf

CSS属性-字体

王红元coderwhy

目录

content1font-size

2font-family

3font-weight

4line-height

5font缩写属性

coderwhyfont-size(重要)

◼font-size决定文字的大小

◼常用的设置

具体数值+单位

✓比如100px

✓也可以使用em单位(不推荐)：1em代表100%，2em代表200%，0.5em代表50%

百分比

✓基于父元素的font-size计算，比如50%表示等于父元素font-size的一半

coderwhyfont-family(重要,不过一般仅设置一次)

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

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

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

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

◼淘宝使用的字体:

coderwhyfont-weight(重要)

◼font-weight用于设置文字的粗细（重量）

◼常见的取值:

◼100|200|300|400|500|600|700|800|900：每一个数字表示一个重量

◼normal：等于400

◼bold：等于700

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

coderwhyfont-style(一般)

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

◼normal：常规显示

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

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

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

coderwhyfont-variant(了解)

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

variant是变形的意思;

◼可以设置的值如下

normal：常规显示

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

coderwhyline-height(常用)

◼line-height用于设置文本的行高

◼行高可以先简单理解为一行文字所占据的高度

line-height

line-height

line-height

coderwhy为什么文本需要行高?

coderwhyline-height

◼行高的严格定义是：两行文字基线（baseline）之间的间距

◼基线（baseline）：与小写字母x最底部对齐的线

顶线（top）

中线（middle）

基线（baseline）

底线（bottom