如何使用 Google 和插件使用 Google 字體！
已發表: 2021-07-30
如果您是設計師，您更有可能將排版視為任何網站設計的基礎。 不僅選擇字體，還為網頁的可讀性提供優勢。
什麼是排版？
排版就是選擇行長、磅值、行距、字體和調整字母組之間的間距。
為什麼谷歌字體是一個明確的選擇？
有時互聯網上的標準字體會讓任何人看到它們，但隨著時間的推移，網頁設計師和開發人員被迫限制他們的實時文本字體選擇，並設計與最多用戶兼容的字體互聯網。 他們提出了 CSS3。 Typekit 啟動了它。
Typekit 開發了一些誘人的字體，幫助設計師為他們的網頁選擇有吸引力和用戶友好的字體，但使用 Typekit 的唯一問題是他們向用戶收取的費用。
價格是 49 美元，如果設計師想要開發兩個網站，他必須支付 99 美元才能在網頁上使用字體。 感謝 Google 提供了出色的字體設計並免費提供。
很明顯，您無法免費獲得您可以用金錢獲得的東西，但請相信，Google 網絡字體仍然比 Typekit 提供的字體好。 當然，當您不喜歡在字體上花費太多時，Google Web 字體是最好的，因為您知道構建整個網站的成本太高。
谷歌字體及其定制：
截至今天，Google 庫中有超過 647 種不同的字體系列。 當您為網站內容選擇字體時，必須以與您將如何實現該字體類似的方式查看它。 有些字體看起來很適合正文內容，但作為標題卻很糟糕。
幸運的是，Google Web Fonts 允許您自定義預覽以匹配您的用例。 您可以輸入自定義預覽文本，並根據需要更改預覽大小。 預覽您將在段落視圖中使用的任何標題或正文副本很重要，如果您有很多正文副本，請不要使用過多的自定義字體。
匯集正確的字體！
由於我們知道要篩選的字體系列超過 600 種，因此很難通過簡單地逐個滾動來過濾和選擇正確的字體系列。 因此，請使用以下步驟來確定您的網站所需的確切內容：
- 快速瀏覽一下 Google 最近更新的字體。 您很有可能會獲得流行且無錯誤的字體，而無需查看其餘字體。 此外，請參閱大多數設計人員和開發人員使用的字體。 這樣做可以讓您了解可以在多種樣式和寬度中使用的通用字體。
- 如果您知道網站的字體，字體的特徵和样式可以改善您的結果，例如如果您想要手寫字體，請禁用所有其他類型的結果。
- Google 允許您通過添加字符的粗細、傾斜和寬度作為過濾選項來進一步優化您的字體搜索。 為您的網站獲得最佳字體不是很酷的功能嗎？
選擇字體
Google 有多種方法可以根據網站所有者的需要選擇並實施字體。 這裡沒有對錯。 最適合你的，你都會得到的。 它支持三個按鈕來幫助您選擇正確的字體：
- 快速使用：快速查看您喜歡的字體。
- 彈出：更多地了解您喜歡的字體，即它的功能和用途。
- Collection：如果你想使用兩種以上的字體，Collection 是你需要點擊的按鈕。 它將在單個頁面上添加您喜歡的所有字體。
如何使用谷歌字體？
一旦你選擇了你想在你的網頁上使用的字體，你可以點擊“使用”標籤來查看它們的實際效果。 現在，當您確定字體時，您所需要的只是在網頁上簡單地複制和粘貼一些代碼。 您將獲得三個選項可供選擇：
標準：
這是一個標準的樣式錶鍊接。 您需要將它放在 HTML 文件的開頭部分，從而節省了添加 @import 規則的步驟，因為您正在顯著添加已經包含它的樣式表。示例：
CSS：
如果您不想在標題中鏈接到自動生成的樣式表，請使用 CSS @import 規則。 使用以下代碼將字體集成到您的 CSS 中：
font-family: 'Henry Pigeous', serif;
font-family: 'Diplomatic'. cursive;
JavaScript
Google 和 Typekit 都在此處開發了此代碼，作為 WebFont 加載器的一部分，以便用戶更好地控製字體加載。
抓取一個 HTML 片段並將其放在 HTML 標頭附近，如下所示：
頁面標題
跳轉到 CSS 並按照以下步驟操作：
h1 {
font: 400 45px/0.5 'Diplomatic', Arial, sans-serif;
}
p {
font: 400 14px/1.5 'Henry Pegasus', Times, serif;
}
在插件的幫助下！
有一些插件可以提供無縫的 Google 字體集成。 使用插件有其局限性，例如插件不知道在 HTML 或 CSS 的幫助下不進一步自定義就知道查找特定文本。 但是，這裡有一些插件可以將 Google 字體包含到您的網站中。
1.字體插件
只需單擊幾下，即可將 Google 字體嵌入您的網站，這是一種簡單有效的方法。 您可以使用樣式表或使用 CSS 樣式； 兩者都可以使它們適應您的主題。 您可以從管理區域或您網站的樣式表中執行此操作。 字體插件是您網站所需的一切，快速有效。
2.簡單的谷歌字體
使用 Easy Google Fonts 插件，您無需觸摸任何編碼即可在您的網站上獲取字體。 從選擇優化到提供獨特的顏色以實時預覽，所有與字體相關的事情都可以使用 Easy Google Fonts 完成。
3. TK 谷歌字體
當您開發頁面或帖子時，TK Google Fonts 會將所有 291 種 Google Web 字體添加到您的可視化編輯器面板中。 只需安裝它並開始使用它。
安裝以上插件：
- 登錄 WordPress 管理員
- 點擊“插件”
- 點擊“添加新”
- 在右上角輸入插件名稱，然後單擊“立即安裝”
自定義插件
- 單擊“外觀”，然後單擊“自定義”。
- 點擊“訪問網站”，然後點擊“自定義”
- 您會注意到一個新添加的菜單為“排版”
實施學習！
我們希望，閱讀這篇文章是一個學習課程，現在，是時候在您的網站上使用這些知識了。 瀏覽各種字體、插件以改進您網站的排版。 請記住，如果您要自定義字體，這將比複製粘貼字體更有益。 讓我們知道您用於添加排版以在項目中吸引觀眾的字體和方法。
字體增強了網站的美學形式，是任何網站設計的基礎。 字體或排版都是關於選擇行長、磅值、行距、字體和調整組字母之間的間距。
作為設計師，最好通過添加字符的粗細、傾斜度和寬度作為過濾選項來進一步細化字體搜索。 並非所有字體在正文和/或標題內容中看起來都不錯。
有些字體作為標題看起來不太好，有些字體在正文內容上不易閱讀。 因此，建議您以與您將如何實現它類似的方式查看您選擇的字體，以便您可以測試其可讀性。
互聯網過去使用相同的舊無聊標準字體的日子已經一去不復返了。 技術先進，網頁設計師和開發人員被迫設計與互聯網上最多用戶兼容的字體。
他們提出了 CSS3。 Typekit 發起並開發了一些吸引人的字體供網頁設計師使用。 但是，它們的成本太高了。 值得慶幸的是，谷歌出手相救，免費提供出色、用戶友好的字體設計。
匯集正確的字體！
目前，谷歌庫中的字體數量為 647 種，難以篩选和選擇合適的字體。 但是，通過這 3 個步驟，您可以準確地獲得網站所需的內容：
- 在 google 上查看最近更新的字體，並獲得趨勢且無錯誤的字體。 此外，查找大多數設計師使用的字體，讓您了解可以在多種樣式和寬度中使用的字體的多功能性。
- 了解您網站的字體、字體的特徵和样式，以改善您的結果。
- 通過添加字符的粗細、傾斜和寬度作為過濾選項來優化您的字體搜索。
選擇字體
根據您的需要，Google 有多種方法可以幫助您選擇字體。 要選擇正確的字體，請考慮：
快速訪問——快速瀏覽你喜歡的字體
Pop Out- 了解更多關於字體的信息，即功能和用途
集合-如果您想使用兩種以上的字體，請單擊此按鈕。 它將在單個頁面上添加您喜歡的所有字體。
如何使用谷歌字體
選擇首選字體後，單擊“使用”選項卡以查看它們的實際效果。 然後，在您的網頁上複製並粘貼一些代碼。 您將獲得三個選項可供選擇：
標準- 這是一個標準樣式錶鍊接。 將它放在 HTML 文件的頭部。 它將為您節省添加 @import 規則的步驟，因為您正在顯著添加已經擁有它的樣式表。
CSS - 使用 CSS @import 規則，以防您不想鏈接到 header 中自動生成的樣式表。 使用以下代碼將字體集成到您的 CSS 中：
font-family: 'Henry Pigeous', serif;
字體家族：'外交'。 草書;
JavaScript -Google 和 Typekit 都在此處開發了此代碼，作為 Web 字體加載器的一部分，以使用戶可以更好地控製字體加載。
抓取一個 HTML 片段並將其放在 HTML 標頭附近，如下所示：
頁面標題
跳轉到 CSS 並按照以下步驟操作：
h1 {
字體：400 45px/0.5 '外交'，Arial，無襯線；
}
p {
字體：400 14px/1.5 'Henry Pegasus'，時代，襯線；
}
關於作者：
Catherrine Garcia 是 Hosting Facts 的一位經驗豐富的 Web 開發人員，也是一位熱情的博主。 她喜歡通過關於 Web 開發和 WordPress 的文章分享她的知識。