跳到內容
Delivery API
在規劃採用某項功能之前,請先查看功能狀態。

指南設計

字型

一次上傳您已取得授權的網頁字型、將授權證明與字型一併保存,並以單一樣式表在您的網站上載入。

本頁翻譯自英文。若內容有任何差異,以英文版為準。 閱讀英文版

Atlas 會託管您網站的字型及其授權證明。只有在字型的授權允許網頁嵌入且尚未到期時,才會提供該字型。

開啟 Design → Fonts,然後按一下 Add a font。

  1. 輸入 Family name 與 Key。Key 會作為 CSS 變數的名稱,之後無法變更。

  2. 在 Files, weights and styles 下,上傳 WOFF2 或 WOFF 檔案(或從媒體庫選取)。為每個檔案設定 Weight(例如 400,或可變字型使用的範圍如 100-900)與 Style(Upright 或 Italic)。

  3. 新增 Fallback fonts,並選擇 While loading:Show the fallback, then swap,或 Use the font only if it is ready at once。

  4. 在 Licence 下,記錄 Licence 名稱、Licence ends 日期(若有)、Evidence,以及選填的 Licence document,並勾選 The licence allows embedding this font on websites (@font-face)。

  5. 按一下 Add font。

每張字型卡片都會顯示使用方式(例如 font-family: var(--atlas-font-brand)),以及其備援字型、授權與較早的版本。按一下 New version 可替換檔案或更新授權;較早的版本會保留。

Add to your website 卡片提供現成的程式碼片段:

  • 任何網站:Copy link tag 並加入您頁面的 head。它會載入一份樣式表,包含網站所有使用中的字型。
  • Next.js:Copy code 取得伺服器端算繪的版本。
<link
rel="stylesheet"
href="https://<delivery host>/v1/delivery/environments/{environmentId}/fonts.css"
/>

樣式表會快取 5 分鐘,字型檔案則永久快取,因為每個檔案版本都有自己的位址。字型檔案只會提供給您環境的網站位址。

字型的變更與內容一樣,隨下一個發行版本抵達 Production。Production 只提供其正式發行版本中的字型版本。

  • 僅支援 WOFF2 與 WOFF(不支援 TTF 或 OTF)。
  • 每個字型最多 32 個檔案與 8 個備援字型。
  • 字型屬於單一網站;目前尚無組織共用的字型目錄,也不支援子集化。