CSS基础(part7)--字体样式属性
學習筆記，僅供參考，有錯必糾
參考自：CSS中文文檔
文章目錄
- CSS
- CSS的長度單位
- 字體樣式屬性
- font-size
- font-family
- font-weight
- font-style
- font:綜合設置字體樣式
CSS
CSS的長度單位
- 絕對長度
cm：厘米
mm：毫米
in：英寸
pc：派卡
- 相對長度
px：像素點，像素就是顯示器顯示的一個點；
若把影像放大數倍，會發現這些連續色調其實是由許多色彩相近的小方點所組成，這些小方點就是構成影像的最小單位像素。這種最小的圖形的單元能在屏幕上顯示通常是單個的染色點。像素的大小是會變的，也稱為相對長度。越高位的像素，其擁有的色板也就越豐富，越能表達顏色的真實感。-- 百度百科
em：1em默認為16px，如果我們設置font-size為1.5em，那么當前元素的字體大小為24px(16*1.5)
- 單位之間的關系
字體樣式屬性
font-size
font-size屬性用于設置不同HTML元素的字體大小。
- 屬性值
- xx-small
- x-small
- small
- medium(默認)
- large
- x-large
- xx-large
- 舉個例子
頁面：
font-family
font - family屬性可以指定一個元素的字體。
在網頁中常使用的字體有宋體、微軟雅黑、黑體等，例如，將網頁中所有p標簽下的字體設置為微軟難黑，可以使用如下CSS樣式代碼：
p { font-family: "微軟雅黑"; }我們可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體。如果字體名稱包含空格或中文，則應使用引號括起，例如：
p { font-family: Verdana, Arial, "宋體"; }- 注意事項
- 各種字體之間必須使用英文狀態下的逗號隔開；
- 中文字體需要加英文狀態下的引號，英文字體一般不需要加引號，當需要設置英文字體時，英文字體名必須位于中文字體名之前；
- 如果字體名中包含空格、#、$ 等符號，則該字體必須加英文狀態下的單引號或雙引號，例如font-family: "Times New Roman"；
- 盡量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示；
- 在CSS中設置字體名稱，可以直接寫中文。但是在文件編碼(GB2312, UTF-8)不匹配時會產生亂碼的錯誤，所以，在CSS中直接使用Unicode編碼來編寫字體名稱可以避免這些錯誤。使用Unicode編寫中文字體名稱，瀏覽器是可以正確的解析的。
- 如何把中文轉換為Unicode編碼格式
打開瀏覽器開發工具DevTools，進入控制臺Console：
使用escape()函數，將中文字符轉換為Unicode編碼格式：
這時，在html頁面中，我們就可以這樣寫：
p { font-family: "%u9ED1%u4F53"; }- 中英Unicode對應
- 襯線體與無襯線體
西方國家字母體系分為兩類：襯線字體（serif）以及無襯線體（sans serif）
襯線字體，意思是在字的筆畫開始、結束的地方有額外的裝飾，而且筆畫的粗細會有所不同。
無襯線體是無襯線字體，沒有這些額外的裝飾，而且筆畫的粗細差不多。
圖示：
我們看一看下面這行代碼：
p { font-family: tahoma, arial, sans-serif; }上面這段代碼的意思是，當瀏覽器不支持前面兩個字體時，將會在無襯線體體系中挑選一個字體作為默認字體，如果在sans-serif之后有其他字體，則其他字體均失效。
- 舉個例子
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS</title><style>h1 {font-family: "微軟雅黑";}#datam {/*font-family: "宋體";*/font-family: "Lucida Console", "宋體";/*怎么才能解決 多系統下面不同字體的兼容問題？*/}div p {font-family: "%u9ED1%u4F53";}</style></head> <body><h1>兔兔之家</h1><p id="datam">數據挖掘是指從大量的數據中通過算法搜索隱藏于其中信息的過程。數據挖掘通常與計算機科學有關，并通過統計、在線分析處理、情報檢索、機器學習、專家系統</p><div><p>需要是發明之母。近年來，數據挖掘引起了信息產業界的極大關注，其主要原因是存在大量數據，可以廣泛使用，并且迫切需要將這些數據轉換成有用的信息和知識。獲取的信息和知識可以廣泛用于各種應用，包括商務管理，生產控制，市場分析，工程設計和科學探索等</p></div></body> </html>
頁面：
font-weight
font-weight 屬性可以設置文本的粗細。
- 屬性值
- normal
- bold
- bolder
- lighter
- 100 ~ 900(定義由粗到細的字符，400 等同于 normal，而 700 等同于bold)
- 注意事項
字體的加粗跟字體有關，比如：一種字體只有兩種粗細程度的變化，那么無論是normal到bold，還是normal到bolder都是一樣的。
- 實例
font-style
font-style屬性用于指定文本的字體風格，比如，設置斜體、傾斜或者正常字體。
- 屬性值
- normal(默認值)
- italic(斜體的字體樣式)
- oblique(傾斜的字體樣式)
- inherit(從父元素繼承字體樣式)
- 舉個例子
頁面：
好吧，這兩個屬性值看起來得到的效果是一樣的啊，那它們的區別在哪呢？
- oblique和italic的區別(參考自：italic 和 oblique 的區別)
一些字體有粗體、斜體、下劃線、刪除線等諸多屬性，但是并不是所有字體都都有這些屬性，一些不常用的字體，或許就只有一個正常體，如果我們使用 italic，則不會產生效果。
這時候我們就需要用oblique，可以理解成 italic 是使用文字的斜體屬性，而oblique是讓沒有斜體屬性的文字傾斜。
font:綜合設置字體樣式
font屬性可以在一個聲明中設置所有字體屬性，它的格式為：
選擇器 { font: font-style font-weight font-size/line-height font-family; }使用font屬性時，必須按上面語法格式(字體樣式 字體是否加粗 字體大小 字體類型)中的順序書寫，各個屬性以空格隔開。
其中不需要設置的屬性可以省略(它們取默認值)，但必須保留font-size和font-family屬性，否則font屬性將不起作用。
- 舉個例子
頁面：
總結
以上是生活随笔為你收集整理的CSS基础(part7)--字体样式属性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 联通手机号如何办理挂失
- 下一篇： CSS基础(part8)--文本外观属性