笔记整理自
学堂在线的刘强老师的视频教学课程十分清晰、课件简明且附件可以自由下载超赞！适合初学者也适合有开发者查漏补缺
Web前端攻城狮(2021春)

font

font: style weight size/height family

p {
  font: italic 300 14px/1.6 Optima, serif;
}

设置文字字体

font-family 字体

设置

/* 用户的设备上可能没有设置的字体, 可以设置多个字体, 浏览器会从设备中选择一个设备有的字体展示 */
/* 最后指定的serif 是一个通用字体族(某一类的字体), 浏览器会从设备中选择一个同样属于该类的字体展示 */
font-family: Optima, Georgia, serif;
font-family: Helvetica, sans-serif;

5种通用字体族:
- Serif 衬线体: Georgia、宋体...
- Sans-Serig 无衬线体: Arial、Helevetica、黑体、微软雅黑...
- Cursive 手写体: cafisch script、楷体...
- Fantasy : Comic Sans MS、Papyrus ...
- Monospace 等宽字体: Consolas、Courier、中文字体...
font-family使用建议
- 字体列表最后写上通用字体族
  确保实际展示的字体是期待的效果
- 英文字体放在中文字体前面
  如果想要英文和中文使用不同的字体, 英文需要放在前面, 因为中文字体通常含有英文字符, 把中文字体放在前面, 英文字符也会以中文字体展示。而把英文字体放在前面，显示中文字符的时候，英文字体没有这个字符，就会按照中文的字体显示

使用Web Fonts
声明字体

/* 通过font-family指定字体的名字 */
/*通过src 指定字体文件的url和格式; 可以指定多种不同的字体格式,因为不同浏览器对字体格式的支持不一样。*/
@font-face {
  font-family: 'Megrim';
  src: url('/megrim'.woff2) fomat('woff2),
       url('/megrim.ttf') fomat('ttf');
}

使用字体

h1 {
  font-family: Megrim, Cursive;
  font-size: 20px;
}

使用中文字体
中文字体包一般比较大我们在页面上使用的时候不会去下载这么大的字体文件可以使用一些字体处理工具把页面的字体提取出来提取成一个比较小的字体文件再使用

font-size 字体大小

关键字
- small、medium、large
长度
- px、em（父级大小的n倍）
百分数
- 相对于父元素字体大小

font-style 字体样式

p {
  font-style: normal; /*default*/
}
div {
  font-style: italic; /*斜体*/
}

font-weight 字重

css中支持100 - 900
400 ~ normal
700 ~ bold

有的字体不是100 - 900都支持, 部分字体只支持normal和bold, 当设置的字重是字体不支持的时候, 会显示接近的能够支持的字重

line-height 行间距

/*设置没有单位的数字 行间距是 字体大小*line-height **/
p {
  font-size: 20px;
  line-height: 1.6; /*实际是32px*/
}

设置文字样式

text-align
- jutisfy: 调整空格间距两端对齐
letter-spacing
word-spacing
text-indent
text-decoration
- none
- underline
- line-through
- overline
white-space 控制html代码中的空格和换行是否合并以及内容超出是否换行
- normal 空格和换行符合并 (合并为一个空格)
- nowrap 空格和换行符合并且这一行的内容不换行
- pre 空格和换行符保留一行内容展示不下不会换行
- pre-wrap 空格和换行符保留一行内容展示不下自动换行
- pre-line 空格合并、换行符保留
text-shadow: color offset-x offset-y blur-radius;

文本