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

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

来源

2017-03-02 scdmn jeh

转到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添加此链接（S）与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>

来源

2017-03-02 18:54:38 Turnipdabeets

您可以在通过管道分离的家庭电话一个多字体的家庭 - 'https://fonts.googleapis.com/ ？CSS家庭= Baloo | Roboto'。 – sbeliv01

谢谢@ sbeliv01 – Turnipdabeets

您单击“选择这种字体”为您要使用的每个字体，谷歌会给你一个link标签多字体。您还可以为每种字体包含多个link标签。

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

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

来源

2017-03-02 18:56:47

哇从来没有意识到你可以在一个请求中获得多个家庭成员。 –

@WebDevGuy这是一个有点新鲜的东西，我认为他们在一年前开始这样做。 –

使用，只要你想，并将其导入的样式表许多。 https://fonts.google.com/

对于示例：

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

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

来源

2017-03-02 18:57:44 James

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

回答

相关问题