css字體符号使用-tft每日頭條

1.字體大小(font-size)

font-size屬性用于設置字号，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位。其中，相對長度單位比較常用，推薦使用像素單位px，絕對長度單位使用較少。具體如下：
1em 等于當前的字體尺寸。如果一個元素的 font-size 為 16 像素，那麼對于該元素，1em 就等于 16 像素。在設置字體大小時，em 的值會相對于父元素的字體大小改變。浏覽器中默認的文本大小是 16 像素。因此 1em 的默認尺寸是 16 像素。可以使用這個公式将像素轉換為 em：px/16=em（注：16 等于父元素的默認字體大小，假設父元素的 font-size 為 20px，那麼公式需改為：px/20=em）

css字體符号使用（6.CSS字體屬性）1

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <Title>Title</title> <style> .my-font-size{ font-size: 28px; }</style></head><body> <div>碼海無際</div> <div class="my-font-size">碼海無際</div></body></html>

css字體符号使用（6.CSS字體屬性）2

2.定義字體(font-family)

font-family屬性用于設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等。
可以同時指定多個字體，中間以逗号隔開，表示如果浏覽器不支持第一個字體，則會嘗試下一個，直到找到合适的字體。
在 CSS 中設置字體名稱，直接寫中文是可以的。但是在文件編碼（GB2312、UTF-8 等）不匹配時會産生亂碼的錯誤。xp 系統不支持類似微軟雅黑的中文。可以使用英文來替代。比如 font-family:"Microsoft Yahei"。直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤。使用 Unicode 寫中文字體名稱，浏覽器是可以正确的解析的，font-family: "\5FAE\8F6F\96C5\9ED1"，表示設置字體為“微軟雅黑”。

css字體符号使用（6.CSS字體屬性）3

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .my-font-family{ /*font-family: 宋體;*/ /*font-family: SimSun;*/ /*font-family: \5B8B\4F53;*/ font-family: \5B8B\4F53,\9ED1\4F53; }</style></head><body> <div>碼海無際</div> <div class="my-font-family">碼海無際</div></body></html>

css字體符号使用（6.CSS字體屬性）4

3.字體加粗(font-weight)

範圍值 100 ~ 900 為字體指定了加粗級别。如果一個字體内置了這些加粗級别，那麼這些數字就直接映射到預定義的級别，100 對應最細的字體變形，900 對應最粗的字體變形。數字 400 等價于 normal，而 700 等價于 bold。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .my-font-weight{ /*font-weight: bold;*/ font-weight: 700; }</style></head><body> <div>碼海無際</div> <div class="my-font-weight">碼海無際</div></body></html>

css字體符号使用（6.CSS字體屬性）5

4.字體風格(font-style)

常用于設置斜體文本，該屬性有三個值：

normal - 文本正常顯示
italic - 文本斜體顯示
oblique - 文本傾斜顯示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .my-font-style{ font-style: italic; }</style></head><body> <div>碼海無際</div> <div class="my-font-style">碼海無際</div></body></html>

css字體符号使用（6.CSS字體屬性）6

5.綜合設置字體樣式 (font)

font屬性用于對字體樣式進行綜合設置
可設置的屬性是（按順序）："font-style font-weight font-size/line-height font-family"
font-size和font-family的值是必需的。如果缺少了其他值，默認值将被插入，如果有默認值的話。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .my-font-one { font-style: italic; font-weight: bold; font-size: 20px; font-family: 宋體; } .my-font-two { font: italic bold 20px 宋體; } .my-font-three { font: 20px 宋體; }</style></head><body> <div>碼海無際</div> <div class="my-font-one">碼海無際</div> <div class="my-font-two">碼海無際</div> <div class="my-font-three">碼海無際</div></body></html>

css字體符号使用（6.CSS字體屬性）7