03 CSS樣式之字型樣式

2021-10-08 17:23:54 字數 1602 閱讀 3640

屬性

含義font-sytle字型風格

font-weight字型粗細

font-size字型大小

font-family字型樣式

font綜合設定

以上1、font-style 字型風格

[1]normal 正常字型(一般把傾斜字型變為普通字型)

[2]italic傾斜字型(不常用)

舉例

快樂最重要

漂亮最重要

現在快樂最重要 我們使用標籤將其變為傾斜體,漂亮最重要為正常字型;現在將這兩個形式顛倒。

"normal"

>快樂最重要

"italic"

>漂亮最重要

2、font-weight 字型粗細[1]normal 正常字型;

[2]bold 加粗字型;

[3]100-900根據數值決定字型大小;400表示normal、700表示bold;

[4]bolder 比加粗字型稍粗;

[5]lighter 比加粗字型稍細;

[6]舉例

上圖的文字都是normal正常字型的,現在通過bold和700體會加粗效果;

"normal"

>快樂最重要

"italic"

>漂亮最重要

效果:

3、font-size 字型大小1)存在多種單位,一般用px;

2)谷歌瀏覽器的預設字型為16px(注:不同瀏覽器的預設字型不同),一般直接設定body標籤的字型;

[3]舉例:一般直接在body中設定16px,如果個別有需要再進行修改。

現在將漂亮最重要字型大小加大體驗效果;

快樂最重要

"beautiful"

>漂亮最重要

4、font-famliy 字型樣式eg:

5、綜合設定

1)按照順序;

swsf 後兩個不能省略

6、總結

CSS基礎03 CSS字型屬性

css fonts 字型 屬性用於定義字型系列 大小 粗細 文字樣式 如斜體等 css使用font family屬性定義文字的字型系列。pstyle css使用 font size屬性設定字型大小 pstyle css使用 font weight屬性來設定字型粗細,屬性值有normal 正常字型,相...

css字型樣式

注 以下的字型樣式只可在ie中使用。刪除線刪除線 加上背景色 加上背景色 左右翻轉效果 左右翻轉效果 上下翻轉效果 上下翻轉效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發...

css 字型樣式

通常使用絕對大小定義文件的基準字型大小,然後使用相對大小定義其它文字 如 定義文件預設字型大小為12培訓,位150 則呈現12px大小,呈現為18px的大小 常用技巧 中文網頁的字型大小設定,通常使用偶書字型大小,以避免文字邊緣出現毛邊,如14px或22px 在pc端設定字型大小最小值為12px,在...