css文本與字體常見用法集合

總結一下項目中常見的文本和字體的樣式設置

文本

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;}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章