Question

我知道这是一个简短的问题，但您如何在文本中使用多个自定义Google字体，即Baloo和Roboto？在这个例子中，文本应该是Roboto，标题应该是Baloo。谢谢你的时间。

Answer 1

点击＆＃34;选择此字体＆＃34;对于您要使用的每种字体，Google会为您提供一个包含多种字体的link标记。您还可以为每种字体添加多个link标记。

＆＃13;

h1 {
  font-family: Baloo;
}
h2 {
  font-family: Roboto;
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Baloo|Roboto" rel="stylesheet">
<h1>Baloo</h1>
<h2>Roboto</h2>

＆＃13;

Answer 2

转到https://fonts.google.com/
搜索说Roboto - https://fonts.google.com/specimen/Roboto
点击“选择此字体”，您将获得一个链接，可以像这样添加到您的HTML：

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

注意：您还可以通过管道系列来获得包含多种字体的一行。

在<head>标记
使用CSS选择font-family的字体。

见下面的例子：

h1{
  font-family: "Baloo"
}

p{
  font-family: "Roboto"
}

<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/css?family=Baloo|Roboto" rel="stylesheet">
</head>

<body>
    <h1>Baloo</h1>
    <p>Roboto</p>
</body>

Answer 3

google字体现在正在使用css2，并且上述答案已过时。

使用css2的解决方案是： https://fonts.googleapis.com/css2?family=Baloo&family=Roboto

来源：google fonts doc for css2

Answer 4

根据需要使用，并将其作为样式表导入。 https://fonts.google.com/

对于你的例子：

＆＃13;

h1 { font-family: 'Baloo', cursive; }
p { font-family: 'Roboto', sans-serif; }

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<h1>heading</h1>
<p>paragraph</p>

＆＃13;

如何在网页中使用多个Google字体？

4 个答案: