@ font-face和@ font-family无法正常工作

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字体添加样式表链接。 例如，在HTML中使用<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">表示roboto字体，然后使用font-family: 'Roboto', sans-serif; 在你的CSS。

@ font-face和@ font-family无法正常工作

问题描述

2 个解决方案

解决方案1
4 已采纳 2018-02-22 15:53:02

解决方案2
1 2018-02-22 16:02:41

@ font-face和@ font-family无法正常工作

问题描述

2 个解决方案

解决方案1 4 已采纳 2018-02-22 15:53:02

解决方案2 1 2018-02-22 16:02:41

解决方案1
4 已采纳 2018-02-22 15:53:02

解决方案2
1 2018-02-22 16:02:41