Day14 font-family 字型发挥吧

刚开始学习的时候，我在font-family写的值都只会设定一个，完全不知道需要加上通用字型，也不知道不同的作业系统会有不同的预设字型设定，看过一些资料後，才知道原来字型设定要注意的地方也是不少。

font-family 设定规则

font-family 可以用来设定一种字体或多种不同的字体，每种字体间用半形逗号「,」隔开。
浏览器在载入字型样式时，会从左边到右来判断，如果浏览器不支援第一个字型，则会尝试下一个，如果都没有找到相对应的字体，就会采用电脑预设字型。

font-family 分成两种类型

font-family的值分为两种，一个是指定字型，另一种是通用字型。

指定字型 (font family name)

• 指定字型会搭配通用字型一起使用，避免碰到无法载入的情况发生。
  例如:
  font-family: Georgia, serif;

• 字型名称不用加上双引号，但如果名称中间有空格，就一定要加上双引号。
  例如:
  font-family: "Gill Sans Extrabold", sans-serif;

• 为了避免编码问题，中文字型名称会建议改用英文字型名称
  例如:
  会将
  font-family: 思源黑体, 微软正黑体, 苹方体, 黑体, sans-serif, serif;
  写成
  font-family: "Noto Sans CJK TC", "Microsoft JhengHei", PingFang, STHeiti, sans-serif, serif;

通用字型 (generic family name)

通用字型是当在作业系统中完全找不到对应字体时，会显示的预设字体，所以通常都会放在font-family属性设定值的最後面

常用的通用字型主要有以下两个:

• font-family: serif;(无衬线体)
  衬线 serif 指的是字形笔画末端的装饰部分，无衬线体多是黑体字这种，笔划粗细大都较为一致。
• font-family: sans-serif;(衬线体)

参考资料:Font-family - 金鱼都能懂的CSS必学属性
CSS font-family 详细介绍
font-family要怎麽玩

设定预设字型

可以在body额外设定预设字型 同样是为了避免找不到能用的字型
顺序：英文字型 > Linux系统 > Mac系统 > Windows > 通用字体
（如果中文字型在前，那麽网页可能会读取不到英文的字体，所以使用机率较少的字体会放较前面，使用机率高的字体放越後面）

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
               /* mac, IOS 系统字体               Windows 英文系统字   微软正黑体    Android 系统字  IOS 系统字  通用字体 */             
}

相关资料:铁人赛：系统字体介绍

免费的外部载入字体

• Google Fonts
  

以上为个人学习笔记整理
若有错误，欢迎指正