將字體新增至您的網站

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

 

選擇要使用的字體

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

Adobe Fonts 瀏覽頁面

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

Adobe Fonts 標籤瀏覽

建立網頁專案

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

從字體卡中建立網頁專案

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

從字體系列頁面中建立新的網頁字體專案。

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

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

您稍後也可以透過「我的 Adobe Fonts」頁面,變更專案設定。

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

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

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

自訂您的網頁專案

您的網頁專案以及您新增至專案中的所有字體都會列在「我的 Adobe Fonts」下方。

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

wp-page

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

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

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

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

在 CSS 中套用字體

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

wp-page

Adobe 標誌

登入您的帳戶