字體

字體族font-family

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

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

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

字體大小

設置font-size:62.5% 1em=10px

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

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

字體樣式

font-style:italic normal oblique

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

字體粗細

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

字體變化

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

簡寫

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

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

word-wrap

normal | break-word 將內容在邊界內換行

word-break

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

white-space

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

文本屬性

文本縮進text-indent?

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

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

字符間距letter-spacing

正值增大，負值縮小，縮小標題的字符間距能夠讓網頁顯得更專業

單詞間距word-spacing

文本裝飾text-decoration

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

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

文本轉換text-transform

normal uppercase lowercase capitalize(首字母大寫)

text-overflow

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

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

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

垂直對齊vertical-align

sub super top middle bottom?

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

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

Web字體@font-face

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

（2）應用多個字體就啟用多個@font-face規則

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

（4）可以使用字體圖標

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

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

轉載于:https://www.cnblogs.com/goOtter/p/9655907.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。