字体与字体图标
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 |
艺术字体 |
各不相同 |
有 / 无 |
无统一规范,用于展示特殊内容 |
| 序号 |
属性 |
描述 |
示例 |
| 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.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
