这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天

字体font-family

<h1>卡尔斯巴德洞窟（Carlsbad Caverns）</h1>
<p>卡尔斯巴德洞窟（Carlsbad Caverns）是美国的
一座国家公园，位于新墨西哥州东南部。游客可以通过天
然入口徒步进入，也可以通过电梯直接到达230米的洞穴
深处。</p>

<style>
  h1 {
    font-family: Optima, Georgia, serif;
  }
  body {
    font-family: Helvetica, sans-serif;
  }
</style>

显示效果：

在这几个css里面，主要展示了几种常用的字体，也就是后面我们所说的字体家族，指一般浏览器使用的，默认的字体，

通用字体族

一般我们在浏览器中见到的字体属于无衬线体或等宽字体

使用建议

字体列表最后写上通用字体族。

这样能确保无论到什么情况下，假使我们所使用的字体在用户那边无法显示的话，即用户的浏览器并无相应的字体，那么我们写上通用字体族的话，也可以是页面正常的显示字，从而不受影响。

英文字体放在中文字体前面

因为假使把中文字体放在前面的话，由于中文字体，微软中文字体里面包含英文字体，所以会把英文字体当成汉字处理，导致无法正常显示英文。然而，我们把英文放在前面的话，前面使用英文去识别，到该显示中文的时候，英文无法识别，就会自然的切换为中文，这样就不会相互受影响了。

使用web字体

<h1>Web fonts are awesome!</h1>

<style>
  @font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  }

  h1 {
    font-family: Megrim, Cursive;
  }
</style>

显示效果：

我们直接把文件代码里所使用的字体写成src，url的形式，这样用户在加载页面的时候，浏览器会顺着网址去请求对应的字体形式，这样就能保证页面显示的字体是我们想要的效果了！