tft每日頭條

 > 圖文

 > css切換字體樣式

css切換字體樣式

圖文 更新时间:2025-02-08 03:52:56

本節我們來講字體樣式,之前我們學習 HTML 的時候學過一些用于字體加粗、傾斜的标簽,但是使用标簽來實現的效果肯定沒有我們通過 CSS 中的樣式來的方便。

接下來我們會給大家介紹下面這幾個屬性的使用:

css切換字體樣式(CSS字體樣式)1

通過學習上述這幾個 CSS 屬性,我們可以實現給 HTML 中的文字設置字體、大小、風格、傾斜、加粗等。

font-family

font-family 屬性用于設置一個元素的字體,字體就是像宋體、楷體等。

通過 font-family 屬性,可以同時聲明多種字體,字體之間使用逗号分隔。根據字體的調用原則,會優先調用第一種字體,如果沒有找到,則會嘗試調用下一個字體,如果都找不到則調用默認字體。

示例:

例如為下面這個 <p> 标簽中的文本設置字體:

<p>Hello,俠課島</p>

可以使用标簽選擇器,然後在 font-family 屬性中設置:

p{ font-family:'Times New Roman','sans-serif', 宋體, 楷體; }

在聲明字體時,我們應該分别聲明英文字體和中文字體,且英文字體的聲明應該在中文字體之前。因為絕大部分中文字體裡包含英文字母,但是不是很好看,而英文字體裡不包含中文字符。所以如果我們不希望用中文字體來顯示英文,就一定要記得先聲明英文字體。先聲明的會先調用。

常用英文字體:Arial、Helvetica、Tahoma、Verdana、Lucida Grande、Georgia 等。

常用中文字體:宋體 SimSun、黑體 SimHei、微軟雅黑 Microsoft YaHei、仿宋 FangSong、楷體 KaiTi 等。

font-size

font-size 屬性用于設置字體的大小,常用的單位為 px,即像素。

px 是 Pixel 的縮寫,是可以在數字顯示設備上顯示和表示的數字圖像或圖形的最小單位。像素是數字圖形中的基本邏輯單元,像素也稱為圖像元素。

示例:

例如我們來看下面這段代碼(其他HTML結構代碼沒有展示出來):

<body> <h1>斷句</h1> <p>近水樓台先得月,向陽花木易為春。</p> </body>

在浏覽器中的演示效果為:

css切換字體樣式(CSS字體樣式)2

然後此時,我們通過 font-size 來将其中的 <h1> 标簽中的字體設置為 14px,<p> 标簽中的字體設置為 20px:

h1{ font-size: 14px; } p{ font-size: 20px; }

在浏覽器中演示效果就變為了下圖所示:

css切換字體樣式(CSS字體樣式)3

很明顯,通過 CSS 中的 font-size 屬性可以設置任意标簽中的字體大小。

font-style

font-style 設置字體的風格,可以将字體設置成斜體、傾斜或正常字體。斜體字體通常定義為字體系列中的一個單獨的字體。

此屬的常用屬性值如下所示:

css切換字體樣式(CSS字體樣式)4

示例:

将下面三個 <p> 中的内容設置為不同的字體風格,可以使用類選擇器:

<body> <p class="normal">将字體設置為标準的字體樣式</p> <p class="italic">将字體設置為斜體的字體樣式</p> <p class="oblique">将字體設置為傾斜的字體樣式</p> </body>

CSS 樣式代碼:

.normal { font-style:normal; } .italic { font-style:italic; } .oblique { font-style:oblique; }

在浏覽器中演示效果如下所示:

css切換字體樣式(CSS字體樣式)5

font-weight

font-weight 屬性用于設置顯示元素的文本中所用的字體加粗。

此屬性的常用屬性值如下所示:

css切換字體樣式(CSS字體樣式)6

示例:

将下面的 <p> 标簽的粗細分别設置為 normal、bold、700、900:

<p class="w1">将字體設置為:normal</p> <p class="w2">将字體設置為:bold</p> <p class="w3">将字體設置為:700</p> <p class="w4">将字體設置為:900</p>

CSS 樣式代碼:

.w1 { font-weight: normal; } .w2 { font-weight: bold; } .w3 { font-weight: 700; } .w4 { font-weight: 900; }

在浏覽器中演示效果:

css切換字體樣式(CSS字體樣式)7

font

font 屬性用于在一個聲明中設置所有的字體屬性,各個屬性之間使用空格隔開。也就是上述幾個屬性的綜合簡寫屬性。

如果我們使用 font 屬性來設置字體樣式,設置順序分别是:font-style、font-variant、font-weight、 font-size/line-height、font-family。可以不設置其中的某個值,未設置的屬性會使用其默認值。

示例:

<p class="p1">草長莺飛二月天,拂堤楊柳醉春煙。</p> <p class="p2">留連戲蝶時時舞,自在嬌莺恰恰啼。</p>

CSS 樣式代碼:

.p1{ font: italic bold 20px 'sans-serif', 楷體; } .p2{ font: bold 14px 'Arial', 宋體; }

在浏覽器中演示效果:

css切換字體樣式(CSS字體樣式)8

注意,在使用 font 屬性時,font-size 和 font-family 的值是必需的,如果沒有設置這兩個屬性值,則不會生效。

總結

本節學習的幾個屬性值都是 CSS 中最基本的屬性,特别是 font-size 屬性,我們會經常用到。一般浏覽器會有一個默認的字體大小,例如 16px,而編寫頁面時如果我們希望大部分頁面内容正文字體大小為 12px 或 14px,就會在 <body> 标簽上設置,這樣就不用一個個标簽去設置。

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关圖文资讯推荐

热门圖文资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved