font-family字体显示规则及如何使用外部字体（@font-face）

一、font-family字体设置及显示规则

font-family 属性：用字体名或者字体族名按照先后顺序进行字体设置

1. 字体设置形式

• 单字体形式

   font-family: "微软雅黑";
  

• 多字体形式

   font-family: "微软雅黑","宋体";
  

• 字体族形式
  首先要知道什么是字体族：
  字体族可以理解为是不同类别的字体形式，比如是否有衬线、是否等宽、特殊字体的呢。一般分为五类字体族：
  • serif：衬线体
  • sans-serif：无衬线体
  • monospace：等宽字体
  • cursive：手写字体
  • fantasy：艺术字体

   font-family: "sans-serif";
  

2. 显示规则

• 单字体形式
  如果电脑中有该字体则显示，没有则显示系统默认的字体。
• 多字体形式
  如果我们设置了多个字体，浏览器会在多个字体中寻找第一个在该电脑上已安装的字体进行显示（当然已安装包括：电脑默认的字体和我们自己下载到电脑上安装了的字体）
• 字体族形式
  字体族并不代表某个字体，如果我们设置了字体族，那么系统会在电脑中找出一种该字体族下的字体来显示

3. 不同系统中的默认字体

我们所熟知的windows中默认字体有微软雅黑等，Mac、IOS平台默认字体有：PingFang SC等，正因为不同系统下的默认字体不一样，一般我们会在css中进行多个字体的设置以及会附带字体族的设置。
比如：

font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei",  sans-serif;

这种设置 使得文字在不同平台上的都有较好的显示效果。

二、如何设置外部字体？

有些时候我们设计图中设置了其他字体，或者网站需要特殊的字体，这时就需要我们引入外部字体。
当然这里也分两种情况：

• 涉及到侵权的字体
  这种情况需要我们购买相应版权，再进行使用。
• 不涉及侵权的字体
  比如思源黑体为免费可使用的字体。

而如何引入这些外部字体呢？

1. 下载字体文件（一般找设计同学拿到相对应的字体文件就可以哦）
   拿到的文件可能是otf、woff等格式， 将字体文件放入项目中
2. css中进行引用

   @font-face {
       font-family: 'SYFont';
       src: url('SOURCEHANSANSCN-REGULAR.woff') format('woff');/* 所有现代浏览器 */
       font-weight: normal;
       font-style: normal;
       font-display: swap;
   }
   

   注意网站中一般一定用到了加粗的情况，所以别忘了加粗的字体引用。

   @font-face {
       font-family: 'MyFont';
       src: url('SOURCEHANSANSCN-REGULAR.woff') format('woff'); /* 所有现代浏览器 */
       font-weight: normal;
       font-style: normal;
       font-display: swap;
   }
   @font-face {
       font-family: 'MyFont';
       src: url('SOURCEHANSANSCN-BOLD.woff') format('woff'); /* 所有现代浏览器 */
       font-weight: 700;
       font-style: normal;
       font-display: swap;
   }
   

   几种字体文件类型设置：

   @font-face {
     font-family: 'MyFont';
     src: url('SOURCEHANSANSCN-REGULAR.eot'); /* IE9 Compat Modes */
     src: url('SOURCEHANSANSCN-REGULAR.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('SOURCEHANSANSCN-REGULAR.woff') format('woff'), /* 所有现代浏览器 */
          url('SOURCEHANSANSCN-REGULAR.ttf')  format('truetype'), /* Safari, Android, iOS */
          url('SOURCEHANSANSCN-REGULAR.svg#svgFontName') format('svg'); /* Legacy iOS */
   }
   

   引用：

   body {
    font-family: 'SYFont';
    font: 16px SYFont; /* 或者综合形式中设置*/
   }