文字样式 ( 常用 )

一个吸引目光网页设计除了视觉设计与配色，“文字样式”也是非常重要的一部分，这篇教学会介绍 CSS 里常用的文字样式，例如 color、font-style、font-weight、text-decoration、letter-spacing、text-shadow 等属性，精准控制文字的颜色、斜体、粗细、阴影、底线、删除线、字母间距等样式效果。

教学影片

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

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

常用文字样式

下方列出可以文字样式的常用属性 ( 所有浏览器都支援，并都具有继承特性 )：

color 文字颜色

color 样式属性可以设定“文字的颜色”，支援 CSS 的所有颜色显示单位 ( 参考“CSS 颜色单位”)，但不支援渐层色，下方的范例使用不同的颜色单位将文字设定为绿色。

线上展示：https://codepen.io/oxxo/pen/rNgGMrv

<!-- HTML 程式碼 -->
<h3 class="a">Hello OXXO!! (color: green;)</h3>
<h3 class="b">Hello OXXO!! (color: #008800;)</h3>
<h3 class="c">Hello OXXO!! (color: rgb(0, 128, 0);)</h3>
<h3 class="d">Hello OXXO!! (color: hsl(120deg, 100%, 25.1%);)</h3>
<h3 class="e">Hello OXXO!! (color: lab(46.23% -51.7 49.9);)</h3>

<!-- CSS 程式碼 -->
<style>
  h3 {margin: 5px;}
  .a {color: green;}
  .b {color: #008800;}
  .c {color: rgb(0, 128, 0);}
  .d {color: hsl(120deg, 100%, 25.1%);}
  .e {color: lab(46.23% -51.7 49.9);}
</style>

font-style 文字样式

font-style 样式属性可以设定“文字的样式”，下方列出相关属性值：

几乎所有的字型都支援 normal 和 italic 属性值，但 oblique 属性数值只支援部分字型 ( 除非字型有额外设定 font-style:oblique;，参考“@font-face 定义字型”)，下方的范例使用不同的 font-style 属性数值改变文字样式。

线上展示：https://codepen.io/oxxo/pen/RwmLowr

<!-- HTML 程式碼 -->
<h3 class="a">Hello OXXO!! (font-style: normal;)</h3>
<h3 class="b">Hello OXXO!! (font-style: italic;)</h3>
<h3 class="c">Hello OXXO!! (font-style: oblique;)</h3>
<h3 class="d">Hello OXXO!! ( font-style: oblique 45deg;)</h3>

<!-- CSS 程式碼 -->
<style>
  h3 {margin: 5px;}
  .a {font-style: normal;}
  .b {font-style: italic;}
  .c {font-style: oblique;}
  .d {font-style: oblique 45deg;}
</style>

font-weight 文字粗细

font-weight 样式属性可以设定“文字的粗细”，下方列出相关属性值：

几乎所有的字型都支援 normal 和 bold 属性值，其他属性则看字型是否支援 ( 参考“@font-face 定义字型”)，举例来说，Google Fonts 的 Roboto Condensed 字型就支援 100～900 各种粗细字体，下方的范例使用不同的 font-weight 属性数值改变文字粗细。

• 注意，文字粗细以 400～500 数值为分隔，500 以上就如果找不到对应数值，就会不断往上寻找 ( 变粗 ) 直到找到为止，如果 400 以下就会往下寻找 ( 变细 )。
• 线上展示：https://codepen.io/oxxo/pen/RwmLora

<!-- HTML 程式碼 -->
<h3 class="a">Hello OXXO!! (font-weight: normal;)</h3>
<h3 class="b">Hello OXXO!! (font-weight: 100;)</h3>
<h3 class="c">Hello OXXO!! (font-weight: bold;)</h3>
<h3 class="d">Hello OXXO!! (font-weight: 700;)
  <h3 class="e">Hello OXXO!! (font-weight: bolder;)</h3>  <!-- 子元素 -->
</h3>

<!-- CSS 程式碼 -->
<style>
  @import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");
  h3 {
    margin: 5px;
    font-family: "Roboto Condensed", sans-serif;
  }
  .a {font-weight: normal;}
  .b {font-weight: 100;}
  .c {font-weight: bold;}
  .d {font-weight: 700;}
  .e {font-weight: bolder;}
</style>

text-decoration 文字装饰

text-decoration 样式属性可以设定“文字的装饰”，所谓的文字装饰表示删除线、底线等覆盖于文字的线条，text-decoration 包含下列四种属性，四种属性可以各自独立撰写：

• text-decoration-line 装饰类型 ( 必须 )

  装饰类型	说明
  none	无装饰，默认值。
  underline	底线。
  overline	顶部线。
  line-through	删除线。

  

• text-decoration-style 装饰样式

  装饰类型	说明
  solid	实线，默认值。
  double	双实线。
  dotted	点状线。
  dashed	虚线。
  wavy	波浪线。

  

• text-decoration-color 装饰颜色 ( 使用 CSS 色彩单位 )

  

• text-decoration-thickness 装饰粗细 ( 使用 CSS 绝对长度单位 )

  装饰类型	说明
  auto	浏览器自动定义，默认值。
  from-font	根据字型文件定义的粗细，如果没有定义就用 auto。
  length	使用 CSS 绝对长度单位，或文字大小的百分比，。

  

由于 text-decoration 属于四个样式的“集合式简写”，所以支援下列几种写法 ( 样式采用空白分隔，顺序不拘 )：

p {text-decoration: 裝飾類型;}
p {text-decoration: 裝飾類型 裝飾樣式;}
p {text-decoration: 裝飾類型 裝飾樣式 裝飾顏色;}
p {text-decoration: 裝飾類型 裝飾樣式 裝飾顏色 裝飾粗細;}

下方的范例使用单一个 text-decoration 呈现不同的文字装饰。

线上展示：https://codepen.io/oxxo/pen/wvbrdLX

<!-- HTML 程式碼 -->
<h3 class="a">Hello Oxxo!!</h3>
<h3 class="b">Hello Oxxo!!</h3>
<h3 class="c">Hello Oxxo!!</h3>
<h3 class="d">Hello Oxxo!!</h3>

<!-- CSS 程式碼 -->
<style>
  h3 {
    margin: 15px;
    font-size:30px;
  }
  .a {text-decoration: underline red 10px;}
  .b {text-decoration: underline wavy green 5px;}
  .c {text-decoration: line-through double #ff550088 5px;}
  .d {text-decoration: line-through wavy #00009988 50%;}
</style>

text-decoration-line 装饰类型可以重复撰写 ( 装饰样式、颜色和粗细只能有一种 )，变成混合样式的奇妙效果。

线上展示：https://codepen.io/oxxo/pen/qBGVRQj

<!-- HTML 程式碼 -->
<h3>Hello Oxxo!!</h3>

<!-- CSS 程式碼 -->
<style>
  h3 {
    margin: 100px 15px;
    font-size:30px;
    text-decoration: underline overline line-through wavy #ff000055 50%;
  }
</style>

text-emphasis 文字重点强调

text-emphasis 样式属性可以设定“文字重点强调”，会在指定文字的上方增加一些符号指示，让文字更加醒目，下方列出相关属性值：

下方的范例使用不同的 text-emphasis 来标记文字。

线上展示：https://codepen.io/oxxo/pen/LYozXGb

<!-- HTML 程式碼 -->
<h3 class="a">Hello OXXO!! (text-emphasis: filled;)</h3>
<h3 class="b">Hello OXXO!! (text-emphasis: open;)</h3>
<h3 class="c">Hello OXXO!! (text-emphasis: dot;)</h3>
<h3 class="d">Hello OXXO!! (text-emphasis: circle;)</h3>
<h3 class="e">Hello OXXO!! (text-emphasis: double-circle;)</h3>
<h3 class="f">Hello OXXO!! (text-emphasis: triangle;)</h3>
<h3 class="g">Hello OXXO!! (text-emphasis: sesame;)</h3>
<h3 class="h">Hello OXXO!! (text-emphasis: ">";)</h3>

<!-- CSS 程式碼 -->
<style>
  h3 {margin: 10px;}
  .a {text-emphasis: filled;}
  .b {text-emphasis: open;}
  .c {text-emphasis: dot;}
  .d {text-emphasis: circle;}
  .e {text-emphasis: double-circle;}
  .f {text-emphasis: triangle;}
  .g {text-emphasis: sesame;}
  .h {text-emphasis: ">";}
</style>

标记符号的颜色默认与文字颜色相同，但也可以额外在符号后方指定颜色 ( 使用空白分隔 )，颜色支援“单色”的所有色彩单位，下方范例会将标记符号加上不同的颜色。

线上展示：https://codepen.io/oxxo/pen/JjqreKR

<!-- HTML 程式碼 -->
<h3 class="a">Hello OXXO!! (text-emphasis: filled;)</h3>
<h3 class="b">Hello OXXO!! (text-emphasis: open;)</h3>
<h3 class="c">Hello OXXO!! (text-emphasis: dot;)</h3>
<h3 class="d">Hello OXXO!! (text-emphasis: circle;)</h3>
<h3 class="e">Hello OXXO!! (text-emphasis: double-circle;)</h3>
<h3 class="f">Hello OXXO!! (text-emphasis: triangle;)</h3>
<h3 class="g">Hello OXXO!! (text-emphasis: sesame;)</h3>
<h3 class="h">Hello OXXO!! (text-emphasis: ">";)</h3>

<!-- CSS 程式碼 -->
<style>
  h3 {margin: 10px;}
  .a {text-emphasis: filled red;}
  .b {text-emphasis: open orange;}
  .c {text-emphasis: dot green;}
  .d {text-emphasis: circle #0000ff;}
  .e {text-emphasis: double-circle rgb(0,0,150);}
  .f {text-emphasis: triangle #99009977;}
  .g {text-emphasis: sesame hsl(0, 0%, 0%, 0.5);}
  .h {text-emphasis: "哈" lch(50% 50 180 / 0.6);}
</style>

text-emphasis 是属于“缩写格式”的样式属性，是由 text-emphasis-style ( 必须 ) 和 text-emphasis-color 缩写而来，所以如果将其分开撰写，也可以得到相同的结果。

线上展示：https://codepen.io/oxxo/pen/bNbYwgE

<!-- HTML 程式碼 -->
<h3 class="a">Hello OXXO!! </h3>
<h3 class="b">Hello OXXO!! </h3>
<h3 class="c">Hello OXXO!! </h3>
<h3 class="d">Hello OXXO!! </h3>
<h3 class="e">Hello OXXO!! </h3>
<h3 class="f">Hello OXXO!! </h3>
<h3 class="g">Hello OXXO!! </h3>
<h3 class="h">Hello OXXO!! </h3>

<!-- CSS 程式碼 -->
<style>
  h3 {margin: 10px; font-size: 20px;}
  h3:nth-child(2n){margin-bottom: 30px;}

  .a {text-emphasis: filled red;}
  .b {
    text-emphasis-style: filled;
    text-emphasis-color: red;
  }
  .c {text-emphasis: open orange;}
  .d {
    text-emphasis-style: open;
    text-emphasis-color: orange;
  }
  .e {text-emphasis: triangle #9097;}
  .f {
    text-emphasis-style: triangle;
    text-emphasis-color: #9097;
  }
  .h {text-emphasis: "哈" lch(50% 50 180 / 0.6);}
  .g {
    text-emphasis-style: "哈";
    text-emphasis-color: lch(50% 50 180 / 0.6);
  }
</style>

word-spacing 单字间距

word-spacing 样式属性可以设定“英文单字的间距”，使用 CSS 的“绝对”长度单位 ( 参考“CSS 长度与角度单位”) 或 em ( 乘以元素文字大小 )，如果设定为 normal 则为 0，此外需要注意的是，CSS 对于“单字”的定义是指“两个空白之间的文字”，并非真正的单字，如果用空白包覆一串中文字，则这串中文字也会被视为“单字”，下方的范例将单字设定为不同的间距。

线上展示：https://codepen.io/oxxo/pen/NWVajgX

<!-- HTML 程式碼 -->
<h3 class="a">Hello Oxxo!! 單字 單字！</h3>
<h3 class="b">Hello Oxxo!! 單字 單字！</h3>
<h3 class="c">Hello Oxxo!! 單字 單字！</h3>

<!-- CSS 程式碼 -->
<style>
  h3 {margin: 5px;}
  .a {word-spacing: 10px;}
  .b {word-spacing: 20px;}
  .c {word-spacing: 30px;}
</style>

如果使用 em 作为单位，则会间距会乘以元素的字体大小，例如文字大小 20px，0.5em 等于 10px，最后所呈现的效果就会相同。

<!-- HTML 程式碼 -->
<h3 class="a">Hello OXXO!! (word-spacing: 0.5em;)</h3>
<h3 class="b">Hello OXXO!! (word-spacing: 10px;)</h3>

<!-- CSS 程式碼 -->
<style>
  h3 {margin: 5px;}
  .a {
    font-size: 20px;
    word-spacing: 0.5em;  /* 20px x 0.5 = 10px */
  }
  .b {
    font-size: 20px;
    word-spacing: 10px;
  }
</style>

letter-spacing 字元间距

letter-spacing 样式属性可以设定“字元的间距”，使用 CSS 的“绝对”长度单位 ( 参考“CSS 长度与角度单位”) 或 em ( 乘以元素文字大小 )，字元表示每一个字母或每一个中文字，下方的范例将每个字元设定为不同的间距。

线上展示：https://codepen.io/oxxo/pen/YzbrVrW

<!-- HTML 程式碼 -->
<h3 class="a">Hello Oxxo!! 大家好呀！</h3>
<h3 class="b">Hello Oxxo!! 大家好呀！</h3>
<h3 class="c">Hello Oxxo!! 大家好呀！</h3>

<!-- CSS 程式碼 -->
<style>
  h3 {margin: 5px;}
  .a {letter-spacing: 2px;}
  .b {letter-spacing: 5px;}
  .c {letter-spacing: 10px;}
</style>

如果使用 em 作为单位，则会间距会乘以元素的字体大小，例如文字大小 20px，0.5em 等于 10px，最后所呈现的效果就会相同。

<!-- HTML 程式碼 -->
<h3 class="a">Hello OXXO!! (letter-spacing: 0.5em;)</h3>
<h3 class="b">Hello OXXO!! (letter-spacing: 10px;)</h3>

<!-- CSS 程式碼 -->
<style>
  h3 {margin: 5px;}
  .a {
    font-size: 20px;
    letter-spacing: 0.5em;  /* 20px x 0.5 = 10px */
  }
  .b {
    font-size: 20px;
    letter-spacing: 10px;
  }
</style>

text-shadow 文字阴影

text-shadow 样式属性可以设定“文字阴影”，下方列出相关属性值，除了颜色和模糊半径，其他两个属性是必须属性，使用时 x、y 和模糊半径需要按照顺序撰写，属性之间使用“空白”分隔。

下方的范例使用不同的 text-shadow 来呈现文字阴影。

线上展示：https://codepen.io/oxxo/pen/GRaMwmd

<!-- HTML 程式碼 -->
<h3 class="a">Hello OXXO!! (text-shadow: red 1em 5px 10px;)</h3>
<h3 class="b">Hello OXXO!! (text-shadow: green 0.3em 0.3em 0.2em;)</h3>
<h3 class="c">Hello OXXO!! (text-shadow: #00000066 2px 2px 2px;)</h3>

<!-- CSS 程式碼 -->
<style>
  h3 {
    margin: 10px; 
    font-size: 20px;
  }
  .a {text-shadow: red 1em 5px 10px;}
  .b {text-shadow: green 0.3em 0.3em 0.2em;}
  .c {text-shadow: #00000066 2px 2px 2px;}
</style>

除了使用单层阴影，也可以使用逗号分隔“多个”阴影，创造出阴影“叠加”的效果，此外，如果搭配较粗的字型，将字型颜色设定为“半透明”，甚至可以做出有趣的“边框”或“立体”效果，越左侧的文字阴影所在图层越高，会遮蔽右边的文字阴影，使用时需要注意，只要某一项文字阴影格式写错，就会发生样式错误而无法显示文字阴影。

下方的范例会呈现多重文字阴影。

线上展示：https://codepen.io/oxxo/pen/GRaMwyG

<!-- HTML 程式碼 -->
<h3 class="a">Hello OXXO!!</h3>
<h3 class="b">Hello OXXO!!</h3>
<h3 class="c">Hello OXXO!!</h3>

<!-- CSS 程式碼 -->
<style>
  h3 {
    margin: 20px; 
    font-family: Impact;
    font-size: 40px;
  }
  .a {
    text-shadow: red 3px 3px 4px,
                orange 6px 6px 4px,
                yellow 9px 9px 4px,
                green 12px 12px 4px,
                blue 15px 15px 4px,
                purple 18px 18px 4px;
  }
  .b {
    color: #00000000;
    text-shadow: yellow 0 0 0,
                black 2px 0px 0,
                black 0px 2px 0,
                black -2px 0px 0,
                black 0px -2px 0;
  }
  .c {
    color: #ffcc00;
    text-shadow: #ee8800 1px 1px,
                #dd7700 2px 2px,
                #cc6600 3px 3px,
                #bb5500 4px 4px,
                #aa4400 5px 5px,
                #993300 6px 6px,
                #882200 7px 7px,
                #771100 8px 8px,
                #660000 9px 9px;
  }
</style>

font 文字样式缩写格式

font 样式属性是文字样式属性的“缩写格式”，可填入下列七种样式属性的属性值：

使用 font 时需要符合下列的规范：

• font-size 和 font-family 为必填样式属性。
• font-style、font-variant 或 font-weight 必须位于 font-size 之前。
• font-variant 的属性值只能使用 normal 和 small-caps。
• 撰写“一个数字”表示 font-size，这时行高会使用默认值 ( 文字尺寸的 1.2 倍 )。
• 使用“尺寸/行高”的格式同时撰写文字尺寸和行高，例如 20px/30px 表示文字尺寸 20px 行高 30px。
• font-family 必须放在最后面。

下方范例会用几个 h2 呈现不同的 font 的样式属性。

线上展示：https://codepen.io/oxxo/pen/LEPeEQg

<!-- HTML 程式碼 -->
<h2>font: 30px fantasy;</h2>
<h2>font: 30px/10px monospace;</h2>
<h2>font: 30px/30px monospace;</h2>
<h2>font: bold 20px arial;</h2>
<h2>font: bold italic 20px arial;</h2>

<!-- CSS 程式碼 -->
<style>
  h2{
    margin: 30px 10px;
    width: 300px;
    border: 1px solid #000;
  }
  h2:nth-child(1){font: 30px fantasy;}
  h2:nth-child(2){font: 30px/10px monospace;} /* 文字 30px 行高 10px */
  h2:nth-child(3){font: 30px/50px monospace;} /* 文字 30px 行高 50px */
  h2:nth-child(4){font: bold 20px arial;}
  h2:nth-child(5){font: bold italic 20px arial;}
</style>

小结

这篇教学介绍的文字样式，不论是颜色、底线、阴影等，都是很常应用在网页里的文字效果，透过这些文字样式的应用，一定能让网页增添许多不同的色彩和感觉。

意见反馈