文字排版之font的使用

2024-04-27 15:14:09

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

1.10.1 字體大小設(shè)置font-size （1em=16px）

其中，相對(duì)長(zhǎng)度單位比較常用，推薦使用像素單位px，絕對(duì)長(zhǎng)度單位使用較少。

一般頁面中：12px 14px 12cm

1em

1.10.2 設(shè)置字體font-family

使用font-family設(shè)置字體時(shí)，需要注意以下幾點(diǎn)：

? 各種字體之間必須使用英文狀態(tài)下的逗號(hào)隔開。

? 中文字體需要加英文狀態(tài)下的引號(hào)，英文字體一般不需要加引號(hào)。當(dāng)需要設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前。

? 如果字體名中包含空格、#、$等符號(hào)，則該字體必須加英文狀態(tài)下的單引號(hào)或雙引號(hào)，例如font-family: "Times New Roman";。

? 盡量使用系統(tǒng)默認(rèn)字體，保證在任何用戶的瀏覽器中都能正確顯示。

10.3 字體系列

襯線體：字體有一些修飾的東西，讓字體變的美觀。

非襯線體：沒有修飾。

font-famliy: tahoma,arial,'Hiragino Sans GB',/5b8b/4f53,sans-serif;

v 前面的字體都查找失敗后，在系統(tǒng)中找一種sans-serif字體作為默認(rèn)字體。

注意順序，如果把sans-serif放前面去，后面的都失效了。

1.10.4 設(shè)置字體顏色通過color屬性可以設(shè)置字體的顏色。Color: red;建議最好使用十六進(jìn)制的方式來寫

1.10.5 設(shè)置字符的間距l(xiāng)etter-spacing屬性用于定義字間距，所謂字間距就是字符與字符之間的空白。其屬性值可為不同單位的數(shù)值，允許使用負(fù)值，默認(rèn)為normal。可以設(shè)置連續(xù)漢字（漢字間沒有空格）的間距，也可以設(shè)置英文字母之間的間距。letter-spacing: 10px;

1.10.6 設(shè)置單詞間距Word-spacing屬性用于定義英文單詞之間的間距。也可以設(shè)置漢字中出現(xiàn)斷字的距離（比如：文字間出現(xiàn)空格等）。

1.10.7 玩轉(zhuǎn)行高行高的CSS定義：行高是兩行文本基線的距離。實(shí)際上就是：文本的高度+一倍的行距。一行文本的高度正好是： 0.5倍行距+ 文本的高度 + 0.5倍行距四線： 文字頂端的線，稱為頂線。 中線：穿過x中心的線為中線。 小寫X字母底部的線為基線。 文字底部的線為底線。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>27行高的練習(xí)</title><style>* {padding: 0; margin: 0;}p.demo {height: 100px; /*這里的height是塊狀標(biāo)簽p的高度*/line-height: 100px; /*這里的height是塊狀標(biāo)簽p中文本的行高的高度，包括行距和文本自身的高度*/text-align: center;font-size: 40px;background-color: silver;}.wrap {font: 16px "黑體";background-color: green;}.wrap p {background-color: red;/*font: 20px/1.5em "宋體"; */ /* 此時(shí)行高是：30px= 20*1.5 *//*font: 20px/1.5 "宋體"; */font: 20px/40px "宋體";/*

						20px 是字體大小，40px是行高大小						font:20px/40px 等于 font-size:20px;line-height:40px; 那么此時(shí)行距是40-20=20px						但這么寫有時(shí)候兼容性不太好，雖然第二種寫法代碼量比較多，但比較穩(wěn)定，建議還是用第二種							寫法*/}</style></head><body><p class="demo">傳智播客前端與移動(dòng)開發(fā)學(xué)院</p><div class="wrap"><div>我是父div的文本內(nèi)容</div> <p>我是子段落標(biāo)簽的文本</p>我是父div的文本內(nèi)容</div></body></html>
1.10.8 text-decoration:文本裝飾text-decoration屬性用于設(shè)置文本的下劃線，上劃線，刪除線等裝飾效果，其可用屬性值如下：<s>刪除線</s>none：沒有裝飾（正常文本默認(rèn)值）。underline：下劃線。overline：上劃線。line-through：刪除線
1.10.9 text-align:水平對(duì)齊方式text-align屬性用于設(shè)置文本內(nèi)容的水平對(duì)齊，相當(dāng)于html中的align對(duì)齊屬性。其可用屬性值如下：left：左對(duì)齊（默認(rèn)值）right：右對(duì)齊center：居中對(duì)齊1.10.10 text-indent:首行縮進(jìn)text-indent屬性用于設(shè)置段落首行文本的縮進(jìn)，只能設(shè)置于塊級(jí)標(biāo)簽。其屬性值可為不同單位的數(shù)值、em字符寬度的倍數(shù)、或相對(duì)于瀏覽器窗口寬度的百分比%，允許使用負(fù)值, 建議使用em作為設(shè)置單位。1.10.11 空白符的處理：Normal：正常的顯示，如果寬度不夠進(jìn)行折行顯示。Nowrap：即使超過盒子的寬度，文本也不進(jìn)行換行顯示。PRe：寫html代碼的時(shí)候是什么樣式的，顯示就顯示成什么樣的。
關(guān)于自動(dòng)換行的處理
<!DOCTYPE html>
<html lang="en">
<head>
      <metacharset="UTF-8">
      <title>自動(dòng)換行的處理</title>
      <style>
           div {
                 border: 1pxsolid red;
                 background-color:blue;
                 width: 100px;
                 height: 400px;
                 color: #fff;
 
                 /*word-break:break-all; */  /*可以把一個(gè)單詞放到兩行中，充分利用行的空間*/
                 word-break:keep-all;
           }
      </style>
</head>
<body>
      <div>
           I  am itcast teacher theather theather theather
           http://www.itcast.cn/i/id/ljljljj
      </div>
</body>
</html>