@ 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