CSS 文字風格樣式範例

CSS 是用來設定 Web Page Style 網頁樣式的表達語言方式,例如 font-family 可以讓控制網頁中文字元素外觀的呈現方式 font-size 用來指定文字的大小、font-weight 指定文字的粗細。使用 CSS 來設定文字的風格和字型。

color: #0f0f0f; /*文字顏色*/
font-family: Arial, sans-serif; /*文字風格字型*/
font-size: 13px; /*文字大小*/
font-weight: bold; /*文字粗體*/
font-style: italic; /*文字斜體*/
font-variant: small-caps; /*小字體*/
  • font-weight: normal; Andersen Danish Author Whose Fairy Tales
  • font-weight: bold; Andersen Danish Author Whose Fairy Tales
  • font-style: italic; Andersen Danish Author Whose Fairy Tales
  • font-variant: small-caps; Andersen Danish Author Whose Fairy Tales
letter-spacing: 1px; /*字體間距離*/
line-height: 18px; /*設定行高(上下行的間距)*/
  • letter-spacing: -1px; Andersen Danish Author Whose Fairy Tales
  • letter-spacing: 0px; Andersen Danish Author Whose Fairy Tales
  • letter-spacing: 1px; Andersen Danish Author Whose Fairy Tales
  • letter-spacing: 2px; Andersen Danish Author Whose Fairy Tales
  • letter-spacing: 3px; Andersen Danish Author Whose Fairy Tales
  • letter-spacing: 5px; Andersen Danish Author Whose Fairy Tales
word-spacing: 5px; /*設定詞的間距(詞間需有空白)*/
  • Andersen enjoyed considerable success with a short story titled A Journey on Foot from Holmen Canal to the East Point of Amager. He also published a comedy and a collection of poems that season. Though he made little progress writing and publishing immediately thereafter, in 1833 he received a small traveling grant from the King, enabling him to set out on the first of many journeys through Europe.

CSS 文字刪除線、頂線、底線

如何在文字上加上刪除線、頂線或底線等效果。

text-decoration: line-through; /*加上刪除線*/
text-decoration: overline; /*加上頂線*/
text-decoration: underline; /*加上底線*/
text-decoration: underline;text-decoration-style:wavy; /*波浪底線*/
text-decoration: none; /*刪除連結底線*/
  • text-decoration: line-through; Until My Dancing Days are Done
  • text-decoration: overline; Until My Dancing Days are Done
  • text-decoration: underline; Until My Dancing Days are Done
  • text-decoration: underline; Until My Dancing Days are Done
  • text-decoration: none; Until My Dancing Days are Done

text-underline-offset

只能於 text-decoration:underline 下劃線的時候 text-underline-offset 屬性才有效,刪除線和 overline 上劃線都是無效的。

  • text-underline-offset : 0px; Until My Dancing Days are Done
  • text-underline-offset : 5px; Until My Dancing Days are Done
  • text-underline-offset : 10px; Until My Dancing Days are Done

text-transform: capitalize; /*字首大寫*/
text-transform: uppercase; /*英文大寫*/
text-transform: lowercase; /*英文小寫*/
  • andersen danish author whose fairy tales
  • andersen danish author whose fairy tales
  • andersen danish author whose fairy tales

首行縮排 Text-Indent

設定文字的第一行內縮的距離用在區塊元素。預設值為 0px 設定內縮長度或使用 % 百分比、以百分比為內縮長度。

text-indent: 36px;

文字左右對齊

text-align: right; /*文字靠右對齊*/
text-align: left; /*文字靠左對齊*/
text-align: center; /*文字置中對齊*/
text-align: justify; /*文字分散對齊*/
  • Text-Align (Right) Andersen enjoyed considerable success with a short story titled A Journey on Foot from Holmen Canal to the East Point of Amager. He also published a comedy and a collection of poems that season. Though he made little progress writing and publishing immediately thereafter, in 1833 he received a small traveling grant from the King, enabling him to set out on the first of many journeys through Europe.
  • Text-Align (Center) Andersen enjoyed considerable success with a short story titled A Journey on Foot from Holmen Canal to the East Point of Amager. He also published a comedy and a collection of poems that season. Though he made little progress writing and publishing immediately thereafter, in 1833 he received a small traveling grant from the King, enabling him to set out on the first of many journeys through Europe.
  • Text-Align (Justify) Andersen enjoyed considerable success with a short story titled A Journey on Foot from Holmen Canal to the East Point of Amager. He also published a comedy and a collection of poems that season. Though he made little progress writing and publishing immediately thereafter, in 1833 he received a small traveling grant from the King, enabling him to set out on the first of many journeys through Europe.


vertical-align: super; /*上標字*/
vertical-align: sub; /*下標字*/
  • vertical-align: super; Stayed at Dickens home for five weeks
  • vertical-align: sub; Stayed at Dickens home for five weeks
vertical-align: top; /*垂直向上對齊*/
vertical-align: bottom; /*垂直向下對齊*/
vertical-align: middle; /*垂直置中對齊*/
vertical-align: text-top; /*文字垂直向上對齊*/
vertical-align: text-bottom; /*文字垂直向下對齊*/

文字換行

word-wrap: break-word; /* 任意斷字,適用於英文 */
word-wrap: nowrap; /* 強制水平排序不斷行 */
word-break: normal; /* 預設值 */
word-break: keep-all;
word-break: break-all;

主要是用來設定亞洲語言 Chinese, Japan, Korea 及非亞洲語言文字的斷行規則。


文字長度、超出邊界

指定是否可以將完整的長字分為二,以免長字超出邊界。適用於英文,通常英文用音節規則來斷字。
文字狀態下 anywhere 和 break-word 的顯示似乎相同。

overflow-wrap: normal; /* 預設值 */
overflow-wrap: break-word;
overflow-wrap: anywhere;

hyphens 使用連字符

適用於英文在換行時如何使用連字元連接單詞。可以完全阻止使用「連字符」及什麼時候使用「連字符」。

hyphens:manual; /* 預設值 */
hyphens:none;
hyphens:auto;

Text Rendering,只處理 ASCII 碼的文字

在呈現文本時要優化的內容及字元間距。定義瀏覽器渲染引擎在速度、易讀性、清晰度之間進行優化權衡。

text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
  • text-rendering: auto; ff fi fl ffl
  • text-rendering: optimizeSpeed; ff fi fl ffl
  • text-rendering: optimizeLegibility; ff fi fl ffl
  • text-rendering: geometricPrecision; ff fi fl ffl