將字體新增至您的網站

上次更新時間 2024年12月10日

Adobe Fonts 中的網頁字體可用於您的網站、HTML 電子郵件行銷活動Google AMP 格式的文章,以及支援網頁字體的其他許多專案。

Adobe Fonts 網頁服務要求透過他們提供的內嵌程式碼來使用網頁字體。 使用條款不允許您自行託管網頁字體檔案或上傳到網站設計平台。

選擇要使用的字體

請先瀏覽字體庫。 您可以從語言和寫作系統下拉式選單中選擇所需的語言支援。

顯示字體 Web 介面,並將語言設定醒目顯示
選取語言和寫作系統選單,以查看字體的語言篩選器選單

新增標籤或篩選器,以縮小字體清單範圍。 使用我們的自然語言標籤來瀏覽適合您的專案風格的字體,或者您可以按分類 (例如襯線體或無襯線體)、屬性 (x 高度、寬度或粗細) 或語言進行篩選。 

Adobe Fonts 標籤瀏覽

建立網頁專案

當您找到喜歡的字體後,請按一下 </> 按鈕,將該系列新增至網頁專案。

Gilbert 會使用醒目顯示的新增系列選項顯示字體影像

您還可以按一下字體名稱以開啟該系列頁面,並查看所有可用的字體粗細和樣式。 接著,按一下頁面頂端的「</> 新增至網頁專案」,將該系列新增至網頁專案。

從字體 Web 新增字體系列並選擇樣式和字體粗細

在「新增字體至網頁專案」視窗中,您將可以為網頁專案命名並決定要包含哪些字體。

  1. 按一下選單,然後選擇「建立新專案」
  2. 為您的網頁專案命名
  3. 使用核取方塊,選擇要包含的字體粗細和樣式。
  4. 建立專案。

您稍後也可以透過「管理字體」頁面,變更專案設定。

選取字體以將其新增到字體 Web 的新專案中的快顯視窗影像

接著,系統會為您提供內嵌程式碼,以便將字體載入您的網站。 不同選項的說明可在內嵌程式碼說明頁面中找到,而預設的內嵌程式碼對大多數專案都適用。

請複製內嵌程式碼並將其新增至您網站中的 <head> 標記。

字體的內嵌程式碼會和字體樣式一起顯示在影像中

按一下「完成」關閉網頁專案視窗,然後繼續瀏覽。  若要將更多字體新增至您的專案,請按一下另一個字體系列的 </> 按鈕,然後從選單 (而不是「建立新專案」) 中選擇您的專案名稱。

自訂您的網頁專案

您的 Web 專案以及您新增至專案中的所有字體都會列在「管理字體」下方。

請按一下「編輯專案」按鈕以變更包含的字體粗細和樣式、從專案中將網頁字體系列完全移除,或是指定字體顯示設定。 您也可以在網頁專案編輯器中變更字元集,其指定專案的語言支援。  

東亞字體必須與動態子集一起提供,而其他字體則具有基於語言的子集選項:預設、全部字元或自訂的語言子集。 語言支援和子集說明頁面提供了不同選項的更多資訊。

您可以透過選取「OpenType 特性」方塊來包含任何 OpenType 特性。 選取此方塊後,也會顯示該特定網頁字體系列可用的特性清單,例如連字、替代字元或小寫字母。

字體顯示可讓您指定如何在網頁瀏覽器中載入網頁字體並套用到您的網站。 有關這些選項的詳細資訊,請參閱我們的字體顯示設定說明頁面。

當您按照所要的方式設定專案後,請按一下「儲存變更」以儲存專案。 幾分鐘後,這些更新便可在您的網站上使用。

在 CSS 中套用字體

「網頁專案」頁面會列出專案中每種字體的 CSS 字體系列名稱、粗細數值和字體樣式。 請使用 CSS 中的這些字體系列名稱,將字體套用至文字。

wp-page