文字排版之font的使用

2024-04-27 15:14:09

字體：大中小

來源：轉載

供稿：網友

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

其中，相對長度單位比較常用，推薦使用像素單位px，絕對長度單位使用較少。

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

1em

1.10.2 設置字體font-family

使用font-family設置字體時，需要注意以下幾點：

? 各種字體之間必須使用英文狀態下的逗號隔開。

? 中文字體需要加英文狀態下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位于中文字體名之前。

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

? 盡量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。

10.3 字體系列

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

非襯線體：沒有修飾。

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

v 前面的字體都查找失敗后，在系統中找一種sans-serif字體作為默認字體。

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

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

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

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

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

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>27行高的練習</title><style>* {padding: 0; margin: 0;}p.demo {height: 100px; /*這里的height是塊狀標簽p的高度*/line-height: 100px; /*這里的height是塊狀標簽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 "宋體"; */ /* 此時行高是：30px= 20*1.5 *//*font: 20px/1.5 "宋體"; */font: 20px/40px "宋體";/*

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