首頁 > web前端 > 前端問答 > html中設定字體的屬性有哪些

html中設定字體的屬性有哪些

青灯夜游
發布: 2021-12-13 14:41:46
原創
10712 人瀏覽過

html中設定字體的屬性:font、font-family、font-size、font-style、font-variant、font-weight、「@font-face」、font-size-adjust、font- stretch。

html中設定字體的屬性有哪些

本教學操作環境: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 heading

This is a paragraph

"Palatino Linotype", "Book Antiqua", Palatino, serif

This is a heading

This is a paragraph

"Times New Roman", Times, serif

#This is a heading

This is a paragraph

#

sans - serif 字體

Arial Black、Gadget、sans-serif##"Comic Sans MS"、草書、無襯線這是一個標題##Impact、木炭、無襯線"Lucida Sans Unicode"、"Lucida Grande"、sans-serif#Tahoma、Geneva、無襯線#“Trebuchet MS”,Helvetica,無襯線#Verdana、Geneva、無襯線Monospace 字型
字體 文字範例
Arial、Helvetica、sans-serif ##這是一個標題

這是一個段落

這是一個標題

這是一個段落

這是一個段落

#這是一個標題 這是一個段落

這是一個標題 這是一個段落

#這是一個標題 這是一個段落

#這是一個標題 這是一個段落

#這是一個標題 This是一個段落

# 字型 文字範例##“Courier New”,Courier,等寬字體這是一個標題這是一個段落
這是一個段落

##“Lucida Console”,摩納哥,等寬字體

##這是一個標題

(學習影片分享:

css影片教學

以上是html中設定字體的屬性有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板