• 文本
  • 字體
    • 改變字號
    • 改變字體
    • 加粗字體
    • 傾斜字體
    • 更改行距
    • font shorthand
    • 改變文字顏色
  • 對齊方式
    • 文字居中
    • 文本垂直對齊
    • 文本縮進
  • 格式處理
    • 保留空格格式
    • 文字換行
  • 文本裝飾
    • 文字陰影
    • 文本裝飾（下劃線等）
  • 高級設置
    • 省略字符
    • 更換鼠標形狀
    • 強制繼承

文本

See the Pen FEND_Fonts by Li Xinyang (@li-xinyang) on CodePen.

字體

改變字號

font-size: <absolute-size> | <relative-size> | <length> | <percentage> | inherit

• <absolute-size> 有 small large medium
• <relative-size> 有 smaller larger

div
  font-size 12px
  p#sample0
    font-size 16px
  p#sample1
    font-size 2em
  p#sample2
    font-size 200%

NOTE：以上兩值在開發(fā)中并不常用。2em 與 200% 都為父元素默認大小的兩倍（參照物為父元素的字體大小 12px）。

改變字體

font-family: [ <family-name> | <generic-family> ]#

<generic-family> 可選選項，但具體使用字體由瀏覽器決定

• serif
• sans-serif
• cursive
• fantasy
• monospace

font-family: arial, Verdana, sans-serif;

NOTE：優(yōu)先使用靠前的字體

加粗字體

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-weight: normal;
font-weight: bold;

傾斜字體

font-style: normal | italic | oblique | inherit

italic 使用字體中的斜體，而 oblique 在沒有斜體字體時強制傾斜字體。

更改行距

line-height: normal | <number> | <length> | <percentage>

normal 值為瀏覽器決定，在1.1至1.2之間（通常設置值為1.14左右）

/* length 類型 */
line-height: 40px;
line-height: 3em;
/* percentage 類型 */
line-height: 300%;
/* number 類型 */
line-height: 3;

NOTE：當line-height為 number 類型時，子類直接繼承其數(shù)值（不計算直接繼承）。 而當為 percentage 類型時，子類則會先計算再顯示（先計算后繼承）。

字間距（字母間距）

letter-spacing: normal | <length>

其用于設置字間距或者字母間距，此屬性適用于中文或西文中的字母。 如果需要設置西文中詞與詞的間距或標簽直接的距離則需要使用 word-spacing。

word-spacing: normal | <length>

font shorthand

font: [ [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar

font: 30px/2 "Consolas", monospace;
font: italic bold 20px/1.5 arial, serif;
font: 20px arial, serif;

NOTE：當其他值為空時，均被設置為默認值。

改變文字顏色

color: <color>

element { color: red; }
element { color: #f00; }
element { color: #ff0000; }
element { color: rgb(255,0,0); }
element { color: rgb(100%, 0%, 0%); }
element { color: hsl(0, 100%, 50%); }

/* 50% translucent */
element { color: rgba(255, 0, 0, 0.5); }
element { color: hsla(0, 100%, 50%, 0.5); }

/* 全透明 */
element { color: transparent' }
element { color: rgba(0, 0, 0, 0); }

對齊方式

文字居中

text-align: start | end | left | right | center | justify | match-parent | start end

NOTE：默認為文本左對齊。

文本垂直對齊

vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>

NOTE：<percentage>的參照物為line-height

文本縮進

text-indent: <length> | <percentage> && [ hanging || each-line ]

NOTE：縮進兩個字可使用 text-indent: 2em;

格式處理

保留空格格式

white-space: normal | pre | nowrap | pre-wrap | pre-line

pre 行為同 <pre> 一致。

文字換行

word-wrap: normal | break-word

NOTE：允許長單詞自動換行。

word-break: normal | break-all | keep-all

NOTE：break-all 單詞中的任意字母間都可以換行。

文本裝飾

文字陰影

text-shadow:none | <shadow-t># 或 text-shadow:none | [<length>{2,3}&&<color>?]#

p {
  text-shadow: 1px 1px 1px #000,
               3px 3px 5px blue;
}

1. value = The X-coordinate X 軸偏移像素
2. value = The Y-coordinate Y 軸偏移像素
3. value = The blur radius 陰影模糊半徑
4. value = The color of the shadow 陰影顏色（默認為文字顏色）

文本裝飾（下劃線等）

text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

h1.under {
    text-decoration: underline;
}
h1.over {
    text-decoration: overline;
}
p.line {
    text-decoration: line-through;
}
p.blink {
    text-decoration: blink;
}
a.none {
    text-decoration: none;
}
p.underover {
    text-decoration: underline overline;
}

高級設置

省略字符

text-overflow: [ clip | ellipsis | <string> ]{1,2}

/* 常用配合 */
text-overflow: ellipsis;
overflow: hidden; /* 溢出截取 */
white-space: nowrap; /* 禁止換行 */

更換鼠標形狀

cursor: [[<funciri>,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ]] | inherit

常用屬性

cursor: [<uri>,]*[auto | default | none | help | pointer | zoom-in | zoom-out | move]

• <uri> 圖片資源地址代替鼠標默認形狀
• <default> 默認光標
• <none> 隱藏光標
• <pointer> 手型光標
• <zoom-in>
• <zoom-out>
• <move>

cursor: pointer;
cursor: url(image-name.cur), pointer;
/* 當 uri 失效時或者則會起作用 */

強制繼承

inherit 會強制繼承父元素的屬性值。

font-size: inherit;
font-family: inherit;
font-weight: inherit;
...
word-wrap: inherit;
work-break: inherit
text-showdow: inherit

NOTE：具體在使用時可查詢文檔