您好,登錄后才能下訂單哦!
這篇文章給大家介紹如何在html中設置字體的屬性,內容非常詳細,感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
html中設置字體的屬性:font、font-family、font-size、font-style、font-variant、font-weight、“@font-face”、font-size-adjust、font-stretch。
字體屬性定義字體,加粗,大小,文字樣式。
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 | This is a headingThis is a paragraph |
Arial Black, Gadget, sans-serif | This is a headingThis is a paragraph |
"Comic Sans MS", cursive, sans-serif | This is a headingThis is a paragraph |
Impact, Charcoal, sans-serif | This is a headingThis is a paragraph |
"Lucida Sans Unicode", "Lucida Grande", sans-serif | This is a headingThis is a paragraph |
Tahoma, Geneva, sans-serif | This is a headingThis is a paragraph |
"Trebuchet MS", Helvetica, sans-serif | This is a headingThis is a paragraph |
Verdana, Geneva, sans-serif | This is a headingThis is a paragraph |
Monospace 字體
字體 | 文本示例 |
---|---|
"Courier New", Courier, monospace | This is a headingThis is a paragraph |
"Lucida Console", Monaco, monospace | This is a headingThis is a paragraph |
關于如何在html中設置字體的屬性就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。