字體是網頁設計的重要一環。以往加入特色字體非常困難,但隨著技術進步,嵌入指定字體已變得舉手之勞。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、書寫體)等篩選。

2. 新增至網頁專案
找到所需字體後,可點選字體進一步預覽,或直接按下圖示加入網站項目。

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

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

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

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

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

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

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

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

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

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

Adobe Fonts
前往:官方網站