字體是網頁設計的重要一環。以往加入特色字體非常困難,但隨著技術進步,嵌入指定字體已變得舉手之勞。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 按照標記、分類、屬性等選項篩選字型。](https://i0.wp.com/backend-wp.ysnweb.net/wp-content/uploads/2024/01/adobe-fonts-1.png?resize=160%2C628&ssl=1)
2. 新增至網頁專案
找到所需字體後,可點選字體進一步預覽,或直接按下圖示加入網站項目。
![Adobe Fonts 顯示各種字體](https://i0.wp.com/backend-wp.ysnweb.net/wp-content/uploads/2024/01/adobe-fonts-2.png?resize=786%2C628&ssl=1)
大部分字體都有多種樣式。用戶可輸入文字預覽效果,並選擇需要的樣式加入網站專案之中。
![Adobe Fonts 會顯示字體的不同樣式,並供用戶輸入樣本文字以供預覽。](https://i0.wp.com/backend-wp.ysnweb.net/wp-content/uploads/2024/01/adobe-fonts-3.png?resize=1160%2C628&ssl=1)
然後便可以新增網站專案。
![在 Adobe Fonts 內把字體新增至網頁專案之中。](https://i0.wp.com/backend-wp.ysnweb.net/wp-content/uploads/2024/01/adobe-fonts-4.png?resize=580%2C517&ssl=1)
3. 添加 HTML 及 CSS 碼
將字體添加至專案後,便會顯示相關的 HTML 和 CSS 碼以供加入。
![Adobe Fonts 會顯示網絡專案所需要的 HTML 和 CSS 碼,以讓網站採用自訂字體。](https://i0.wp.com/backend-wp.ysnweb.net/wp-content/uploads/2024/01/adobe-fonts-5.png?resize=580%2C614&ssl=1)
4. 瀏覽、修改網路專案字體
用戶可加入更多字體至專案之中,只需按照以上步驟便可。如果想瀏覽或修改專案使用的字體,只需選擇「管理字體」、「網絡專案」。
![在 Adobe Fonts 開啟網路專案](https://i0.wp.com/backend-wp.ysnweb.net/wp-content/uploads/2024/01/adobe-fonts-6.png?resize=684%2C607&ssl=1)
然後便會列出所有專案,以及專案正在使用的字體。
![Adobe Fonts 會顯示所有網路專案,以及各專案正在使用的字體](https://i0.wp.com/backend-wp.ysnweb.net/wp-content/uploads/2024/01/adobe-fonts-7.png?resize=1060%2C628&ssl=1)
進入專案,便會詳細列出正在使用的字體系列,用戶可複製 CSS 代碼,或把不需要的字體刪除。
![用戶可在 Adobe Fonts 專案中新增字體樣式或刪除不使用的字體。](https://i0.wp.com/backend-wp.ysnweb.net/wp-content/uploads/2024/01/adobe-fonts-8.png?resize=690%2C628&ssl=1)
實用功能:以圖搜尋字體
除了統一管理網站字體之外,Adobe Fonts 還提供一項非常實用的功能,就是讓用戶上載圖片,以後搜尋最相近的字體。在主頁點選「依影像搜尋」後,用戶便可上載圖片。
![在 Adobe Fonts 使用以圖搜尋字體功能](https://i0.wp.com/backend-wp.ysnweb.net/wp-content/uploads/2024/01/adobe-fonts-9.png?resize=1200%2C266&ssl=1)
然後,用戶需要選擇辨析字體的文字,再前往下一步。
![上載圖像後,用戶需選擇要識別的字體的文字](https://i0.wp.com/backend-wp.ysnweb.net/wp-content/uploads/2024/01/adobe-fonts-10.png?resize=1200%2C388&ssl=1)
Adobe Fonts 會自動識別圖片內的文字,用戶確保字元正確後,可往下一步。
![使用以圖搜尋字體功能時,Adobe Fonts 會自動識別圖片內的文字,用戶要確保字元正確](https://i0.wp.com/backend-wp.ysnweb.net/wp-content/uploads/2024/01/adobe-fonts-11.png?resize=1200%2C429&ssl=1)
最後,Adobe Fonts 便會顯示相似字體。
![Adobe Fonts 透過視覺搜尋,顯示與圖像相似的字體](https://i0.wp.com/backend-wp.ysnweb.net/wp-content/uploads/2024/01/adobe-fonts-12.png?resize=1200%2C509&ssl=1)
Adobe Fonts
前往:官方網站