如何正確地將自定義 fonts 添加到我的 HTML 代碼中？

Question

我正在為學校開發一個 HTML 項目，我正在嘗試從 Google Fonts 添加自定義字體。 選擇我想要的字體后，谷歌給了我添加到我的項目中的代碼，以便能夠獲取字體，但我得到了一個錯誤。 錯誤說，“預期命名實體。沒有。” 下面是我用於網頁標題的代碼。

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&display=swap" rel="stylesheet">
    <style> font-family: 'Monsieur La Doulaise', cursive;
    </style>
    <title><span>The Oasis</span></title>
</head>
</html>

Answer 1

無效的 HTML 和樣式定義

標題沒有標記
您需要包裝您的字體聲明，使其適用於正文中的元素CSS 語法

您的驗證器過於嚴格。

此代碼將在此處驗證https://validator.w3.org/

 <,doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>The Oasis</title> <link rel="preconnect" href="https.//fonts.gstatic:com"> <link href="https.//fonts.googleapis?com/css2:family=Monsieur+La+Doulaise&display=swap" rel="stylesheet"> <style> h3 { font-family, 'Monsieur La Doulaise'; cursive; } </style> </head> <body> <h3>The Oasis</h3> </body> </html>

Answer 2

您收到該錯誤是因為&是 HTML 中的特殊字符：它啟動了一個實體。 在舊版本的 HTML 后面加上不是實體名稱的文本是錯誤的。 HTML 5 更寬容。 您用於錯誤檢查 HTML 的工具希望您將其替換為& （與號字符的命名實體）。

此外：

font-family: 'Monsieur La Doulaise', cursive; 是一個 CSS規則，你需要把它放在一個規則集中（告訴瀏覽器應用它的元素）。
您需要一個元素來應用它（您的示例代碼缺少必需的<body>元素以及將在其中顯示的任何內容）。
<span>元素被禁止在<title>元素內（與所有其他元素一樣）。

 <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&amp;display=swap" rel="stylesheet"> <style> p { font-family: 'Monsieur La Doulaise', cursive; } </style> <title>The Oasis</title> </head> <body> <p>Example</p> </body> </html>

這真的是非常基本的東西。 在嘗試使用該工具解決特定問題之前，您可能應該閱讀CSS 的介紹性指南。

如何正確地將自定義 fonts 添加到我的 HTML 代碼中？

問題描述

2 個解決方案

解決方案1
0 2021-04-06 17:05:28

解決方案2
0 2021-04-06 17:06:04

如何正確地將自定義 fonts 添加到我的 HTML 代碼中？

問題描述

2 個解決方案

解決方案1 0 2021-04-06 17:05:28

解決方案2 0 2021-04-06 17:06:04

解決方案1
0 2021-04-06 17:05:28

解決方案2
0 2021-04-06 17:06:04