字體

字體族font-family

通常需要給處字體棧以適應(yīng)不同機器間的適配，多單詞字體需要用引號

body{font-family:"trebuchet ms", tahoma, sans-serif; }

serif和sans-serif是最保險的方法

字體大小

設(shè)置font-size:62.5% 1em=10px

em單位的相對大小會逐層復合

rem 相對于根元素的字體大小，不支持ie8極其以下的瀏覽器

字體樣式

font-style:italic normal oblique

html中可以直接使用<em>標簽做到italic斜體的效果，斜體在英文中表示強調(diào)

字體粗細

font-weight 主要bold 和normal html中可以使用<strong>標簽

字體變化

font-variant: small-caps 和normal small-caps用來將字母轉(zhuǎn)換為小型大寫字母

簡寫

注意：必須聲明font-size和font-family。且聲明時其他屬性不分先后，font-size倒二，font-family最后聲明

在設(shè)置字體大小時，可以順便設(shè)置行高，如12px/1.5

word-wrap

normal | break-word 將內(nèi)容在邊界內(nèi)換行

word-break

normal | break-all（中斷單詞） | keep-all（保留單詞）

white-space

normal（無視空白符）| pre（保留空白符） | nowrap?（文本不會換行，直到碰到<br/>標簽）| pre-line （合并空白符）| pre-wrap （保留空白符，正常換行）

文本屬性

文本縮進text-indent?

注：子元素文本會繼承父元素的文本縮進。文本元素只作用于文本內(nèi)容，不作用于包裹文本元素的盒子。

在設(shè)定縮進和外邊距時要使用em,以便用戶改變字體大小時，它們能等比變化

字符間距l(xiāng)etter-spacing

正值增大，負值縮小，縮小標題的字符間距能夠讓網(wǎng)頁顯得更專業(yè)

單詞間距word-spacing

文本裝飾text-decoration

line-height行高，修改默認行高的快捷屬性就是在font中應(yīng)用：

div#intro {font:1.2em/1.4 helvetica, arial, sans-serif;}

文本轉(zhuǎn)換text-transform

normal uppercase lowercase capitalize(首字母大寫)

text-overflow

clip | ellipsis文本溢出顯示省略標記

text-overflow要在一定的高度范圍內(nèi)配合overflow:hidden才能生效

.text{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}

垂直對齊vertical-align

sub super top middle bottom?

以基線為參照上下移動文本，只影響行內(nèi)元素。注：如果想影響塊級元素，需使用Inline或Inline-block。

常用于文字上標及下標，腳注等，html標簽有上標<sup>和下標<sub>，重新設(shè)置font-size和vertical-align會達到更好的效果

Web字體@font-face

（1）@font-face 中的font-family僅用于元素中font-family的引用

（2）應(yīng)用多個字體就啟用多個@font-face規(guī)則

（3）src屬性會依次獲取字體的來源

（4）可以使用字體圖標

?在::before和::after的content的元素中引用html實體，需要將十六進制的改寫為\201C這樣的形式

html5 的<blockquote>用于表示被引用的文本，<quote>用于將文本的開頭和末尾加上雙引號

轉(zhuǎn)載于:https://www.cnblogs.com/goOtter/p/9655907.html

總結(jié)

以上是生活随笔為你收集整理的CSS3学习笔记-字体和文字的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。