Font Size
px、em、rem 、 %
| px | 絕對單位，螢幕「點」/ pixel (1px = 1/96th of 1in) |
| em | 相對單位，「倍數」乘以父元素的 px 值。 |
| rem | 相對單位，「倍數」乘以根元素的 px 值。 |
| % | 相對單位，「百分比」乘以父元素的 px 值。 |
對照Font單位
| medium | 預設值，16px ( h4 預設值 ) |
| xx-small | medium * 0.6 ( h6 預設值 ) |
| x-small | medium * 0.75 |
| small | medium * 0.8 ( h5 預設值，W3C 定義為 0.89，實測約為 0.8 ) |
| large | medium * 1.1 ( h3 預設值，W3C 定義為 1.2，實測約為 1.1 ) |
| x-large | medium * 1.5 ( h2 預設值 ) |
| xx-large | medium * 2 |
| smaller | 父層的 80% |
| larger | 父層的 120% |
絕對大小值
| CSS absolute-size values | xx-small | x-small | small | medium | large | x-large | xx-large | |
|---|---|---|---|---|---|---|---|---|
| scaling factor | 3/5 | 3/4 | 8/9 | 1 | 6/5 | 3/2 | 2/1 | 3/1 |
| HTML headings | h6 | h5 | h4 | h3 | h2 | h1 | ||
| HTML font sizes | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
對照印刷單位
| pt | 印刷機「點」/ points (1pt = 1/72 of 1in) 72 dpi / 1px = 1pt 96 dpi / 1px = 0.75 pt ( 72/96 = 0.75 ) |
| pc | picas (1pc = 12pt) |
| in | 英吋 / inches (96dpi / 1in = 96px = 2.54cm) |
| cm | 公分 / centimeters (96dpi / 1cm = 37.795275593333px) |
| mm | 公釐 / millimeters (96dpi / 1cm = 3.7795275593333px) |
text-justify
字元左右對齊
text-justify: auto;
text-justify: newspaper;
text-justify: distribute;
text-justify: distribute-all-lines;
text-justify: inter-word;
text-justify: inter-cluster;
text-justify: inter-ideograph;
div {
text-align:justify;
text-justify:inter-ideograph;
-moz-text-align-last:justify;/*ff*/
-webkit-text-align-last:justify;/*chrome 20+*/
}
text-decoration
字元底線
h1 {
text-decoration: overline; /*上底線*/
}
h2 {
text-decoration: line-through;/*刪除線*/
}
h3 {
text-decoration: underline;/*下底線*/
}
a {
text-decoration: none;/*刪除下底線*/
}
text-indent
字元第一行縮排
p {
text-indent: 50px;
}
letter-spacing
字元間距
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
word-spacing
單句間距
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
line-height
行高
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
word-wrap
英文字元斷行
.break-word {
word-wrap: break-word;
}
::first-line
段落第一行套用效果
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
Word-break
英文字元斷行
.break-word {
word-wrap: break-word;
}
