CSS 基礎(chǔ)教程

CSS 盒子模型

CSS3基礎(chǔ)教程

CSS 參考手冊(cè)

CSS @規(guī)則(RULES)

CSS Fonts(字體)

CSS字體屬性允許您為字體設(shè)置各種樣式,例如文本的字體系列,大小和粗體,變體等。

字體屬性

在CSS樣式為文本內(nèi)容的字體,如提供幾個(gè)屬性:font-familyfont-style,font-variant,font-weightfont-size。下一節(jié)將逐一介紹這些屬性。

字體系列

font-familyCSS屬性允許您設(shè)置文本內(nèi)容的字體系列名稱,字體使用的優(yōu)先級(jí)列表。

font-family屬性可以包含多個(gè)字體名稱作為后備字體。首先列出您想要的字體,然后列出所有字體(如果不可用)。如果瀏覽器不支持第一種字體,他將嘗試下一種字體。字體系列聲明可能如下所示:

p {
    font-family: "Times New Roman", Times, serif;
}
測(cè)試看看?/?

注:如果字體系列的名稱超過(guò)一個(gè)單詞,它必須用引號(hào)引起來(lái),像"Times New Roman","Courier New""Trebuchet MS"等等。

了解有關(guān)常用字體組合的更多信息;請(qǐng)檢查網(wǎng)絡(luò)安全字體。

字體樣式

通過(guò)font-style屬性設(shè)置元素的文本內(nèi)容的字體樣式。

此屬性的可能值為:normalitalicoblique。

p.one {
    font-style: normal;
}
p.two {
    font-style: italic;
}
p.three {
    font-style: oblique;
}
測(cè)試看看?/?

注意:乍看之下,斜式和斜體樣式看起來(lái)是一樣的,但是有所不同。該italic樣式使用的斜體版本的字體,而oblique在另一方面文本僅僅是一個(gè)傾斜的版本正常的字體。

字體大小

font-size屬性設(shè)置元素文本內(nèi)容的字體大小。

有幾種方法可以指定字體大小值,例如,使用關(guān)鍵字,像素或ems。

使用關(guān)鍵字設(shè)置字體大小

通過(guò)在body元素上設(shè)置關(guān)鍵字字體大小,可以在頁(yè)面上其他任何地方設(shè)置相對(duì)字體大小,從而可以輕松地在整個(gè)頁(yè)面上相應(yīng)地縮放字體。使用以下關(guān)鍵字之一指定一個(gè)絕對(duì)的大小:xx-small,x-small,small,mediumlarge,x-large,xx-large。

相對(duì)尺寸是使用以下關(guān)鍵字之一指定的:smaller、、larger。

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}
測(cè)試看看?/?

用像素設(shè)置字體大小

當(dāng)需要像素精度時(shí),以像素值(例如12px,16px等)設(shè)置字體大小是一個(gè)不錯(cuò)的選擇。但是,結(jié)果可能會(huì)因?yàn)g覽器而有所不同,因?yàn)樗鼈兪褂貌煌乃惴▉?lái)實(shí)現(xiàn)類(lèi)似的效果。

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}
測(cè)試看看?/?

可以通過(guò)定義以像素為單位的字體大小,但是這種方式不是很靈活,因?yàn)橛脩魺o(wú)法通過(guò)瀏覽器設(shè)置更改字體大小。例如,視力不佳的用戶可能希望將字體大小設(shè)置為大于您指定的大小。因此,如果要?jiǎng)?chuàng)建包含設(shè)計(jì),則應(yīng)避免將像素值用于字體大小。

提示:可以使用縮放工具在所有瀏覽器中調(diào)整文本大小。但是,此功能將調(diào)整整個(gè)頁(yè)面的大小,而不僅僅是文本。

用Em設(shè)置字體大小

em單位是指父元素的字體大小。

em值的大小是動(dòng)態(tài)的。定義font-size屬性時(shí),an em等于應(yīng)用于元素父級(jí)的字體的大小。

如果font-size在body元素上設(shè)置a 為20px,則1em=20px2em=40px

如果您沒(méi)有在頁(yè)面上的任何地方設(shè)置字體大小,則它是瀏覽器的默認(rèn)值,是16px。因此,默認(rèn)為1em=16px2em=32px。

h1 {
    font-size: 2em;    /* 32px/16px=2em */
}
p {
    font-size: 0.875em;    /* 14px/16px=0.875em */
}
測(cè)試看看?/?

警告: IE6和IE7放大了大小調(diào)整后的文本的大小。(在發(fā)布之前最后進(jìn)行測(cè)試)。

使用百分比和Em的組合

在所有瀏覽器中實(shí)現(xiàn)類(lèi)似效果的解決方案是font-size為body元素設(shè)置默認(rèn)的百分比。一種流行的技術(shù)是font-size將body的設(shè)置為62.5%(即默認(rèn)16px的62.5%),等于10px或0.625em。

現(xiàn)在,您可以設(shè)置font-size通過(guò)將使用em單位的任何元素,具有易于記憶的轉(zhuǎn)換,px通過(guò)10值通過(guò)這種方式10px=1em,12px=1.2em,14px=1.4em,16px=1.6em,等。請(qǐng)參閱以下示例:

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.6em;    /* 1.6em = 16px */
}
測(cè)試看看?/?

提示:萬(wàn)維網(wǎng)聯(lián)盟(W3C)建議使用EM或百分比(%)值,以創(chuàng)造更強(qiáng)大的,可擴(kuò)展的布局。

字體粗細(xì)

font-weight屬性指定字體的粗細(xì)或粗體。

font-style屬性的可能值是:normal,bold,bolderlighter,100200,300,400,500,600,700,800,900inherit。

  • 數(shù)值100- 900指定字體粗細(xì),其中每個(gè)數(shù)字表示比其前身暗的粗細(xì)。400normal700相同bold

  • bolderlighter,而其他的值是絕對(duì)字體權(quán)值是相對(duì)于繼承字體粗細(xì)。

p {
    font-weight: bold;
}
測(cè)試看看?/?

由于大多數(shù)字體只能以有限的重量使用。通常,它們僅以普通粗體顯示。如果字體在指定的重量中不可用,則將選擇一個(gè)代替字體,它是最接近的可用重量。

字體變體

font-variant屬性允許以特殊的大寫(xiě)字母形式顯示文本。

小寫(xiě)大寫(xiě)字母或小寫(xiě)大寫(xiě)字母與普通大寫(xiě)字母稍有不同,在普通大寫(xiě)字母中,小寫(xiě)字母顯示為相應(yīng)大寫(xiě)字母的較小版本。

font-variant屬性的值可能是normalsmall-capsinherit。

p {
    font-variant: small-caps;
}
測(cè)試看看?/?
丰满人妻一级特黄a大片,午夜无码免费福利一级,欧美亚洲精品在线,国产婷婷成人久久Av免费高清