1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. Adobe Fonts 免費網頁雲端字型大解放,無流量與域名限制
網頁開發 網頁設計

Adobe Fonts 免費網頁雲端字型大解放,無流量與域名限制

2020/07/29

梅問題-Adobe Fonts 免費網頁雲端字型大解放,無流量限制與域名綁定
  目前網頁字型就那101種,不是細明就是中黑,當要有不同的字型變化,就得使用雲端字型,而先前梅干曾分享過Adobe的Typekit雲端字型,而Typekit與Google雲端字型,最大不同的地方就在於Typekit,則是以「字集」的方式來載入,因此只會載入有用到的字體,所以載入速度更快、更省資源,但Typekit有流量的限制,同時還需綁定網域。

  而現在Typekit則更名為Adobe Fonts,同時還解除了流量與域名的限制,因此這對於網頁字型來說,可真是一大福音,同時也比Google Fonts載入更省資源、速度更快,因此要怎麼將網頁載入Adobe Fonts,現在就一塊來看看吧!


Adobe Fonts
網站名稱:Adobe Fonts
連結網址:https://fonts.adobe.com/

Step1
在進入Adobe Fonts後,點右上角的「Sign in」。
梅問題-Adobe Fonts 免費網頁雲端字型大解放,無流量限制與域名綁定
Step2
接著登入Adobe ID,或是使用社群的方式登入。
梅問題-Adobe Fonts 免費網頁雲端字型大解放,無流量限制與域名綁定
Step3
登入之後,再點要載入的雲端字型,當然就是思源黑體啦!
梅問題-Adobe Fonts 免費網頁雲端字型大解放,無流量限制與域名綁定
Step4
接著再點右上的「Add to Web Project」。
梅問題-Adobe Fonts 免費網頁雲端字型大解放,無流量限制與域名綁定
Step5
再設定專案名稱使用的字體,預設只有二組,若不夠可點下方的Show more再作設定。
梅問題-Adobe Fonts 免費網頁雲端字型大解放,無流量限制與域名綁定
Step6
都設定好後,再按右下的「Create」鈕。
梅問題-Adobe Fonts 免費網頁雲端字型大解放,無流量限制與域名綁定
Step7
分別將下方的碼,貼到<head>….</head>間。
梅問題-Adobe Fonts 免費網頁雲端字型大解放,無流量限制與域名綁定
Step8
這時就可依所需的標籤,設定不同的字體變化。
梅問題-Adobe Fonts 免費網頁雲端字型大解放,無流量限制與域名綁定
Step9
當設定好後,就可看到摘要是細黑、標題是粗黑、內文是中黑,有了Adobe Fonts讓網頁載入字型更加快速,梅干也要找時間來改一下啦!
梅問題-Adobe Fonts 免費網頁雲端字型大解放,無流量限制與域名綁定