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

通常来说，字重越大，字体越粗、越黑。不同的数字字重值对应的字体的不同粗细，如果一个字体拥有全部的100_{900字形，那么100}900就都能和对应字体对应上。其中，通常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）最后，如果找不到匹配的字体，而且所有替代字体都试过了，用户代理将指定字体族中的默认字体，力争正确显示元素

CSS权威指南（五）字体相关推荐

《CSS权威指南》--附录
<CSS权威指南>--附录虽然一条规则中的声明可以按照任何顺序写出来,但我背后还是有一个优先级顺序: 1. display 及相关声明: 2. position 及相关的声明: 3. m ...
css权威指南第四版_16个非常有用的CSS伪选择器，你千万不要错过了！
英文 | https://blog.bitsrc.io/css-pseudo-selectors-you-never-knew-existed-b5c0ddaa8116译文 | https://jue ...
CSS权威指南第五版-第17章变形
17.1 坐标系在变形中使用两种类型的坐标系,熟悉这两种坐标系是一个好主意. 第一种是笛卡尔坐标系,或者通常称为x/y/z坐标系.这种坐标系使用两个数字(二维)或三个数字(三维)表示一个点在空间中的 ...
CSS权威指南第五版-第18章过渡
CSS过渡允许我们对CSS属性进行动画处理,使其随着时间的推移从一个原始值变成一个新的值.这些变化使一个元素从一个状态过渡到另一个状态,以响应某种变化.这通常涉及到用户的交互,但也可能是由于类.ID或 ...
css权威指南pdf
下载地址:网盘下载内容简介 · · · · · · 这本书提供了对CSSl和CSS定位的完整的描述,同时也给出了CSS2的概述.书中对CSS的每个属性都做了详细的探究,同时讨论了各个属性之间如何协 ...
CSS权威指南之css声明，伪类，文本处理--(简要笔记一)
1.css层叠的含义后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒. 3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换. ...
读书笔记《CSS权威指南》
阅读本书主要目的: 自从学会CSS以来,虽然熟练掌握了其使用方法和技巧,但对其底层的原理和实现并不清晰,阅读本书想进一步系统化的学习和深入研究其本质,对这门前端基础语言从熟练使用到真正理解. 第1章 ...
小白的《CSS权威指南》笔记（下部分）
颜色和背景颜色 color设置前景色. 前景色 color:<color> | inherit 通过给元素添加class值,然后再通过class选择器来改变它的颜色. 替换属性 HTML ...
CSS权威指南重点要点摘录
1. css和文档 web的衰落一片混乱 css作救星丰富的样式易于使用在多个页面上使用样式层叠缩减文件大小为将来做准备元素替换和非替换元素元素显示角色结合CSS和XHTML l ...

CSS权威指南（五）字体

文章目录