使用手冊 取消

CSS 選擇器

  1. Adobe Fonts 使用手冊
  2. 簡介
    1. 系統和訂閱需求
    2. 瀏覽器和作業系統支援
    3. 在您的電腦上啟用字體
    4. 將字體新增至您的網站
    5. 在 CC 行動應用程式上啟用字體
  3. 字體授權
    1. 字體授權
    2. 管理您的帳戶
    3. 適用於企業的 Creative Cloud 客戶的授權
    4. 將字體授權新增至您的帳戶
    5. 從訂閱資料庫中刪除字體
    6. Adobe Fonts 不適用於在中國註冊的 Adobe ID
    7. 為什麼我的 Creative Cloud 訂閱未包含這些字體?
    8. Morisawa 字體移除 2021 年 9 月
  4. 取得及使用字體
    1. 在 Creative Cloud 應用程式中使用 Adobe Fonts
    2. 管理您的字體
    3. 解決桌面應用程式中缺少字體
    4. 在 InDesign 中使用字體
    5. 字體和印刷樣式
    6. 在 HTML5 Canvas 文件中使用網頁字體
    7. 在 InCopy 中使用字體
    8. 如何在 Adobe Muse 中使用字體
    9. 在 Muse 中使用網頁字體
    10. 封裝字體檔案
    11. 疑難排解指南:啟用字體
    12. 已啟用的字體未新增至字體選單中
    13. 「無法啟用一或多個字體」或「已安裝相同名稱的字體」
    14. 當字體發行公司更新我正在使用的字體時,會發生什麼狀況?
  5. 網頁設計和開發
    1. 將字體新增至您的網站
    2. 疑難排解指南:將字體新增至網站
    3. 在 HTML 電子郵件或電子報中使用網頁字體
    4. 搭配 Accelerated Mobile Pages (AMP) 使用網頁字體
    5. CSS 選擇器
    6. 使用字體顯示設定自訂網頁字體效能
    7. 內嵌程式碼
    8. 動態子集和網頁字體服務
    9. 字體事件
    10. 為什麼我的網頁字體來自 use.typekit.net?
    11. 網站無法連線至 use.typekit.net
    12. 透過 CodePen 使用網頁字體
    13. 瀏覽器和作業系統支援
    14. 網域
    15. 在本機開發時使用網頁字體
    16. 內容安全原則
    17. 列印網頁字體
  6. 語言支援和 OpenType 特性
    1. 語言支援和子集
    2. 使用 OpenType 特性
    3. CSS 中 OpenType 特性的語法
  7. 字體技術
    1. OpenType-SVG 彩色字體
    2. Ten Mincho:從版本 1.000 更新的重點

CSS 選擇器會告知瀏覽器要將您使用的網頁字體套用在何處,以及用於文字的字體之粗細和樣式。

在您的 CSS 中使用 font-family 名稱

「網頁專案」頁面會列出專案中每種字體的 CSS font-family 名稱、粗細數值和字體樣式。按一下「編輯專案」連結,即可檢視每個專案的 CSS 詳細資料。

當您在文件中包含內嵌程式碼之後,請在 CSS 中使用這些 font-family 名稱,將字體套用到文字。例如:

h1 {
  font-family: "brandon-grotesque", sans-serif;
}

指定備用字體

如果用戶的瀏覽器不支援網頁字體或者因為任何原因而無法載入網頁字體,則將改用 CSS 堆疊中的備用字體。

字體堆疊應該至少包含在所有平台中統一可用的一種備用字體 (例如 Georgia 或 Arial),後面緊接著通用 font-family 名稱 (例如 serif 或 sans-serif)。如果瀏覽器找不到第一種字體,它將嘗試第二種字體,依此類推。

使用多重粗細和樣式

您可以在 CSS 中使用字體粗細數值來指定「標準」和「粗體」以外的字體粗細。這些數值最常對應到以下粗細:

  • 100 = 淡
  • 200 = 特細
  • 300 = 細
  • 400 = 標準、書體
  • 500 = 適中
  • 600 = 次粗體
  • 700 = 粗體
  • 800 = 黑體
  • 900 = 特黑體

您可以在「網頁專案」頁面上找到您專案中所有字體的數值。

例如,使用此 CSS 可將 700 粗細的字體套用到 h1 元素:

h1 {
  font-weight: 700;
}

在 Internet Explorer 8 中使用變體專屬的名稱

Internet Explorer 8 對於每個系列最多會載入四種粗細,使用兩種緊密相關的粗細 (例如 600 和 700) 可能只會正確載入一種粗細。Adobe Fonts 會將變體專屬的 font-family 名稱提供給這些瀏覽器版本,以管理這兩個錯誤。

變體專屬的名稱應該視需要新增到 font-family 堆疊的開頭 (在主要系列名稱前面):

#post-title {
  font-family: "brandon-grotesque-n7","brandon-grotesque", sans-serif;
  font-style: normal;
  font-weight: 700;
}

這些名稱是由一般 font-family 名稱組成,後面依序緊接著破折號和字體變體說明 (或稱為 FVD)。例如,包含 700 粗細字體的 brandon-grotesque 的變體專屬名稱為 brandon-grotesque-n7

沒有這些問題的瀏覽器中將不會定義變體專屬名稱,所以這些瀏覽器將會使用堆疊中排在第二位的完整系列名稱。

大多數用戶不需要使用這些額外的 font-family 名稱。只有當您在 Internet Explorer 8 中發現無法正確顯示字體時,才需要新增這些名稱。

Adobe 標誌

登入您的帳戶