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權威指南》)