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

最新推荐文章于 2024-09-11 09:40:40 发布

cukw6666

最新推荐文章于 2024-09-11 09:40:40 发布

阅读量1.7k

点赞数 2

文章标签： css css3 google java html

原文链接：https://www.digitalocean.com/community/tutorials/css-using-google-fonts

版权

网页引入谷歌字体

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! 🎉

您将从上面的URL示例中注意到，Google字体现在支持 font-display属性！ 🎉

If you already have a separate CSS stylesheet, copy the code under the @import label and add it to the top of your stylesheet like so.

如果您已经有一个单独CSS样式表，请复制@import标签下的代码，然后将其添加到样式表的顶部。

@import url('https://fonts.googleapis.com/css?family=Karla&display=swap');

.element {
  /* ... */
}

使用字体 (Using the Fonts)

We’ve imported our fonts, now it’s time to use them. Let’s set the body of our HTML markup to use Karla, like so:

我们已经导入了字体，现在是时候使用它们了。让我们将HTML标记的body设置为使用Karla，如下所示：

<!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">

  <style>
      body {
        font-family: 'Karla', sans-serif;
      }
  </style>
</head>
<body>
  <h1>Welcome to my website</h1>
</body>
</html>

Now, if we take a look at our web page, it looks like this:

现在，如果我们看一下我们的网页，它看起来像这样：

That looks a lot better!

看起来好多了！

✨ That was easy, wasn’t it? Now you can make your web pages look prettier with the free font hosting offered by Google Fonts! Thanks for reading!

✨那很容易，不是吗？现在，您可以使用Google字体提供的免费字体托管让网页看起来更漂亮！谢谢阅读！