HTML+CSS编写静态网站-23 如何调用外部字体

视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015

这节课，我们来把外部字体包含进来。众所周知，最全最强大的第三方字体服务是Google字体，所以我们来到https://fonts.google.com/。实际上有许多字体服务，为什么选择Google呢，因为它是完全免费的，所有的字体都是合法的，拥有授权的许可，而且非常可靠。这里你可以继续浏览这里的选择，找到你最喜欢的字体。

那么，我喜欢Changa One字体，所以输入Changa One：

然后我们点击进去，然后SELECT THIS FONT。

然后有另一种字体，叫做Open Sans，我们搜索Open Sans，再次SELECT THIS FONT。

我们已经选择了两种字体，现在，我准备在我的网站中使用它们。所以我点击底部的这个按钮：

它会弹出一个对话框，所以，我切换到customize，选择正常的400和斜体，然后700加粗，和700加粗斜体以及800特粗。

现在，让我们切换回EMBED，然后，将这段HTML代码复制：

然后我们回到我们的代码。来到index.html，你可能已经注意到，我们复制的代码看起来非常类似于我们自己创建的链接元素。这是因为Google实际上为我们提供了一个CSS文件，其中包括我们刚刚选择的字体。现在，非常重要的是，我们需要把这个html代码粘贴到normalize.css下面：

 
 
              <link rel="stylesheet" href="css/normalize.css">

              <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800" rel="stylesheet">

<link rel="stylesheet" href="css/main.css">
所以让我们保存，然后进入main.css，然后来到logo的下面，输入h1，使用font family属性将字体应用到第一级标题。所以我们说font-family，我们需要使用单引号，并说Changa One，它是字体的名称，然后输入一个逗号，接着sans-serif，以分号结束。

 
 
#logo{

text-align:center;

margin:0;

}

 

h1 {

       font-family: 'Changa One', sans-serif;

}
这里，我们把字体的名字放在单引号里面，后面跟的是字体的格式，这里我们输入的是无衬线字体。

事实上，Google会在这里告诉你该怎么做：

现在，让我们保存我们的CSS文件，并刷新看看这是什么样子。正如你可以看到，现在，这种字体已经应用于我的第一级标题。

接下来，让我们设置一下h1字体的大小，并添加其余的样式。所以，并设置一个15像素上下和0像素左右的边距。然后设置字体大小为1.75em这里的em是一个新的单位：

 
 
h1 {

font-family: 'Changa One', sans-serif;

       margin: 15px 0;

       font-size:1.75em;

}
1em等效于当前浏览器默认字体大小，在大多数浏览器中默认设置为16像素。因此，em基本上是相对于16像素的字体大小。这意味着默认情况下，一个em是16像素的字体大小。在这种情况下，我们将第一级标题设置为1.75的大小。就是28个像素大小。

这里为什么不使用像素单位呢，因为像素时绝对的，em是相对的。更加灵活。

让我们保存并刷新页面看看是什么样子。

你看，是不是更漂亮了。

更多精彩内容尽在视频中！

本文固定链接：http://www.oxox.work/web/html-css/external-font/ | 虚幻大学

查看原文：http://www.oxox.work/web/html-css/external-font/