文字样式 ( 特殊用途 )

这篇教学会介绍 CSS 里的一些针对“特殊字型”或部分浏览器特有的样式，例如 font-stretch、font-kerning、font-smooth、font-variant、font-synthesis、font-feature-settings 等，这些样式或许支援度不高，但如果字型支援或未来浏览器支援，将可以实现文字宽度微调、平滑化、变体、合成等效果。

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

特殊文字样式

下方列出特殊的文字样式属性，这些样式都具有继承特性 ( 部分浏览器并不支援且部分样式需要搭配 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;
}

小结

这篇教学所介绍的文字样式，大多是比较冷门，或针对特定字型而设定的样式，整体来说用途不大，且浏览器支援度也不高，如果有时间的话再尝试看看即可。

意见反馈