CSS 常見字型樣式屬性的用法詳解

2021-09-27 13:05:42 字數 1749 閱讀 2781

css 字型屬性 font

font-size

font-size: 16px;font(字型),size(大小),用於設定文字的大小;值為數值型,單位有絕對長度單位也有相對長度單位

相對長度單位

單位說明

px畫素,是乙個確定的長度單位,大小為固定的值,常用的單位

em相對於父級元素的字型大小倍數,例如2em表示設定為父級的2倍大小

rem相對根元素(html)的大小倍數

絕對長度單位(了解)

單位說明

in英吋

cm厘公尺

mm公釐pt點

目前谷歌瀏覽器預設的字型大小為16px,不同瀏覽器的預設字型大小可能不一樣,一般通過 body 標籤來指定整個頁面的大小

font-weight

font-weight: notmal;weight(重量),用來給字型加粗,通過 css 來加粗字型是沒有語義的;想要使其有語義可以使用 b 標籤或 strong 標籤

屬性值說明

normal(正常的)

預設值,不對字元加粗

bold(黑體、粗體)

對字元加粗

100~900

重點記住:400 等同於 normal,而 700 等同於 bold

font-family

font-family: arial,simhei,simsun,"microsoft yahei","楷體";family(家族),用於設定字型系列

在 css 中設定字型型別可以直接寫中文,但是在檔案編碼(gb2312、utf-8 等)不匹配時會產生亂碼的錯誤並且 xp 系統不支援 類似微軟雅黑的中文

解決辦法:可以使用英文來代替也可以使用unicode編碼字型

字型名稱

英文名稱

unicode 編碼

宋體simsun

\5b8b\4f53

新宋體nsimsun

\65b0\5b8b\4f53

黑體simhei

\9ed1\4f53

微軟雅黑

microsoft yahei

\5fae\8f6f\96c5\9ed1

楷體_gb2312

kaiti_gb2312

\6977\4f53_gb2312

示例:font-family: arial,"\9ed1\4f53","\5b8b\4f53"

font-style

font-style: normal;style(風格、樣式),用於設定字型的樣式

屬性值說明

normal

預設值,無字型樣式

italic(斜體字)

以斜體字的樣式顯示

font 綜合設定

可以用 font 屬性對字型樣式進行綜合設定

語法:

選擇器

使用font屬性時,必須按上述語法格式中的順序書寫,不能更換順序,各個屬性用空格隔開

不需要設定的屬性可以省略(會取預設值),但必須保留font-sizefont-family屬性,否則font屬性不起作用

示例:

div

CSS字型樣式屬性

font size字型大小大小 一般推薦使用相對長度 px em 不推薦使用絕對長度 in,cmm,mm,pt font family字型 1.可以同時指定多個字型,中間用英文狀態的逗號隔開,英文本型一般不需要加引號,中文字型需要新增英文狀態下的引號,當需要設定英文本型時,英文本型必須位於中文字型之...

css字型樣式屬性

font size 字型大小大小 font size 字型大小大小用於設定字型大小,該屬性可以用相對長度單位 也可以使用絕對長度單位。其中相對長度單位比較常用,推薦使用畫素單位px,絕對長度用得相對較少。相對長度單位有 em px,推薦使用px font family 字型設定 font famil...

CSS字型樣式屬性

font size屬性用於設定字型大小,該屬性的值可以使用相對長度單位,也可以是使用苦厄對長度單位。其中,較為常用的是相對長度單位,推薦使用畫素單位px,在實際應用中,絕對長度單位使用較少。使用方法 p 相對長度單位 說明em 相對於當前物件內文字字型的尺寸 px畫素 最常用 絕對長度單位 說明in...