# 字体设置
# 字体分类
字体分类不是指某一个字体，而是一个类别，一系列字体的集合，最常见的就是衬线字体和无衬线字体。
Serif(衬线字体)
在字的笔划开始及结束的地方有额外的装饰，而且笔画的粗细会有所不同，有顿笔。衬线字体的风格都比较突出，常见的衬线字体有Times New Roman、宋体。
Sans Serif(无衬线字体)
字体没有这些额外的装饰，笔划粗细大致差不多，字形端庄，横平竖直，无顿笔。常见的无衬线字体有Tahoma、Verdana、Arial、Helvetica、苹方、微软雅黑等等。
monospace(等宽字体)
等宽字体是指字符宽度相同的字体，通常用于编辑器以及技术文章的代码块中，等宽主要针对西文字体，而对于中文每个汉子都是等宽的，courier是最常见的等宽字体。
# 常见字体
Helvetica
苹果系统支持的一种西文无衬线字体，是苹果生态中最常用的一套西文字体。Helvetica Neue是Helvetica字体改善版本，增加了更多不同粗细与宽度的字形。
Arial
是为了与Helvetica竞争而设计的无衬线西文字体，表现形式和Helvetica类似，在不同系统的浏览器都支持，兼容性非常好。
Tahoma
一种无衬线字体，间距较小，在不同系统的浏览器都支持，兼容性良好，可以解决Helvetica和Arial所为人诟病的缺点，比如大写的 I 和小写的 L 难以分辨。
San Francisco
苹果于2017年推出一种无衬线字体，也是目前苹果系统的默认西文字体，相比于Helvetica字体，San Francisco的字体风格更加简洁，减少了一些修饰的细节，支持符号的整体居中，比如时间显示，之前的 Helvetica 的冒号是不居中的。
最低兼容版本：ios9、macOS10.11
PingFang SC(苹方-简)
苹果专为中国用户打造的一个中文无衬线字体，在2017年和San Francisco一起推出，SC代表简体，同时还有台湾繁体和香港繁体，整体造型简洁美观，是苹果系统默认的中文字体。只要苹果才有。
最低兼容版本：ios9、macOS10.11
Hiragino Sans GB(冬青黑体)、Heiti SC(黑体)
苹果系统中较早的中文无衬线字体，为了兼容旧版macOS系统，我们一般用它们作为苹方字体的fallback。
Segoe UI
windows系统下的一种无衬线西文字体，也是windows系统的默认西文字体。
Microsoft YaHei(微软雅黑)
Windows系统默认的中文字体，也是一套无衬线字体。macOS上的浏览器大都预装微软雅黑，但不包括safari浏览器。
ios和android系统不支持微软雅黑，所以设置移动端字体时可以忽略微软雅黑。
宋体
一种中文衬线字体，windows 和 macOS都有支持，字体偏瘦，风格明显。
宋体也是windows XP及更早系统的默认中文字体。
Roboto Android系统的默认西文字体，也是一种无衬线字体
Noto Sans (思源黑体) Android系统的默认中文无衬线字体，由google推出的一款开源字体。
# 书写规则
在介绍字体规则前，有几点是需要注意的：
1、不同平台，预置的字体并不相同。比如Helvetica和苹方也只有苹果系统内置，微软雅黑只有windows系统内置(由于很多人安装Office的缘故，Mac电脑中也会出现微软雅黑字体)，android 和 iOS 系统内置的字体各不相同。
2、字体是有版权的，但是如果没有引用外部字体文件（如 Web font 或者内嵌到 App 中），而仅仅是在 CSS 中指定字体名称，不需要购买授权，因为其只是一段声明，表示期望浏览器优先使用某种字体渲染文本。
3、中文网站涉及两种文字类型：西文字体和中文字体，西文字体包括英文数字等，不包括中文，但是中文字体一般包括英文和数字，我们一般先设置西文字体，后设置中文。
4、如果字体包含空格或者是中文，需要添加引号。
5、大部分字体全名中会包含字体粗细、斜体（italic）、长体（condensed）等具体属性，但一般不建议直接使用，字体的风格应该在 CSS 中通过 font-weight、font-style、font-stretch等属性指定，由浏览器决定实际渲染的字体。
6、font-family属于可继承属性，全局的font-family一般设置在body元素上。
我们可以总结字体定义的大概规则如下：
1、西文在前，中文在后
中文字体大多都包含西文，但西文的部分又不好看，而西文不包含中文，通常先定义西文，后定义中文以达到更优的显示效果。
2、优先使用system-ui
system-ui使用当前系统的默认字体，让web页面和操作系统的风格统一，体验更好。
3、兼顾不同的操作系统
选择字体的时候要考虑不同的操作系统，还需要考虑旧版本操作系统的用户。
即便是同一个字体在不同的操作下也会有细微的差别，我们要尽量做到相同系统使用同一种字体，保证同一个系统下的字体一致性。对于不同系统尽量保证字体风格接近，比如都使用无衬线字体。
为了保证苹果系统中使用更优雅的中文字体，优先声明苹方字体, 对于不支持苹方的低版本macOS，使用Hiragino Sans GB(冬青黑体)字体做兜底。
如果需要兼容Linux系统，还需要添加WenQuanYi Micro Hei(文泉驿微米黑)字体。
如果需要兼容不同平台的表情符号，一般在sans-serif后添加"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"等字体。
4、以serif或sans-serif字体族结尾
为了保证在各种不同环境或条件下显示正常，我们一般将sans-serif放在字体的后面，非衬线字体在显示器中的显示效果更好。
5、简洁实用
字体设置并不是越多越好，在能满足设计需求的情况下尽量简洁。相同系统下中西文字体各有一个fallback即可，不需要太多。
# 网页添加字体
在给body,html全局设置字体时，一般会设置多个值，比如 body{font-family:Tahoma,Verdana,STHeiTi,simsun,sans-serif;}，这个几个值会按顺序使用，如果浏览器没安装或没有该字体或者无法下载该字体就会执行下一个，以此类推。一般都要以 sans-serif或者serif来结尾，在其后面的字体无效，sans-serif和serif是一个字体族，如果前面设置的字体不起效果，使用这来保障最基本的字体适应效果。
每个系统都会带有无衬线字体，所以sans-serif一般放在最后作为兜底，sans-serif之后的字体都不会生效，除了Emoji字体。
如果不设置字体，页面会使用浏览器默认字体，在Windows上一般为微软雅黑，在macOS一般为苹方。如果浏览器自定义了其他字体则使用这种字体，但如果在body中设置了中文字体，浏览器自定义的字体就会失效。也就是说英文字体下的中文字体仅受浏览器的默认字体影响。
移动端浏览器通常不支持指定默认字体，一般会使用系统默认的自带字体。
网页设计中的默认字体：字体大小(12px)、行高(18px)
font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
推荐写法：
body,html {
font-family: Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
mac推荐写法：
body,html {
font-family: -apple-system, BlinkMacSystemFont, Tahoma, Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
# 引入外部字体
多个值是让不同的系统和浏览器都能使用自己设置的字体，以至于不让字体特别难看。如果想让所有的都使用一种字体，我们就可以下载字体包，通过 @font-face引入该字体就可以全站使用了。
@font-face {
font-family: 'source';
src: url('../font/source.eot');
src:
url('../font/source.eot?#font-spider') format('embedded-opentype'),
url('../font/source.woff2') format('woff2'),
url('../font/source.woff') format('woff'),
url('../font/source.ttf') format('truetype'),
url('../font/source.svg') format('svg');
font-weight: normal;
font-style: normal;
}
如果字体包太大，我们可以通过 font-spider 字蛛来压缩字体，减小字体库大小。
1、安装：
npm install font-spider -g
2、创建一个字蛛压缩文件：
├── index.html
├── font
把待压缩的字体包放在font文件夹里，执行压缩命令后，会自动在font文件夹里生成压缩后的字体，原字体保存到了.font-spider里了
3、声明 WebFont
在index.html中通过@font-face引入字体包，然后在HTML使用需要压缩的字体，然后压缩就可以了。
在src内填写对应字体格式，及format 对应的格式，没有的格式去掉， @font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>字体压缩</title>
<style>
@font-face {
font-family: 'PingFang-Light';
src: url('./font/PingFang-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/*使用选择器指定字体*/
.box {
font-family: 'PingFang-Light';
}
</style>
</head>
<body>
<p class="box">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p class="box">1234567890~!@#$%^&*()_+?><,.\|-=/`</p>
<p class="box">艺术家的最强武器了解更多购买</p>
</body>
</html>
4、压缩
执行命令：
font-spider index.html
每次压缩都需要把要替换格式的字体复制到box中才可以，压缩后的字体只包含box中的其他的不会生效。