字体属性学习总结
演示地址：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 |
艺术字体 |
各不相同 |
有 / 无 |
无统一规范,用于展示特殊内容 |
| 序号 |
属性 |
描述 |
示例 |
| 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: 相对于根元素
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 的使用。
