使用哈希自定義字體上傳器插件上傳自定義字體

已發表: 2023-09-11

您是否厭倦了在網站上使用相同的舊字體並希望使其看起來有所不同？如果您不是編碼專家，請不要擔心！我們有一個簡單的指南，將向您展示一種將您喜歡的字體添加到 WordPress 主題的簡單方法。本文檔將引導您完成上傳自定義字體的過程，一次一個步驟，讓您可以輕鬆地為您的網站賦予獨特的風格。

插件安裝

要開始自定義和上傳字體，您需要安裝一個名為Hash Custom Font Uploader 的插件。

*注意：此插件僅與 HashThemes 主題兼容*

哈希自定義字體上傳器安裝

要安裝哈希字體上傳器，請按照說明操作：

轉到插件 > 添加新插件 > 上傳插件。
單擊“上傳插件”並從您的 PC 中選擇 .zip 文件。
上傳 .zip 文件後，單擊立即安裝。
然後激活插件。
您可以看到該插件顯示為哈希自定義字體上傳器。

安裝插件後，您就可以使用自定義字體來啟動字體上傳過程。

讓我們一步步引導您完成整個過程。

字體選擇

由 HashThemes 提供支持的主題提供了多種 Google 字體供您選擇。有超過 800 種 Google 字體。

但是，如果您正在尋找獨特的東西，您可以隨時探索眾多字體網站，這些網站提供由多個字體設計師精心設計的更多種類的選擇，並且可以在不同的網站上免費或付費使用。

Font Squirrel 就是此類網站的一個典型例子。該平台不僅讓您可以自由地免費下載字體，還簡化了將文件轉換為字體上傳所需格式的過程。

此外，值得一提的是，有許多高質量的字體可供購買，只需很少的費用，並且可以立即使用。

在本教程中，我們將演示如何使用 Font Squirrel 簡化字體上傳過程。

我們需要在 Hash Custom Font Uploader 中使用 2 種字體文件格式（WOFF 和 WOFF2）。 如果您想了解有關字體變體以及文件為何轉換為 WOFF 和 WOFF2 格式的更多信息，請繼續閱讀。如果您想立即開始上傳自定義字體教程，請單擊此處。

了解不同的文件格式

在開始本教程之前，讓我們先熟悉一下字體可以採用的一些典型文件格式。

TrueType 字體 (.ttf)：. ttf 字體格式是一種廣泛用於桌面和 Web 排版的字體格式。此文件類型與 Windows 和 macOS 系統兼容。

OpenType 字體 (.otf)： Open Type 格式是 True Type 格式的擴展。此格式允許附加印刷功能，並且與 Windows 和 macOS 兼容。

Web 開放字體格式 (.woff)：此類格式專為 Web 使用而設計。它提供良好的壓縮和瀏覽器兼容性。

Web 開放字體格式 2 (.woff2)：此文件格式是 Web 開放字體格式的改進版本，為 Web 字體提供卓越的壓縮和性能。

PostScript Type 1 字體 (.pfb)： PostScript 類型的字體格式是舊版本的字體格式，主要用於 PostScript 打印行業。

SVG 字體 (.svg)：基於 XML SVG 字體通常用於網頁圖標和特殊設計。

位圖字體 (.fon)：表示為像素網格的字體，適用於低分辨率顯示。

這些是一些用於各種目的的字體格式。熟悉這些格式的原因是某些文件需要轉換以獲得額外的優勢。

最常用的文件格式是用於桌面和網頁排版的 TTF（True Type Font）和 OTF（Open Type Font）。

然而，截至 2021 年，最常用的 Web 使用字體格式是 Web 開放字體格式 (WOFF) 和 WOFF2（Web 開放字體格式 2）。

*注意：重要的是要知道字體的受歡迎程度可能會隨著時間的推移而發展，新技術可能會取代舊技術。*

為什麼需要將文件更改為.woff和.woff2格式？

雖然 TTF 和 OTF 文件可以直接上傳到網絡上，但將它們轉換為 .woff 和 .woff2 文件格式有幾個優點：

1、壓縮：

將 TTF 和 OTF 文件轉換為 WOFF 和 WOFF2 格式的主要原因是它們可以壓縮大小。當文件大小較小時，網頁加載時間會更快。這對於改善用戶體驗和 SEO 排名也至關重要。

2. 網頁優化：

WOFF 和 WOFF2 格式非常適合網絡並被廣泛接受，包括字體子集功能，允許用戶僅包含特定網頁所需的字符和字形，從而進一步減小文件大小。

3. 瀏覽器兼容性：

現代網絡瀏覽器廣泛支持 WOFF 和 WOFF2 格式，確保跨不同平台和設備的可靠字體渲染。 TTF 和 OTF 文件可能具有不同級別的兼容性和支持。

4. 許可：

許多字體許可證傾向於允許在網絡上使用 WOFF 和 WOFF2 格式，但它們可能對 TTF 和 OTF 文件有更多限制。通過將字體轉換為 WOFF/WOFF2 格式，您可以確保符合字體許可要求。

5、性能：

WOFF 和 WOFF2 字體格式通常經過優化。因此，它們在 Web 環境中表現更好，從而實現更流暢、更快的文本渲染。

這些是將TTF和OTF文件轉換為WOFF/WOFF2文件的基本必需品。接下來，我們將指導您完成字體上傳程序。

在“FONT SQUIRRE L”網站中選擇字體

現在，讓我們開始字體選擇過程並進一步探索。

在搜索欄中輸入“Sinkin Sans”，您將看到字體預覽及其不同變體。
接下來，下載 Sinkin Sans 字體的 OTF 文件。

本教程我們選擇了“Sinkin Sans”字體。您可以選擇並使用您喜歡的任何字體。此外，正如我們之前提到的，字體可以採用各種格式。 這裡的 Sinkin Sans 字體文件是 OTF 格式。

將 .zip 文件解壓到您指定的文件夾中。

網頁字體生成器

哈希自定義字體上傳器中使用的字體應為 WOFF 和 WOFF2 文件格式。因此，如果下載的字體是 WOFF 和 WOFF2 文件格式，那麼您可以跳過以下步驟，直接進入哈希自定義字體上傳器。但如果下載的字體不是 WOFF 和 WOFF2 格式，那麼您將需要使用字體生成器/轉換器來生成 WOFF 和 WOFF2 字體文件。

我們將使用 Font Squirrel 網站的 Webfont Generator 在線應用程序。
單擊 Webfont Generator（Webfont 生成器），如下面屏幕截圖中的 3 號所示。

要獲取您的工具包，請單擊“上傳字體”按鈕並上傳下載/提取的字體文件

在本例中，我們選擇“Sinkin Sans Regular”。
做出選擇後，只需單擊“打開”即可。
下載該套件。

解壓下載的 zip 文件。您將看到 Webfont 生成器已創建我們的哈希自定義字體上傳器插件所需的 .WOFF 和 .WOFF2 文件。

在哈希自定義字體上傳器插件上上傳自定義字體

Sinkin Sans 字體幾乎已準備好在您的網站上使用，距離您僅幾步之遙。請按照以下說明操作：

轉到哈希自定義字體上傳器
然後，按照說明上傳 .woff2 和 .woff 字體文件，並確保選擇字體粗細為Normal 400 。
在下一步中，為您的字體命名，以便在需要時更容易找到。在本例中，由於字體是 Sinkin Sans，因此我們對其進行了相應的命名。
單擊“保存設置”保存它。
保存後，您將看到 Sinkin Sans 字體如何顯示在底部。這也表明該字體正在運行，您現在可以使用它。

上傳自定義字體的變體

字體可以有不同的樣式和外觀。在這裡我們將學習如何為同一字體添加不同的字體樣式。

我們在上面選擇的字體（Sinkin Sans）有不同的變體，如細、淺、常規、中等、半粗體、粗體、黑色及其斜體。

這裡我們要選擇 Sinkin Sans 的Semi Bold風格。我們將使用另一個字體轉換器網站而不是“Font Squirrel”

注意：互聯網上還有許多其他轉換器。 在這裡，我們使用 CloudConvert。

首先，轉到 OTF 轉換器，它將我們的文件轉換為 .woff2 和 .woff 文件。
在這裡您可以看到它可以幫助您輕鬆轉換文件。選擇您要轉換為的文件。在這裡，我們要將文件 Sinkin Sans semibold .otf 轉換為 .woff 和 .woff2
選擇要轉換的文件後，從桌面上“選擇文件” 。
轉換文件，這將需要一些時間。
轉換完成後，將必要的文件保存到您的電腦上。

轉到哈希自定義字體上傳器
當您向同一字體添加粗細時，單擊“添加字體粗細” ，而不是單擊“添加新字體”。

然後，按照說明上傳 .woff2 和 .woff 字體文件，並確保選擇字體粗細為SemiBold 600 。
單擊“保存設置”按鈕進行保存。
您可以看到文本的顯示方式。該文本比上面的文本更粗。
同樣，您可以通過單擊“添加字體粗細”來添加更多字體變體，並通過單擊“添加新字體”來添加另一種字體。

使用您網站的字體

讓我們在網站上使用上傳的字體。

轉到外觀> 自定義。
在“版式設置”中，找到“正文”選項以進行進一步自定義。”
在“字體系列”選項中，搜索“Sinkin Sans”並選擇它。
選擇字體後，“字體粗細/樣式”將顯示我們之前添加的變體（普通 400 和半粗體）。
選擇適當的變體，然後在右側的定制器窗口中實時查看更改。
您可以根據自己的喜好調整字體大小、字母間距和行高。
如果您感到滿意，請單擊“發布”應用更改，您的網站將呈現新外觀。

這就是上傳自定義字體所需要做的全部工作。如果您有任何疑問，可以隨時聯繫我們。

購買

哈希自定義字體上傳器是一個高級擴展。單擊下面的按鈕即可購買。