總結一下項目中常見的文本和字體的樣式設置
文本
text-align-last: 段落的最後一行的對齊方式
// 末尾右對齊
p{ text-align-last: right;}
text-decoration 文本修飾,下劃線、上劃線、刪除線等。
// 中間刪除線
p{ text-decoration:line-through;}
text-indent 首行文本的縮進
// 首行縮進20px
p{ text-index:20px;}
text-overflow 文本溢出
// 溢出的文本設置爲點
p {
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
text-transform 控制文本中的字母
// 文本中的每個單詞以大寫字母開頭
p {
text-transform: capitalize;
}
white-space 指定元素內的空白怎樣處理
// 文本不會換行
p {
white-space:nowrap;
}
word-break 在合適的點換行
p {
word-break:hyphenate;
}
word-spacing 增加或減少單詞間的間隔
// 規定段落中的字間距是 25 像素
p {
word-spacing:25px;
}
letter-spacing 單個字符間距
// 規定字符的字間距是 2 像素
p {
letter-spacing:2px
}
字體
設置字體:font-family
font-family屬性可以設置幾個字體名稱作爲一種"後備"機制,
如果瀏覽器不支持第一種字體,他將嘗試下一種字體。
p {font-family:"Times New Roman", Times, serif;}
字體樣式:font-style
font-style定義字體的樣式主要屬性有三個值
正常 font-style:normal
斜體 font-style:italic
傾斜 font-style:oblique
設置字體大小
常用的設置字體大小有四個單位 px 百分比 em rem(vh、vw,這些筆者也不會,不知道能不能設置字體大小…)
px不必多說,
百分比相對父元素的font-size。
em相對自身font-size的大小,如果自身沒有設置font-size的話則向上找尋直到body,這點百分比也一樣。
rem相對於根元素;
簡寫
順序:font-style | font-variant | font-weight | font-size | line-height | font-family
例如:.font{font:italic small-caps bold 12px/1.5em arial,verdana;}