常用文字樣式

一個吸引目光網頁設計除了視覺設計與配色，「文字樣式」也是非常重要的一部分，這篇教學會介紹 CSS 裡常用的文字樣式，例如 color、font-style、font-weight、text-decoration、letter-spacing、text-shadow 等屬性，精準控制文字的顏色、斜體、粗細、陰影、底線、刪除線、字母間距等樣式效果。

常用文字樣式

下方列出可以文字樣式的常用屬性 ( 所有瀏覽器都支援，並都具有繼承特性 )：

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 屬性數值改變文字粗細。

線上展示：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>

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>

小結

這篇教學介紹的文字樣式，不論是顏色、底線、陰影等，都是很常應用在網頁裡的文字效果，透過這些文字樣式的應用，一定能讓網頁增添許多不同的色彩和感覺。

意見回饋

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