html中設定字體的屬性:font、font-family、font-size、font-style、font-variant、font-weight、「@font-face」、font-size-adjust、font- stretch。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
字體屬性定義字體,加粗,大小,文字樣式。
html中設定字體的屬性
#屬性 | 說明 |
---|---|
#font | 在一個宣告中設定所有字體屬性 |
font-family | 規定文字的字體系列 |
font-size | 規定文字的字體尺寸 |
font-style | 規定文字的字體樣式 |
#font-variant | 規定文字的字型樣式。設定小型大寫字母的字體顯示文本,這意味著所有的小寫字母均會被轉換為大寫,但是所有使用小型大寫字體的字母與其余文本相比,其字體尺寸更小。 |
font-weight | 規定字體的粗細 |
@font-face | #一個規則,允許網站下載並使用其他超過"Web- safe"字體的字體 |
font-size-adjust | 為元素規定aspect 值。為某個元素規定一個 aspect 值,這樣就可以保持首選字體的 x-height。 |
font-stretch | 縮小或拉伸目前的字體系列。對目前的 font-family 進行伸縮變形。所有主流瀏覽器都不支援。 |
擴充資料:
在HTML/CSS中,有兩種類型的字型系列名稱:
通用字體系列- 擁有相似外觀的字體系統組合(如"Serif" 或"Monospace")
特定字體系列- 一個特定的字體系列(如"Times" 或"Courier")
#Generic family | 字體系列 | 說明 |
---|---|---|
Serif |
Times New Roman #Georgia |
Serif字體中字元在行的末端擁有額外的裝飾 |
Sans-serif |
Arial Verdana |
"Sans"是指無- 這些字體在末端沒有額外的裝飾 |
Monospace |
#Courier New Lucida Console |
所有的等寬字元具有相同的寬度 |
font-family 屬性應該設定幾個字體名稱作為一種"後備"機制,如果瀏覽器不支援第一種字體,他將嘗試下一種字體。
注意: 如果字體系列的名稱超過一個字,它必須用引號,如Font Family:"宋體"。
多個字體系列是用一個逗號分隔指明:
p{font-family:"Times New Roman", Times, serif;}
下面是一些常用的字體組合,通用的字體系列。
Serif 字型
字型 | #文字範例 |
---|---|
Georgia, serif |
This is a headingThis is a paragraph |
"Palatino Linotype", "Book Antiqua", Palatino, serif |
This is a headingThis is a paragraph |
"Times New Roman", Times, serif | #This is a headingThis is a paragraph |
sans - serif 字體
字體 | 文字範例 |
---|---|
Arial、Helvetica、sans-serif | ##這是一個標題這是一個段落 |
這是一個標題這是一個段落 | |
這是一個標題 |
這是一個段落 | ##Impact、木炭、無襯線
#這是一個標題 | 這是一個段落 | "Lucida Sans Unicode"、"Lucida Grande"、sans-serif
這是一個標題 | 這是一個段落 | #Tahoma、Geneva、無襯線
#這是一個標題 | 這是一個段落 | #“Trebuchet MS”,Helvetica,無襯線
#這是一個標題 | 這是一個段落 | #Verdana、Geneva、無襯線
#這是一個標題 | This是一個段落 |
##“Courier New”,Courier,等寬字體 | |
---|---|
這是一個段落 |
##“Lucida Console”,摩納哥,等寬字體##這是一個標題 |
(學習影片分享: css影片教學 ) |
以上是html中設定字體的屬性有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!