Question

我正在尝试制作一些非常简单的东西：在html页面中添加3种字体。

我看了很多例子，但没有一个能解决我的问题。也许我缺乏写作方式。我其实不确定。

我的HTML：

<html>


<head>
    <title>Fuentes</title>
    <link type="text/css" rel="stylesheet" href="Fuentes.css">
</head>

<body>


<p class="a">This is a paragraph, shown in Roboto font.</p>

<p class="b">This is a paragraph, shown in  Bellefair font.</p>
<p class="c">This is a paragraph, shown in the Kavivanar font.</p>

</body>
</html>

我的.css：

@font-face {
    font-family: "Roboto";
    src: url(https://fonts.google.com/specimen/Roboto) format("truetype");

}
@font-face {
    font-family: "Bellefair";
    src: url(https://fonts.google.com/specimen/Bellefair) format("truetype");

}
@font-face {
   font-family: "Kavivanar";
    src: url(https://fonts.google.com/specimen/Kavivanar) format("truetype");

}




p.a {
    font-family: "Roboto", Roboto, sans-serif;
}

p.b {
    font-family: "Bellefair", Bellefair, sans-serif;
}
p.c{
    font-family: "Kavivanar", Kavivanar, sans-serif;
}

Answer 1

这绝对不是如何使用Google字体...您甚至没有链接到实际字体，而是链接到支持页面。

<style>
  @import url('https://fonts.googleapis.com/css?family=Roboto');
</style>

首先转到页面：https://fonts.google.com/specimen/Roboto

然后点击这个：

然后它会在角落里创建一个小盒子。单击该框，您将看到此信息。现在你有了实际的代码：

Answer 2

您应该在html中为要使用的每个Google字体添加样式表链接。例如<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 对于你的html中的roboto字体，然后在你的CSS中使用font-family: 'Roboto', sans-serif;。

@ font-face和@ font-family无效

2 个答案: