主頁> 精選教學 >Adobe Fonts 為網站加入思源黑體、思源宋體等自訂字體
Adobe Fonts

Adobe Fonts 為網站加入思源黑體、思源宋體等自訂字體

留言
分享文章: Facebook X LINE LinkedIn

字體是網頁設計的重要一環。以往加入特色字體非常困難,但隨著技術進步,嵌入指定字體已變得舉手之勞。Adobe Fonts 不但提供思源黑體、思源宋體等大量中英文字體選擇,更方便網頁開發者管理不同網站的字體,是設計優質網頁不可多得的服務。

Adobe Fonts 是甚麼?

Adobe Fonts 是 Adobe Creative Cloud 的一部分,用戶可在 Adobe Fonts 上尋找字體並應用在 Creative Cloud 的應用程式以及個人網站之中。

Adobe Fonts 的前身是 Typekit,在 2018 年才與 Creative Cloud 整合並成為 Fonts。當時 Tykekit 免費計劃只支援一個網站使用自訂字體,但現在已不設網站數目上限。

如要使用 Adobe Fonts,用戶必須要有 Adobe 帳戶。用戶毋須訂閱 Creative Cloud 亦可使用網頁自訂字型,但字型的選擇會較少;只需訂閱 Adobe 的應用程式(毋須 Creative Cloud 完整應用程式),便可提供完整的字庫。

Adobe Fonts

前往:官方網站

與 Google Fonts 的不同之處

提到為網站嵌入自訂字體,大家應會聽過 Google Fonts,但它與 Adobe Fonts 有何分別呢?Google Fonts 容許用戶快速複製 CSS 至網站以使用特定字體,但 Adobe Fonts 進一步容許用戶為每一個網站設立項目,以集中的方式為每一個網站管理自訂字型。

Adobe Fonts 使用教學

1. 搜尋字體

Adobe Fonts 提供了方便的方式搜尋字體。用戶可按照字體的風格(如書法、有趣)、類型(serif、sans-serif、書寫體)等篩選。

在 Adobe Fonts 按照標記、分類、屬性等選項篩選字型。

2. 新增至網頁專案

找到所需字體後,可點選字體進一步預覽,或直接按下圖示加入網站項目。

Adobe Fonts 顯示各種字體

大部分字體都有多種樣式。用戶可輸入文字預覽效果,並選擇需要的樣式加入網站專案之中。

Adobe Fonts 會顯示字體的不同樣式,並供用戶輸入樣本文字以供預覽。

然後便可以新增網站專案。

在 Adobe Fonts 內把字體新增至網頁專案之中。

3. 添加 HTML 及 CSS 碼

將字體添加至專案後,便會顯示相關的 HTML 和 CSS 碼以供加入。

Adobe Fonts 會顯示網絡專案所需要的 HTML 和 CSS 碼,以讓網站採用自訂字體。

4. 瀏覽、修改網路專案字體

用戶可加入更多字體至專案之中,只需按照以上步驟便可。如果想瀏覽或修改專案使用的字體,只需選擇「管理字體」、「網絡專案」。

在 Adobe Fonts 開啟網路專案

然後便會列出所有專案,以及專案正在使用的字體。

Adobe Fonts 會顯示所有網路專案,以及各專案正在使用的字體

進入專案,便會詳細列出正在使用的字體系列,用戶可複製 CSS 代碼,或把不需要的字體刪除。

用戶可在 Adobe Fonts 專案中新增字體樣式或刪除不使用的字體。

實用功能:以圖搜尋字體

除了統一管理網站字體之外,Adobe Fonts 還提供一項非常實用的功能,就是讓用戶上載圖片,以後搜尋最相近的字體。在主頁點選「依影像搜尋」後,用戶便可上載圖片。

在 Adobe Fonts 使用以圖搜尋字體功能

然後,用戶需要選擇辨析字體的文字,再前往下一步。

上載圖像後,用戶需選擇要識別的字體的文字

Adobe Fonts 會自動識別圖片內的文字,用戶確保字元正確後,可往下一步。

使用以圖搜尋字體功能時,Adobe Fonts 會自動識別圖片內的文字,用戶要確保字元正確

最後,Adobe Fonts 便會顯示相似字體。

Adobe Fonts 透過視覺搜尋,顯示與圖像相似的字體

Adobe Fonts

前往:官方網站

尋找線上學習平台:
Udemyhahow六角學院Coursera

馬上領取Hahow好學校 9 折優惠

訪客留言