CSS的字体属性概括与如何运用

字体与字体图标

1. 字体常用属性汇总

序号	属性	描述
1	font-family	设置字体族
2	@font	设置自定义字体族
3	font-weight	设置字体粗细, 字重
4	font-size	设置字体大小(字号)
5	font-style	设置字体样式
6	font-strecth	设置字体拉伸
7	font	简化字体设置

2.2 五种通用字体族

• 通用字体族简介

序号	名称	字型宽度	是否有衬线	备注
1	衬线字体	各不相同	有	衬线指笔划尾部有装饰
2	无衬线字体	各不相同	无	笔划尾部部无装饰
3	等宽字体	全部相同	有 / 无	常用于编程或表格数据
4	草书字体	各不相同	有 / 无	也叫手写字体,模仿人类笔迹
5	艺术字体	各不相同	有 / 无	无统一规范,用于展示特殊内容

• font-family可设置的字体族

序号	属性	描述	示例
1	serif	衬线字体	Times,New Century,Ceorgia
2	sans-serif	无衬线字体	Helvetica,Geneva,Verdana,Arial
3	monospace	等宽字体	Menlo, Monaco, 'Courier New',Consolas
4	cursive	草书字体	Helvetica,Geneva,Verdana,Arial
5	fantasy	艺术字体	Author,Comic Sans,Zapf Chancery

字体族名称由多个单词构成, 或者与 css 关键字相同时, 必须使用”引号”做为定界符

2.3 其它常用字体族

序号	属性	描述
1	system-ui	从浏览器获取到用户界面的系统默认字体,差别极大
2	math	显示数学相关字符的特殊样式, 支持上标和下标,跨行括号,嵌套
3	emoji	专门用于呈现 Emoji 表情符号的字体
4	fangsong	中文仿宋体:介于宋体和楷体之间,常用于重要文件

---

3. @font-face

3.1 属性简介

该属性的值,是一个属性集合

名称	描述
功能	设置显示文本的自定义字体
语法	@font-face {...}

3.2 @font-face:常用属性

序号	属性	必选?	描述
1	font-family	必选	设置自定义字体族
2	src	必选	自定义字体族对应的字体文件所在路径
3	font-weight	可选	设置字体粗细
4	font-size	可选	设置字体大小(字号)
5	font-style	可选	设置字体样式
6	font-strecth	可选	设置字体拉伸
7	unicode-range	可选	限制字符范围,Unicode 码: U+0-10FFF

3.3 常用字体文件格式

序号	格式	全称	描述
1	EOT	Embedded OpenType	IE 专用字体
2	OTF	OpenType	非 IE 通用字体
3	SVG	Scalable Vector Graphics	基于 SVG 方式渲染
4	TTF	TrueType	通用原始字体
5	WOFF	Web Open Font Format	Web 通用字体

3.4 src属性详解

@font-face的src属性中常用关键字:

序号	关键字	描述
1	url	设置字体文件路径
2	format	设置字体格式,使浏览器可跳过不支持的格式
3	local	设置已经安装在用户设备中的字体族名称

@font-face {
  /* 字体族 */
  font-family: "SwitzeraADF";
  /* local: 检查用户设备中是否存在指定字体,如果有则优先加载使用 */
  src: local("Switzera-Regular"), local("SwitzeraADF-Regular"),
    /* url:如果用户设备中没有指定字体,则远程下载指定字体 */
      /* format: 允许跳过不支持的格式下载 */ url("SwitzeraADF-Regular.oft")
      format("opentype"), url("SwitzeraADF-Regular.true") format("truetype");
}

---

4. font-weight

• 该属性用于设置字体的字重,即粗细,常用属性如下:

序号	属性值	描述
1	normal	默认值
2	bold	比默认值加粗加黑一级
3	bolder	相对父级font-weight加粗加黑一级
4	lighter	相对父级font-weight加粗加黑减少一级

• 字重除了用关键字描述之外,还可以用整数100-900表示
• 不同的字体族, 数值对应的加粗级别并不一致,大致如下

序号	值	对应的font-weight关键字
1	100 - 500	normal
2	600-900	bold

/* <p > Hello <span > Peter</span > </p >  */
p {
  font-weight: bold;
}
p span {
  /* span中的文本相对父级文本更粗更黑一级 */
  font-weight: bolder;
}

---

5. font-size

该属性用来设置字体大小, 常用属性值

序号	属性值	描述	换算
1	xx-small	最小	10px
2	x-small	较小	12px
3	small	小号	14px
4	medium	默认值,如 16px	16px
5	large	大号	19px
6	x-large	较大	24px
7	xx-large	最大	32px
8	larger	相对父级增大一级	*1.2
9	smaller	相对父级减少一级	/1.2
10	length	绝对值,如px,em	无
11	percentage	百分比/em/rem	无

• 除length外,其它都是相对大小,无固定值
• 每一级之间换算系数由浏览器自行调整,如 1.2
• em: 相对父元素, rem: 相对于根元素

/* 相对父元素字体放大1.2倍 */
font-size: 1.2em;
/* 相对于根元素:root, html */
font-size: 1.2rem;

---

6. font-style

设置字体样式, 常用值

序号	属性值	描述
1	normal	默认值
2	italic	斜体
3	oblique	适用部分字体的斜体

---

7. font-variant

设置字体变形,如连写,大写,小数,零是否有贯穿线等

序号	属性值	描述
1	normal	默认值
2	small-caps	小号大写字母

小号大写字母: 即不是大写也不是小写,而是大小稍有区别的大写字母

---

8. font-stretch

• 设置字体显示时拉伸或收缩
• 当字体族中有宽体或窄体时, 该属性才有效

序号	属性值	描述
1	normal	默认值
2	expanded	拉伸
3	condensed	收缩

该属性的值非常多, 更多查阅手册

---

9. font

• 将字体设置相关属性,使用该属性进行简化
• 语法:font:font-style,font-weight,font-variant,font-size, font-family

9.1 可选值,顺序任意

序号	属性值	描述
1	font-style	字体样式
2	font-weight	字体字重
3	font-variant	字体变形

9.2 必选值,顺序固定

序号	属性值	描述
1	font-size	字体大小
2	font-family	字体族

font-size: 还能同时设置行高,如 font-size: 24px/1.2: 设置行高为 24px*1.2=28.8px