网页引入谷歌字体_在网页中使用Google字体

网页引入谷歌字体

Google Fonts is a service provided for free by Google that allows access to thousands of fonts. All the available fonts are under Open Source licenses, meaning they’re free to use for both commercial and non-commercial projects.

Google字体是Google免费提供的一项服务，可访问数千种字体。所有可用字体均已获得开源许可，这意味着它们可免费用于商业和非商业项目。

入门 (Getting started)

This article will go over using Google Fonts on a webpage. Below is what a boilerplate web page looks like right now:

本文将介绍如何在网页上使用Google字体。下面是样板网页的外观：

And here’s the boilerplate HTML markup:

这是样板HTML标记：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>My web page</title>
</head>
<body><h1>Welcome to my website</h1>
</body>
</html>

Pretty boring, huh? Let’s spice it up a little with a better font.

太无聊了吧？让我们用更好的字体给它加一点香料。

选择字体 (Choosing your fonts)

It’s now time for us to choose our fonts. Head on over to fonts.google.com and select a font you like by pressing the little (+) (plus) button. I’m going to use Karla. Once you’ve picked out your font, expand the drawer on the bottom of the page.

现在是时候选择字体了。转到fonts.google.com，然后按小( + )(加号)按钮选择所需的字体。我要用Karla 。选择字体后，展开页面底部的抽屉。

There are two ways to import the font for use. For the first method, copy the code in the code box under the Standard label. Now head on over back to your markup and add a the copied code and a style tag to the head of the document like this.

有两种导入字体以供使用的方法。对于第一种方法，将代码复制到“ Standard标签下的代码框中。现在，回到您的标记上，然后将复制的代码和样式标签添加到文档的开头，如下所示。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>My web page</title><link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
</head>
<body><h1>Welcome to my website</h1>
</body>
</html>

You’ll notice from the URL example above that Google Fonts now supports the font-display property!