字体属性学习总结

字体属性学习总结

演示地址：https://php520.vip

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: 相对于根元素

font-size: 14px;
/* 相对父元素字体放大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

10 学习总结

本节课通过学习字体属性，让我了解了字体的具体属性，以及五种常用的通用字体族，本节课的核心是初步认识和了解图和使用阿里云矢量字体库的字体图标，通过Unicode的方式调用，可以兼容 IE6 的使用。