文章目录
- 1.字体族
- 2.@font-face
- 3.字重(font-weight)
- 4.字号(font-size)
- 5.字形(font-style)
- 6.字体拉伸(font-stretch)
- 7.字距(font-kerning)
- 8.字体变形(font-variant)
- 9.字体匹配机制
1.字体族
CSS定义了五种通用的字体族。
- 衬线字体:字形宽度各异,而且又衬线。因为字体不同字符的尺寸不同,因此宽度有差异。
- 无衬线字体:字体中的字形宽度各异,而且无衬线。
- 等宽字体:字形宽度一样。一般用于表示编程代码或者表格数据。这种字体各个字符在横向上所占的空间使用一样的。
- 草书字体:模仿人类笔迹或手写体。通常在笔划末端有较大的花饰,而且比衬线字体华丽。
- 奇幻字体:没有统一的特征。
理论上,任何一款字体都可以归为一类字体族。浏览器通常会将不能识别字体族的字体归为奇幻字体族。
(1)使用字体族
使用字体族需要使用font-family属性
2.@font-face
@font-face的作用主要是可以使用自定义的字体。
(1)必要的描述符
@font-family有两个必要的描述符,分别是font-family和src,前者用于指定该自定义字体的名称,后者指定该字体的资源路径。
ps.这里的src适用于同源策略
(2)其他的字体描述符
(3)限制字符范围
使用unicode-range可以指定自定义字体可以应用的字符范围。
3.字重(font-weight)
- 初始值:normal
- 可选值:norma、bold、bolder、lighter、100~900
通常来说,字重越大,字体越粗、越黑。不同的数字字重值对应的字体的不同粗细,如果一个字体拥有全部的100900字形,那么100900就都能和对应字体对应上。其中,通常400对应normal、700对应bold。如果500的字重未分配,那么和400一样。如果300未分配,将其对应于比400细的那个变体,如果没有,就和400一样。如果600未分配,将其对应于比500粗的那个变体,如果没有,和500保持一致。700~900同样也是这么分配的。
4.字号(font-size)
指定字体大小。
5.字形(font-style)
- normal 常规
- italic 斜体
- oblique 倾斜体
6.字体拉伸(font-stretch)
设置字体的瘦体和胖体。
7.字距(font-kerning)
设置字体的字距。
8.字体变形(font-variant)
设置字体连写、小号大写字母、小数的表示方式、数字之间的间距、零有没有管穿线等样式。
9.字体匹配机制
(1)用户代理创建或访问字体属性数据库
(2)用户代理把应用了字体属性的元素摘出来,构建显示元素所需的字体属性列表
(3)匹配字体时,先看font-stretch属性
(4)然后看font-style属性
(5)接下来匹配font-weight
(6)然后处理font-size
(7)如果第二步没有找到匹配的字体,用户代理在同一个字体族中找到替代字体,然后回到第二步
(8)假设找到一个基本匹配的字体,但是字体没有显示元素所需的全部信息,比如字体缺少版权符号,那么用户代理将回到第3步,搜索替代字体,再执行第二步
(9)最后,如果找不到匹配的字体,而且所有替代字体都试过了,用户代理将指定字体族中的默认字体,力争正确显示元素