1. 程式人生 > >Mr.J--談談CSS和Html(font)

Mr.J--談談CSS和Html(font)

最近刷題一直看見font-xxx和xxx同時出現,每次總會運氣很好的避開正確答案。對於這個font屬性本人表示很迷,簡單總結一下吧。

font-family

font-family 可以把多個字型名稱作為一個“回退”系統來儲存。如果瀏覽器不支援第一個字型,則會嘗試下一個。也就是說,font-family 屬性的值是用於某個元素的字型族名稱或/及類族名稱的一個優先表。瀏覽器會使用它可識別的第一個值。你如果不關心是什麼字型,這個屬性就可以使用

font-weight

設定文字的粗細(bolder設定在父元素的基礎上加粗,lighter則是更細)

使得p段落的文字加粗

font-size

設定元素的字型大小。注意,實際上它設定的是字型中字元框的高度;實際的字元字形可能比這些框高或矮(通常會矮)。

各關鍵字對應的字型必須比一個最小關鍵字相應字型要高,並且要小於下一個最大關鍵字對應的字型。  font-size的作用是為給定字型的em框提供一個大小,而不能保證實際顯示的字元就是這種大小。

font-style

定義字型風格,屬性設定使用斜體、傾斜或正常字型。斜體字型通常定義為字體系列中的一個單獨的字型。理論上講,使用者代理可以根據正常字型計算一個斜體字型。

normal 預設值。瀏覽器顯示一個標準的字型樣式。
italic 瀏覽器會顯示一個斜體的字型樣式。
oblique

瀏覽器會顯示一個傾斜的字型樣式。

font-variant

屬性設定小型大寫字母的字型顯示文字,這意味著所有的小寫字母均會被轉換為大寫,但是所有使用小型大寫字型的字母與其餘文字相比,其字型尺寸更小。

font-stretch

對當前的font-family進行收縮拉伸,只不過所有主流瀏覽器都不支援 font-stretch 屬性。

 

font

font 簡寫屬性在一個宣告中設定所有字型屬性。

css:

html:

以上是在CSS 中設定字型的一些屬性,同樣的在html中也有,只不過語法不同

CSS:


.title{

font-size: 50px;

}

div{text-align: center;}

Html:

<!DOCTYPE html>
<html>
	<!--
    	作者:[email protected]
    	時間:2018-09-16
    	描述:  改變文字背景顏色
    -->
<body style="background-color:PowderBlue;">      
<h1>Look! Styles and colors</h1>
<!--
	作者:[email protected]
	時間:2018-09-16
	描述: 改變文字的字型,顏色,大小
-->
<p style="font-family:verdana;color:red;font-size: 30px;">     
This text is in Verdana and red</p>
</body>
</html>

有些用法也存在相容性問題,例如:在 HTML 4.01 中,不贊成使用 font 元素的 color 屬性;在 XHTML 1.0 Strict DTD 中,不支援 font 元素的 color 屬性。

(圖片來源:《CSS權威指南》)