文字和字體排版

透過對字型的深入了解、測試和搭配，設計者能夠創造出一個既美觀又易於使用的網站。 在追求視覺美學的同時，別忘了以可讀性和用戶體驗為首要考量。 希望本教學能對你的 CSS 字型選擇之旅有所幫助，讓你在未來的設計中更加得心應手。

CSS 字型模組定義了與字型相關的屬性以及字體資源的載入方式。 它允許你定義字型的樣式，例如其字族、大小和粗細，以及當多個字形可用於單一字元時要使用的字形變體。

定義字型是網頁排版中十分重要卻也常被忽略的功能，這篇教學會介紹如何透過 CSS 的 font-family 使用通用字型，包含 serif ( 襯線字型 )、sans-serif ( 無襯線字型 )、monospace ( 等寬字型 )、cursive ( 手寫字型 ) 和 fantasy ( 奇幻字型 )。

<p style="font:caption"> 瀏覽器用於帶標籤控制元件的字型。 </p> <p style="font:icon"> 瀏覽器用於圖示標籤的字型。 </p> <p style="font:menu"> 瀏覽器用於下拉選單的字型。 </p> <p style="font:message-box"> 瀏覽器用於對話方塊的字型。 &

在本單元中，我們將從 @font-face 規則開始，這項規則可讓您將自訂字型匯入網頁。 確保您擁有所需的確切字體，不受使用者安裝的字型影響。 接著，我們會介紹重要的 CSS 字型屬性，包括 font-family 、 font-style 、 font-weight 和 font-size。

font-variant 可以將小寫字母顯示為縮小的大寫字母。 font-variant: small-caps; font 是一個縮寫屬性，可以一次設定多個字體相關屬性。 font: italic bold 16px/1.5 Arial, sans-serif;

CSS字體模組具有更多的屬性來指定特殊的樣式 （對於提供幾種變體的字體），特別是 font-variant 屬性有更多的值。