文本是網頁中最重要的一種內容形式，文本幾乎可以寫在任何地方，塊級元素中可以寫行內元素中也可以寫。文本都是由一個個字符組成的，在css布局中，每一個字符都有一個em框，通常font-size設置的大小就是設置的em框的大小；這樣再由這些各個字符的em框串在一起組成的框就是這些文本的內容區。在沒有行間距的情況下即line-height為1時，上下兩行的內容區是緊緊相連的，此時font-size的大小就是基線之間的距離大小。如果設置了line-height，在布局時就會用line-height減去font-size所得的值再一分為二平均分配在內容區的上下兩端，這樣就得到了行內框。
此時有兩點特性：1.line-height 減 font-size 等于 行間距。2.line-height的值就是基線之間的距離大小。當然這前提是line-height要大于font-size的。如果設置的line-height比font-size還要小，那么就會有負的行間距，這負的行間距外在表現就是行與行之間會重疊，重疊的高度是他倆差的絕對值。
設置文本相關的樣式有：1.font-size 設置字體大小 ?語法<length>|<percentage>
2.font-family 設置字體類型 ?語法[<family-name>]#,當設置多個類型的時候后面的是前面的備選

3.font-weight 設置字體加粗 ?語法bold|normal|100|200|...

4.font-style 設置字體傾斜 ? 語法normal|italic

5.line-height 設置行高 ? ? ?語法normal|<number>|<length>|<percentage>行高有一個要注意的地方就是在繼承行高的時候，百分數和數字的繼承是有區別的，數字是直接繼承，就是說繼承過來的line-height還是數字，子元素的行高再根據這個數字進行計算。百分數是繼承計算后的值，例如父元素line-height是50%，font-size是20px，那么子元素繼承的不是50%，而是20*50&=10px。
font的值縮寫語法：[<font-style>||<font-weight>]?<font-size>[/<line-height>?<font-family>],最少要有大小和類型
6.text-shadow 設置文本陰影 ?語法none|[<length>{2,3}&&<color>?] ?第一個值表示x軸的偏移，第二個值是y軸的偏移，第三個可選的值是陰影模糊半徑
7.text-decoration 設置文本劃線 ?語法none|[underline||overline||line-through] 表示下劃線、上劃線、管穿線
8.text-overflow ? 設置文本溢出處理 ?語法clip|ellipsis ? ?ellipsis表示溢出時加......省略號這里要注意，text-overflow一般不單獨使用，要配合overflow和white-space使用，例如h2 {text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}

關于設置文本行的樣式有：1.text-align 這是設置水平對齊方式的，是設置所有行的，并且這個樣式只能應用在塊級元素。語法left|right|center|justify
2.vertical-align 這是設置垂直對齊方式的，只能應用于行內元素上，不能繼承，設置的是這個行內元素中的文本相對于父元素中的文本的垂直位置。語法baseline|sub|supper|top|...
3.text-indent 設置的是第一行的縮進，只能應用于塊級元素。語法<lenght>|<percentage> 負數的縮進會把文本隱藏掉而不是溢出。
4.white-space 設置的是文本中換行和空格的處理 ?語法nowrap|pre|pre-wrap|pre-linenowrap表示不換行pre表示保留文本的換行和空格，并且在溢出時仍然不換行pre-wrap表示保留文本的換行和空格，但在溢出時自動換行pre-line 只保留換行

總結

以上是生活随笔為你收集整理的CSS字体设置的一些技巧（行高，加粗，强制换行等）的全部內容，希望文章能夠幫你解決所遇到的問題。

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