CSS font 屬性 · W3School CSS 參考手冊

# CSS font 屬性 ## 實例在一個聲明中設置所有字體屬性： ``` p.ex1 { font:italic arial,sans-serif; } p.ex2 { font:italic bold 12px/20px arial,sans-serif; } ``` ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有瀏覽器都支持 font 屬性。注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。 ## 定義和用法 font 簡寫屬性在一個聲明中設置所有字體屬性。注釋：此屬性也有第六個值："line-height"，可設置行間距。 ### 說明這個簡寫屬性用于一次設置元素字體的兩個或更多方面。使用 icon 等關鍵字可以適當地設置元素的字體，使之與用戶計算機環境中的某個方面一致。注意，如果沒有使用這些關鍵詞，至少要指定字體大小和字體系列。可以按順序設置如下屬性： * font-style * font-variant * font-weight * font-size/line-height * font-family 可以不設置其中的某個值，比如 font:100% verdana; 也是允許的。未設置的屬性會使用其默認值。 | 默認值： | _not specified_ | | --- | --- | | 繼承性： | yes | | --- | --- | | 版本： | CSS1 | | --- | --- | | JavaScript 語法： | _object_.style.font="italic small-caps bold 12px arial,sans-serif" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | _font-style_ | 規定字體樣式。參閱：[font-style](/cssref/pr_font_font-style.asp "CSS font-style 屬性") 中可能的值。 | | _font-variant_ | 規定字體異體。參閱：[font-variant](/cssref/pr_font_font-variant.asp "CSS font-variant 屬性") 中可能的值。 | | _font-weight_ | 規定字體粗細。參閱：[font-weight](/cssref/pr_font_weight.asp "CSS font-weight 屬性") 中可能的值。 | | _font-size/line-height_ | 規定字體尺寸和行高。參閱：[font-size](/cssref/pr_font_font-size.asp "CSS font-size 屬性") 和 [line-height](/cssref/pr_dim_line-height.asp "CSS line-height 屬性") 中可能的值。 | | _font-family_ | 規定字體系列。參閱：[font-family](/cssref/pr_font_font-family.asp "CSS font-family 屬性") 中可能的值。 | | caption | 定義被標題控件（比如按鈕、下拉列表等）使用的字體。 | | icon | 定義被圖標標記使用的字體。 | | menu | 定義被下拉列表使用的字體。 | | message-box | 定義被對話框使用的字體。 | | small-caption | caption 字體的小型版本。 | | status-bar | 定義被窗口狀態欄使用的字體。 | ## TIY 實例 [所有字體屬性在一個聲明之內](/tiy/t.asp?f=csse_font) 本例演示如何使用簡寫屬性將字體屬性設置在一個聲明之內。 ``` <html> <head> <style type="text/css"> p.ex1 { font:italic arial,sans-serif; } p.ex2 { font:italic bold 12px/30px arial,sans-serif; } </style> </head> <body> <p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p> <p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p> </body> </html> ``` [設置使用 "caption" 值的段落字體](/tiy/t.asp?f=csse_font_caption) 本例演示如何設置使用 "caption" 值的段落字體。 ``` <html> <body> <p>This is a normal paragraph</p> <p style="font: caption">This is a paragraph with a "caption" font</p> </body> </html> ``` ## 相關頁面 CSS 教程：[CSS 字體](/css/css_font.asp "CSS 字體") HTML DOM 參考手冊：[font 屬性](/jsref/prop_style_font.asp "HTML DOM font 屬性")