css中的font-family的样式，引入Google Fonts

一. 在网页中引用字体包(.ttf)，即嵌入特殊字体

在style中添加：

@font-face {
  font-family: mFont;
  src: url('../font/crapaud_petit.ttf');

引用最字体资源：

<h1 font-family="mFont">test</h1>

查看css中自带的font-family和font-style

二. 使用 Google Fonts 为网页添加美观字体(转载)

参考链接

1.安全字体

 font-family: Arial, Helvetica, sans-serif;

这个对字体（font-family）的定义就是一个安全字体。每种操作系统都有自己默认安装的字体，浏览器只能正常显示操作系统中安装了的字体。而不同的操作系统默认安装的字体不完全相同，有的甚至名称都不一样，在这种情况下，我们必须定义安全字体，使字体在所有的浏览器中都能够正常显示。

查阅常用的安全字体

在网页开发中，应该尽量使用安全字体，也就是高度通用的字体，这样，访问者才能流畅的阅读网页的所有内容。

2.@font-face 标签

@font-face 允许您在网页中使用电脑中没有安装的字体，完全摆脱安全字体的限制。只需将字体包安装在服务器上，当用户加载网页时，字体包会自动下载到用户机器上，保证字体能够正确渲染。

3. 如何使用 Google Fonts API

Google Fonts 提供了超过 600 种的高质量的字体，所有的浏览器都兼容，无需引入 JavaScript，简单易用，更重要的是，免费。（虽然，暂时不支持中文字体，因为中文字体库实在是太大了）

1⃣️ 登录Google Fonts （谷歌字体官方网站）

2⃣️ 选择字体，并添加，点击下方的"Collection"，就能看到详细的说明，包括字体链接和如何将字体添加到您的网页中。我选择的是Merienda字体。

3⃣️ 添加字体

Standard方式：

<link href="https://fonts.googleapis.com/css?family=Merienda" rel="stylesheet">

css:

font-family: 'Merienda', cursive;

import 方式

<style>
@import url('https://fonts.googleapis.com/css?family=Merienda');
</style>

css:

font-family: 'Merienda', cursive;

font-face方式点击右上角的下载按钮，将Merienda字体包下载到本地。

@font-face{
font-family: Merienda;
src:url(../assets/Merienda-Bold.ttf);
}
h4{
font-family: Merienda;
}

4. 优化字体包加载

如果您不是大范围的在网页中使用 Google 字体，只是在标题或 logo 里使用，那么可以在 url 里添加 text 参数，来限制加载的字体包的大小，最高能缩减 90%左右的大小，以此来节约下载流量。例如：http://fonts.googleapis.com/css?family= Condiment'&text=Hello

这样，您只会下载 h，e，l，o 这四个字母的字体，大大缩小了字体包的大小。

css中的font-family的样式，引入Google Fonts