特殊文字樣式

除了常見的文字樣式，CSS 也有一些針對「特殊字型」或部分瀏覽器特有的樣式，例如 font-stretch、font-kerning、font-smooth、font-variant、font-synthesis、font-feature-settings 等，這些樣式或許支援度不高，但如果字型支援或未來瀏覽器支援，將可以實現例如文字寬度、平滑化、變體、合成等效果，這篇教學會介紹這些 CSS 的特殊文字樣式。

特殊文字樣式

下方列出特殊的文字樣式屬性 ( 都具有繼承特性，但這些屬性支援度都不太好，大多數還需要搭配 OpenType 字型 )：

font-stretch 文字寬度

font-stretch 樣式屬性可以設定「文字的寬度」，不同字型的寬度也不相同，下方列出相關屬性值：

幾乎所有的字型都支援 normal 屬性值，其他屬性則看字型是否支援 ( 參考「@font-face 定義字型」)，舉例來說，Google Fonts 的 Anek Malayalam 字型就支援多種寬度，下方的範例使用不同的 font-stretch 屬性數值改變文字寬度。

線上展示：https://codepen.io/oxxo/pen/XWweNor

<!-- HTML 程式碼 -->
<h3 class="a">Hello OXXO!! (font-stretch: normal;)</h3>
<h3 class="b">Hello OXXO!! (font-stretch: ultra-condensed;)</h3>
<h3 class="c">Hello OXXO!! (font-stretch: condensed;)</h3>

<!-- CSS 程式碼 -->
<style>
  @import url('https://fonts.googleapis.com/css2?family=Anek+Malayalam:wdth,[email protected],100..800&display=swap');
  h3 {
    margin: 5px;
    font-family: "Anek Malayalam", sans-serif;
  }
  .a {font-stretch: normal;}
  .b {font-stretch: ultra-condensed;}
  .c {font-stretch: ultra-expanded;}
</style>

font-kerning 文字間距微調

font-kerning 樣式屬性可以設定「文字間距微調」，下方列出相關屬性值：

下方的範例使用 Verdana 字型，並用不同的 font-kerning 屬性數值調整文字間距，對於不支援 font-kerning 的字型則沒有效果，就算有支援的字型，整體差異也不會太大 ( 下圖紅線可以看到差異 )。

線上展示：https://codepen.io/oxxo/pen/zYQENwB

<!-- HTML 程式碼 -->
<h3 class="a">WoW Let's "OXXO"!! (font-kerning:auto;)</h3>
<h3 class="b">WoW Let's "OXXO"!! (font-kerning:normal;)</h3>
<h3 class="c">WoW Let's "OXXO"!! (font-kerning:none;)</h3>

<!-- CSS 程式碼 -->
<style>
  h3 {
    margin: 5px;
    font-family: Verdana;
    font-weight: normal;
  }
  .a {font-kerning: auto;}
  .b {font-kerning: normal;}
  .c {font-kerning: none;}
</style>

font-smooth 文字平滑化

font-smooth 樣式屬性可以設定「文字平滑化」，讓瀏覽器渲染文字時，去除文字邊緣的鋸齒化，這個樣式在高解析度的 Retina 顯示器中效果特別好 ( 但文字粗細會變得比較細 )，不過因為目前這個樣式屬性還沒有列為標準樣式，在不同的瀏覽器可能需要使用不同的屬性名稱，例如在 Chrome 等 webkit 瀏覽器，需要使用 -webkit-font-smoothing，Firefox 則使用 -moz-osx-font-smoothing，下方列出相關屬性值：

下方的範例使用不同的 font-smooth 屬性數值讓文字平滑化。

線上展示：https://codepen.io/oxxo/pen/ZENXBgg

<!-- HTML 程式碼 -->
<h3 class="a">Hello OXXO!! (預設值)</h3>
<h3 class="b">Hello OXXO!! (平滑化)</h3>
<h3 class="c">Hello OXXO!! (沒有平滑化)</h3>

<!-- CSS 程式碼 -->
<style>
  h3 {
    margin: 5px;
    font-size: 30px;
  }
  .b {
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .c {
    font-smooth: never;
    -webkit-font-smoothing: none;
  }
</style>

font-variant 文字替代與變體

font-variant 樣式屬性可以設定「文字變體」，是集合下列幾種樣式屬性的簡寫，指定的數值時，等同指定樣式屬性指定了數值 ( 大多數僅支援部分 OpenType 字型，且各個瀏覽器支援度並不一致 )，下方列出相關屬性值：

• 共用屬性 ( 設定後五種屬性都會被設定相同數值 )

  屬性數值	關聯樣式	說明
  normal	所有樣式都關聯	預設值。
  none	font-variant-ligatures 為 none，其他是 normal	連字方式。

• font-variant-caps 字母大小寫 ( 在這個樣式中最常用，部分僅支援部分 OpenType 字型 )

  屬性數值	說明
  small-caps	小寫字母轉為大寫字母，尺寸對應小寫字母，原本大寫字母還是原本尺寸。
  all-small-caps	小寫字母轉為大寫字母，所有字母尺寸對應小寫字母。
  petite-caps	小寫字母轉為特小型大寫字母，原本大寫字母還是原本尺寸。
  all-petite-caps	小寫字母轉為特小型大寫字母。
  unicase	大寫字母轉成小寫尺寸。
  titling-caps	字首字母大寫。

• font-variant-numeric 特殊數字字型 ( 僅支援部分 OpenType 字型 )

  屬性數值	說明
  ordinal	針對序號列標記使用特殊字型，例如 1st、2nd、3rd、4th。
  slashed-zero	強制使用有斜槓的 0，區分英文字母 O 和數字 0。
  lining-nums	數字對齊基線。
  oldstyle-nums	3、4、9、7 數字位置稍微下降，其他數字對齊基線。
  proportional-nums	使用數字本身寬度。
  tabular-nums	數字等寬。
  diagonal-fractions	使用類似上下標數字顯示分子與分母。
  stacked-fractions	使用標準數字顯示分子與分母。

• font-variant-alternates 替代字型 ( 僅支援部分 OpenType 字型 )

  屬性數值	說明
  historical-forms	字型的歷史類型。
  stylistic()	通用字型樣式 A 替換 B。
  styleset()	外部字型樣式 A 替換 B。
  character-variant()	特定字元樣式 A 替換 B。
  swash()	傾斜字型。
  ornaments()	裝飾字型。

• font-variant-ligatures 連字字型 ( 僅支援部分 OpenType 字型 )

  屬性數值	說明
  common-ligatures、no-common-ligatures	常見連字、非通用連字
  discretionary-ligatures、no-discretionary-ligatures	任意連字、非任意連字
  historical-ligatures、no-historical-ligatures	歷史連字、非歷史連字
  contextual、no-contextual	上下文、非上下文

• font-variant-east-asian 中文日文替代字型 ( 僅支援部分 OpenType 字型 )

  屬性數值	說明
  ruby	拼音字元使用特殊字型。
  jis78、jis83、jis90、jis04	特殊字型標準。
  simplified	簡體中文字型。
  traditional	繁體中文字型。
  proportional-width	調整寬度不同的字型。
  full-width	字型寬度相同。

• font-variant-position 上標或下標替代字型 ( 僅支援部分 OpenType 字型 )

  屬性數值	說明
  sub	下標替代字型。
  super	上標替代字型。

下方的範例使用不同的 font-variant 屬性數值產生的文字效果 ( 支援度根據不同瀏覽器與字型而定 )。

線上展示：https://codepen.io/oxxo/pen/YzbrZGB

<!-- HTML 程式碼 -->
<h3 class="a">Hello Oxxo!! 3/10 (font-variant: small-caps;)</h3>
<h3 class="b">Hello Oxxo!! 3/10 (font-variant: lining-nums slashed-zero;)</h3>

<!-- CSS 程式碼 -->
<style>
  h3 {
    margin: 5px;
    font-weight: normal;
    font-family: "Verdana";
  }
  .a {
    font-variant: small-caps;
  }
  .b {
    font-variant: lining-nums slashed-zero;
  }
</style>

font-feature-settings 字型進階排版設定

font-feature-settings 樣式屬性主要針對 OpenType 字型進行「進階排版設定」，可以針對特定功能的字型，設定是否開啟字型內建的特性，通常會將其作為 @font-face 的描述子使用，下方列出相關屬性值：

下方的範例呈現相關用法 ( 因手邊沒有相關字型可以測試，僅使用程式碼說明 )。

@font-face {
  font-family: 字型名稱;
  src: url("字型檔案.otf");
  font-feature-settings: "swsh" 1;
}
.swshFont {
  font-family: 字型名稱;
}

font-synthesis 文字合成

font-synthesis 樣式屬性主要針對部分字型進行「文字合成」，可以針對缺少粗體或斜體的字型，設定遇到該樣式時要採用的字型，下方列出相關屬性值：

下方的範例呈現相關用法 ( 不過因為常用的字型大多都支援粗體斜體，因此僅使用程式碼說明 )。

.a {
  font-synthesis: style weight;
}
.b {
  font-synthesis: style small-caps position;
}

小結

這篇教學所介紹的文字樣式，大多是比較冷門，或針對特定字型而設定的樣式，整體來說用途不大，且瀏覽器支援度也不高，如果有時間的話再嘗試看看即可。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～