建站
咨詢
售后
建站咨詢
新聞中心
在三原等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站設(shè)計、成都做網(wǎng)站 網(wǎng)站設(shè)計制作定制網(wǎng)站制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營銷型網(wǎng)站建設(shè),成都外貿(mào)網(wǎng)站建設(shè),三原網(wǎng)站建設(shè)費(fèi)用合理。
- font-family：設(shè)置字體；
- font-style：設(shè)置字體的風(fēng)格，例如傾斜、斜體等；
- font-weight：設(shè)置字體粗細(xì)；
- font-size：設(shè)置字體尺寸；
- font-variant：將小寫字母轉(zhuǎn)換為小型大寫字母；
- font-stretch：對字體進(jìn)行伸縮變形（使用較少，并且主流瀏覽器都不支持）；
- font：字體屬性的縮寫，可以在一個聲明中設(shè)置多個字體屬性。
1. font-family
font-family 屬性用來設(shè)置元素內(nèi)文本的字體。由于字體的種類成千上萬，而且有些還不是免費(fèi)的，因此我們的電腦上幾乎不可能擁有所有的字體。為了最大程度的保證我們設(shè)置的字體能夠正常顯示，可以通過 font-family 屬性定義一個由若干字體名稱組成的列表，字體名稱之間使用逗號
,分隔，瀏覽器會首先嘗試列表中的第一個字體，如果不支持則嘗試下一個，以此類推。
font-family 屬性的可選值如下：
| 值 | 描述 |
|---|---|
| family-name、 generic-family |
family-name：字體名稱，一個字體名稱就代表一種字體，比如“微軟雅黑”就是一種字體； generic-family：字體族，也就是某種類型的字體組合，一個字體族代表一種類型的字體，其中包含很多相似但又不同的字體，比如“sans-serif”就是一種無襯線字體，其中包含很多種相似的字體。 字體的默認(rèn)值取決于瀏覽器設(shè)置 |
| inherit | 從父元素繼承字體的設(shè)置 |
下表中列舉了一些常用的字體族（generic-family）：
| 字體族 | 說明 | 字體 |
|---|---|---|
| serif | 有襯線字體，即在文字筆畫的結(jié)尾添加特殊的裝飾線或襯線 | "Lucida Bright"、"Lucida Fax"、Palatino、"Palatino Linotype"、Palladio、"URW Palladio"、serif |
| sans-serif | 無襯線字體，即在文字筆畫結(jié)尾處是平滑的 | "Open Sans"、"Fira Sans"、"Lucida Sans"、"Lucida Sans Unicode"、"Trebuchet MS"、"Liberation Sans"、"Nimbus Sans L"、sans-serif |
| monospace | 等寬字體，即每個文字的寬度都是相同的 | "Fira Mono"、"DejaVu Sans Mono"、Menlo、Consolas、"Liberation Mono"、Monaco、"Lucida Console"、monospace |
| cursive | 草書字體，該字體有連筆或者特殊的斜體效果，會給人一種手寫的感覺 | "Brush Script MT"、"Brush Script Std"、"Lucida Calligraphy"、"Lucida Handwriting"、"Apple Chancery"、cursive |
| fantasy | 具有特殊藝術(shù)效果的字體 | Papyrus、Herculanum、"Party LET"、"Curlz MT"、Harrington、fantasy |
【示例】使用 font-family 屬性為 HTML 元素設(shè)置字體樣式：
CSS字體
font-family 屬性
運(yùn)行結(jié)果如下圖所示：
圖：font-family 屬性演示
注意：如果字體族或字體名稱中包含空格或多個單詞，則必須將它們使用引號包裹起來，例如"Times New Roman"、"Courier New"、"Segoe UI" 等，如果是在元素的 style 屬性中使用則必須使用單引號。
在網(wǎng)頁設(shè)計中最常用的字體族是 serif 和 sans-serif，因?yàn)樗鼈冞m合閱讀。在顯示一些程序代碼是通常使用等寬字體，這樣可以使用程序代碼看起來更加工整。
2. font-style
font-style 屬性用來設(shè)置字體的樣式，例如斜體、傾斜等，該屬性的可選值如下：
| 值 | 描述 |
|---|---|
| normal | 默認(rèn)值，文本以正常字體顯示 |
| italic | 文本以斜體顯示 |
| oblique | 文本傾斜顯示 |
| inherit | 從父元素繼承字體樣式 |
【示例】使用 font-style 屬性設(shè)置字體的樣式：
CSS字體
normal：顯示一個標(biāo)準(zhǔn)的字體
italic：顯示一個斜體的字體
oblique：顯示一個傾斜的字體
inherit：從父元素繼承字體樣式
運(yùn)行結(jié)果如下圖所示：
圖：font-style 屬性演示
乍看之下，您可能覺得 italic 和 oblique 的效果是一樣的。其實(shí)不然，italic 顯示的字體的斜體版本，而 oblique 則只是一個傾斜的普通字體。
3. font-weight
font-weight 屬性能夠設(shè)置字體的粗細(xì)，可選值如下：
| 值 | 描述 |
|---|---|
| normal | 默認(rèn)值，標(biāo)準(zhǔn)字體 |
| bold | 粗體字體 |
| bolder | 更粗的字體 |
| lighter | 更細(xì)的字體 |
| 100、200、300、400、500、600、700、800、900 | 由細(xì)到粗的設(shè)置字體粗細(xì)，100 為最細(xì)的字體，400 等同于 normal，700 等同于 bold |
| inherit | 從父元素繼承字體的粗細(xì) |
【示例】使用 font-weight 屬性設(shè)置字體粗細(xì)：
CSS字體
font-weight: 100;
font-weight: 200;
font-weight: normal;
font-weight: bold;
font-weight: bolder;
運(yùn)行結(jié)果如下圖所示：
圖：font-weight 屬性演示
4. font-size
font-size 屬性用來設(shè)置字體的大?。ㄗ痔枺?，可選值如下：
| 值 | 描述 |
|---|---|
| xx-small、x-small、small、medium、large、x-large、xx-large | 以關(guān)鍵字的形式把字體設(shè)置為不同的大小，從 xx-small 到 xx-large 依次變大，默認(rèn)值為 medium |
| smaller | 為字體設(shè)置一個比父元素更小的尺寸 |
| larger | 為字體設(shè)置一個比父元素更大的尺寸 |
| length | 以數(shù)值加單位的形式把字體設(shè)置為一個固定尺寸，例如 18px、2em |
| % | 以百分比的形式為字體設(shè)置一個相對于父元素字體的大小 |
| inherit | 從父元素繼承字體的尺寸 |
【示例】使用 font-size 屬性設(shè)置字體的大?。?br />
CSS字體
將字體大小設(shè)置為：xx-small
將字體大小設(shè)置為：x-small
將字體大小設(shè)置為：x-small
將字體大小設(shè)置為：medium
將字體大小設(shè)置為：large
將字體大小設(shè)置為：x-large
將字體大小設(shè)置為：xx-large
將字體大小設(shè)置為：smaller
將字體大小設(shè)置為：larger
將字體大小設(shè)置為 20 像素
運(yùn)行結(jié)果如下圖所示：
圖：font-size 屬性演示
5. font-variant
font-variant 屬性可以將文本中的小寫英文字母轉(zhuǎn)換為小型大寫字母（轉(zhuǎn)換后的大寫字母與轉(zhuǎn)換前小寫字母的大小相仿，所以稱之為小型大寫字母）。font-variant 屬性的可選值如下：
| 值 | 描述 |
|---|---|
| normal | 默認(rèn)值，瀏覽器會顯示一個標(biāo)準(zhǔn)的字體 |
| small-caps | 將文本中的小寫英文字母轉(zhuǎn)換為小型大寫字母 |
| inherit | 從父元素繼承 font-variant 屬性的值 |
【示例】使用 font-variant 屬性設(shè)置小型大寫字母：
CSS字體
This is a paragraph
This is a paragraph
運(yùn)行結(jié)果如下圖所示：
圖：font-variant 屬性演示
6. font
font 屬性與前面價紹的 background 屬性的功能類似，通過 font 屬性可以同時設(shè)置多個字體屬性，不同的是，使用 font 屬性需要遵循以下順序：
font：[[font-style||font-variant||font-weight||font-stretch]?font-size[ /line-height]?font-family] | caption | icon | menu | message-box | small-caption | status-bar
在使用 font 屬性時，有以下幾點(diǎn)需要注意：
- 使用 font 屬性時必須按照如上所示的順序，并且 font-size 和 font-family 兩個屬性不可忽略；
- font 屬性中的每個參數(shù)僅允許設(shè)置一個值，除 font-size 和 font-family 屬性外，被忽略的屬性將被設(shè)置為各自的默認(rèn)值；
- 若要定義 line-height 屬性，則需要使用斜線
/將 font-size 和 line-height 屬性分開。
【示例】使用 font 屬性同時定義多個字體效果：
CSS字體
使用 font 屬性需要遵循以下順序：
font：[[font-style||font-variant||font-weight||font-stretch]?font-size[ /line-height]?font-family] | caption | icon | menu | message-box | small-caption | status-bar
運(yùn)行結(jié)果如下圖所示：
圖：font 屬性演示
標(biāo)題名稱：CSS字體樣式（font）
本文地址：http://m.fisionsoft.com.cn/article/djjdecs.html
