学习笔记 CSS权威指南 第5章 字体
5.1 字体族
font face 和 font family
- 日常中所说的
字体,通常包含多个变体,比如宋体有粗体,斜体等...字体是所有变体的统称 - 而这些变体叫
字型font face - 组合起来叫
字体族font family
5种通用字体族
5.1.1 使用通用字体族<generic-family>
- 衬线字体: 字形宽度各异,衬线是字符笔画末尾的装饰,比如有的字体
i结束的时候会勾起来 - 无衬线字体: 字形宽度各异,无衬线
- 等宽字体: 字符横向上所占的空间是一样的
- 一般用于显示编程代码或表格数据
- 草书字体: 模仿手写体
- 奇幻字体: 无法划入以上4种的,
那还不如直接叫其他字体,这个其实是翻译的锅,看了下MDN上面翻译的是具有特殊艺术效果的字体,感觉这个更加贴切,英文本来是fantasy,直译过来就是幻想,所以啊,英语这个东西,不能只背单词
5.1.2 指定字体族<family-name>
- 提供指定字体 + 通用字体
- 字体名尽量都加上引号,避免一些考虑不到的情况报错
h1 {
font-family: '微软雅黑','sans-serif'; // => 正常使用雅黑,没有雅黑的话系统自动选一个无衬线字体
}
5.2 使用@font-face
用户代理见到@font-face中的font-family后,会下载对应链接中的字体文件,然后用它渲染文本.字体图标就是这样实现的
- 惰性加载: 仅当需要使用指定字型时才下载
- 但是浏览器并不支持,而是一遇到
@font-face就下载
- 但是浏览器并不支持,而是一遇到
@font-face {
font-family: 'iconfont';
src: url("iconfont.otf");
}
5.2.1 必须的描述符
定义字体的全部参数都写在@font-face{}结构中,这些参数称为描述符,大部分和字体属性差不多.
font-family:在使用字体属性时,要定义字体的名字
src:引用字体的路径
- 可以写多个,类似于css属性写多个,当前面的不支持,就用后面的
- 受同源策略的限制
- 可以使用
local()加载当前设备上的字体 - 可以使用
format指定字体解析格式
// 定义
@font-face {
font-family: ranwawa;
src: local("微软雅黑.otf"),
url("微软雅黑.otf") format("opentype")
}
// 使用
html {
font-family: "ranwawa", "sans-serif";
}
万全之策
像下面这样写,才可以兼容所有不同的浏览器
@font-face {
font-family: "r";
src: url("ranwawa.eot"); // => ie9
src: url("ranwawa.eot?#iefix") format("embedded-opentype"), // => ie6到ie8
url("ranwawa.woff") format("woff"), // => 现代浏览器,即大部分桌面浏览器
url("ranwawa.ttf") format("truetype"), // => 大多数手机
url("ranwawa.svg#ranwawa") fromat("svg"), // => 老IOS手机
}
上班后就一直在使用阿里图标库,几乎每个项目都要和上面这几行代码打交道,直到现在才明白他的原理.......
5.2.2 其他字体描述符
font-style: 区分常规,斜体和倾斜体
font-weight: 区分字重
font-stretch: 区分字体宽度
font-variant: 区分字体变体
font-feature-settings: 访问OpenType底层特性
unicode-range: 指定字体中可用的字符范围
- 这个在大型项目中可以用来尽量延迟或者减少字体请求
- 默认是全部字符,如果指定中文范围,那么网页上只有英文时,是不会下载字体的
5.2.3 组合描述符
这个就是把上面提到的描述符,每个属性都写下来,写N个
@font-face,可以更加精确的控制字体展示效果.目测也只有越大型网站才会有这种变态需求吧,所以暂时不深究了
5.3 字重font-weight
字重越大,字体越黑,越粗.实际上,加粗的字体,会使用一个较粗的字型.
5.3.1 字重的工作方式
字重有100至900共9个关键字,对应字体设计中的9级字重.如果一个字体族中有全部九级字重,那么分别对应100到900.100最细,900最粗.
当然,一个字体基本不可能提供九级字重,所以正常的分配方式如下
- 如果600未分配,就和500一样
- 如果500未分配,就和400一样
- 如果300未分配,就和400一样
- 如果200未分配,就和300一样
原理就400以下的如果没有就取最近的最粗的,400以上的如果没有,就取最近的最细的
5.3.2 增大字重
在设置bold bolder时,首先计算从父元素继承的字重,再在此基础上增加字重
p { font-weight: normal; } // => normal对应400
p em { font-weight: bolder; } // => 在400上找下一个粗的...这里没看太懂书上说的是700,但实际如果有500的话,不应该是500么
有时候会出现,字重不一样,但是显示效果一样,这是因为字体族中没有不同的字重的字型.
5.3.3 减小字重
这个和增加字重是一样的
5.3.4 font-weight描述符
没啥好说的,就是直接把字重加到字体声明文件里面了
5.4 字号font-size
font-size属性和渲染结果之间的关系,由字体设计者决定.设计字符时要确保所有字符都比em方框小.
font-size的作用是为字体的em方框指定尺寸,所以显示出来的字符不可能完全是指定的大小.
5.4.1 绝对大小
就是一些关键字,没有用过,但可以用来做
sass变量命名的参考
xx-small 10px
x-small 12px
small 14px
medium 16px
large 19px
x-large 24px
xx-large 32px
5.4.2 相对大小
这里书上讲的和5.3.1差球不多呀
5.4.3 百分数和em
百分数和em相对于父元素的字号计算.
1em === 100%
5.4.4 字号的继承
不仅绝对值会继承,百分数也会继承
p 12px => 12px
p em 120% => 14.4px
p em span 1.35em => 19.33px
显示时舍入: 当字号出现小数点时,虽然用户代理显示有小数点,但是在渲染时可能会被舍入
关键字和等宽文本: 就是在等宽文本使用关键字时,可能会出现浏览器兼容问题.即字体显示出来比相像中的要小.
5.4.5 使用长度单位
由于像素设定字号,会在高ppi设备上字体显示的很小,所以不推荐使用像素值设定字号!!!!
看样子我们使用vw来设置字号是明智的选择
5.4.6 自动调整字号
锤子,只有firefox支持.不记笔记了.虽然看上去有点儿高大上
5.5 字形font-style
normal: 常规
italic: 斜体,是一种单独的字型
oblique: 倾斜体,是竖直体的倾斜版本
5.6 字体拉伸font-strech
字体的瘦体和胖体.不过大多数字体都没提供这种变体...所以也没啥卵用
5.7 字距调整font-kerning
字体中定义的,字符之间相对位置的数据.不同的字符组合字距不一样.
- 这个我们一般不用关于,浏览器都是根据字体数据来的
- 设置为
none的时候,就忽略字距信息 - 如果有
letter-spacing,会放在font-kerning之后计算
5.8 字体变形font-varian
浏览器兼容问题严重,且实操中很少用到,不记笔记了
5.9 字体特性font-featrue-settings
相当于是字体的配置信息,用于从底层控制字体的哪些特性可以使用
- 不能用在.woff文件上
- 具体有哪些配置就不深究了,有用得着的时候再回来看看
5.10 字体合成
浏览器支持不好.不记
5.11 font属性
就是简写,感觉有点多,没必要去用简写....
5.12 字体的匹配机制
了解一下即可,太多了不做笔记
