基本信息
文件名称:前端项目开发-08_CSS属性-字体.pdf
文件大小:627.54 KB
总页数:12 页
更新时间:2025-03-25
总字数:约2.74千字
文档摘要

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