视频教程观看地址: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/