font | CSS

在此页

组成特性
句法
形式定义
形式句法
范例
规范
浏览器兼容性
相关话题

font CSS shorthand property sets all the different properties of an element's font. Alternatively, it sets an element's font to a system font.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

As with any shorthand property, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). Though not directly settable by font , the longhands font-size-adjust and font-kerning are also reset to their initial values.

组成特性

此特性是下列 CSS 特性的简写：

句法

font property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties.

若 font is specified as a system keyword, it must be one of: caption , icon , menu , message-box , small-caption , status-bar .

若 font is specified as a shorthand for several font-related properties, then:

it must include values for:
- <font-size>
- <font-family>
it may optionally include values for:
font-style , font-variant and font-weight must precede font-size
font-variant may only specify the values defined in CSS 2.1, that is normal and small-caps
font-stretch may only be a single keyword value.
line-height must immediately follow font-size , preceded by "/", like this: " 16px/3 "
font-family must be the last value specified.

值

<'font-style'>: 见 font-style CSS property.
<'font-variant'>: 见 font-variant CSS property.
<'font-weight'>: 见 font-weight CSS property.
<'font-stretch'>: 见 font-stretch CSS property.
<'font-size'>: 见 font-size CSS property.
<'line-height'>: 见 line-height CSS property.
<'font-family'>: 见 font-family CSS property.

System font values

caption
icon
menu
message-box
small-caption
status-bar
Prefixed system font keywords: Browsers often implement several more, prefixed, keywords: Gecko implements -moz-window , -moz-document , -moz-desktop , -moz-info , -moz-dialog , -moz-button , -moz-pull-down-menu , -moz-list ，和 -moz-field .

形式定义

初始值	as each of the properties of the shorthand: `font-style` : `normal` `font-variant` : `normal` `font-weight` : `normal` `font-stretch` : `normal` `font-size` : `medium` `line-height` : `normal` `font-family` : depends on user agent
适用于	所有元素。它还适用于 `::first-letter` and `::first-line` .
继承	yes
百分比	as each of the properties of the shorthand: `font-size` : refer to the parent element's font size `line-height` : refer to the font size of the element itself
计算值	as each of the properties of the shorthand: `font-style` ：如指定 `font-variant` ：如指定 `font-weight` : the keyword or the numerical value as specified, with `bolder` and `lighter` transformed to the real value `font-stretch` ：如指定 `font-size` : as specified, but with relative lengths converted into absolute lengths `line-height` : for percentage and length values, the absolute length, otherwise as specified `font-family` ：如指定
动画类型	as each of the properties of the shorthand: `font-style` : discrete `font-variant` : discrete `font-weight` : a font weight `font-stretch` : a font stretch `font-size` : a length `line-height` : either number or length `font-family` : discrete

形式句法

[ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-barwhere 
<font-variant-css21> = [ normal | small-caps ]

范例

Setting font properties

/* Set the font size to 12px and the line height to 14px.
   Set the font family to sans-serif */
p { font: 12px/14px sans-serif }
/* Set the font size to 80% of the parent element
   or default value (if no parent element present).
   Set the font family to sans-serif */
p { font: 80% sans-serif }
/* Set the font weight to bold,
   the font-style to italic,
   the font size to large,
   and the font family to serif. */
p { font: bold italic large serif }
/* Use the same font as the status bar of the window */
p { font: status-bar }

Live sample

HTML

<p>
    Change the radio buttons below to see the generated shorthand and it's effect.
</p>
<form action="createShortHand()">
    <div class="cf">
        <div class="setPropCont">
            font-style<br/>
            <input type="radio" id="font-style-none" name="font_style" checked="" value="" onchange="setCss()"> <label for="font-style-none">none</label><br/>
            <input type="radio" id="font-style-normal" name="font_style" value="normal" onchange="setCss()"> <label for="font-style-normal">normal</label><br/>
            <input type="radio" id="font-style-italic" name="font_style" value="italic" onchange="setCss()"> <label for="font-style-italic">italic</label><br/>
            <input type="radio" id="font-style-oblique" name="font_style" value="oblique" onchange="setCss()"> <label for="font-style-oblique">oblique</label>
        </div>
        <div class="setPropCont">
            font-variant<br>
            <input type="radio" id="font-variant-none" name="font_variant" checked="" value=" " onchange="setCss()"> <label for="font-variant-none">none</label><br/>
            <input type="radio" id="font-variant-normal" name="font_variant" value="normal" onchange="setCss()"> <label for="font-variant-normal">normal</label><br/>
            <input type="radio" id="font-variant-small-caps" name="font_variant" value="small-caps" onchange="setCss()"> <label for="font-variant-small-caps">small-caps</label>
        </div>
        <div class="setPropCont">
            font-weight<br/>
            <input type="radio" id="font-weight-none" name="font_weight" value="" onchange="setCss()"> <label for="font-weight-none">none</label><br/>
            <input type="radio" id="font-weight-normal" checked="" name="font_weight" value="400" onchange="setCss()"> <label for="font-weight-normal">normal</label><br/>
            <input type="radio" id="font-weight-bold" name="font_weight" value="700" onchange="setCss()"> <label for="font-weight-bold">bold</label>
        </div>
        <div class="setPropCont">
            font-size<br/>
            <input type="radio" id="font-size-12px" name="font_size" value="12px" onchange="setCss()"> <label for="font-size-12px">12px</label><br/>
            <input type="radio" id="font-size-16px" name="font_size" value="16px" checked="" onchange="setCss()"> <label for="font-size-16px">16px</label><br/>
            <input type="radio" id="font-size-24px" name="font_size" value="24px" onchange="setCss()"> <label for="font-size-24px">24px</label>
        </div>
        <div class="setPropCont">
            line-height<br/>
            <input type="radio" id="line-height-none" name="line_height" checked="" value="" onchange="setCss()"> <label for="line-height-none">none</label><br/>
            <input type="radio" id="line-height-1.2" name="line_height" value="/1.2" onchange="setCss()"> <label for="line-height-1.2">1.2</label><br/>
            <input type="radio" id="line-height-3" name="line_height" value="/3" onchange="setCss()"> <label for="line-height-3">3</label>
        </div><br/>
        <div class="setPropCont fontfamily">
            font-family<br/>
            <input type="radio" id="font-family-courier" name="font_family" checked="" value="courier" onchange="setCss(5,'courier')"> <label for="font-family-courier">courier</label><br/>            <input type="radio" id="font-family-serif" name="font_family" value="serif" onchange="setCss()"> <label for="font-family-serif">serif</label><br />
            <input type="radio" id="font-family-sans-serif" name="font_family" value="sans-serif" onchange="setCss()"> <label for="font-family-sans-serif">sans-serif</label><br />            <input type="radio" id="font-family-arial" name="font_family" value="arial" onchange="setCss()"> <label for="font-family-arial">Arial</label><br />
            <input type="radio" id="font-family-monospace" name="font_family" value="monospace" onchange="setCss()"> <label for="font-family-monospace">monospace</label><br />            <input type="radio" id="font-family-cursive" name="font_family" value="cursive" onchange="setCss()"> <label for="font-family-cursive">cursive</label><br />
            <input type="radio" id="font-family-fantasy" name="font_family" value="fantasy" onchange="setCss()"> <label for="font-family-fantasy">fantasy</label><br />            <input type="radio" id="font-family-system-ui" name="font_family" value="system-ui" onchange="setCss()"> <label for="font-family-system-ui">system-ui</label><br />
        </div>
    </div>
    <div class="cf propInputs">
        <div class="propInputCont tar">
            font :
        </div>
        <div class="propInputCont">
            <input type="text" class="curCss" id="input_font_style"><br/>
            font-style <br/>
            optional
        </div>
        <div class="propInputCont">
            <input type="text" class="curCss" id="input_font_variant"> <br/>
            font-variant <br/>
            optional
        </div>
        <div class="propInputCont">
            <input type="text" class="curCss" id="input_font_weight"> <br/>
            font-weight <br/>
            optional
        </div>
        <div class="propInputCont">
            <input type="text" class="curCss mandatory" id="input_font_size"> <br/>
            font-size <br/>
            mandatory
        </div>
        <div class="propInputCont">
            <input type="text" class="curCss" id="input_line_height"> <br/>
            line-height <br/>
            optional
        </div>
        <div class="propInputCont">
            <input type="text" class="curCss mandatory" id="input_font_family"> <br/>
            font-family <br/>
            mandatory
        </div>
    </div>
</form>
<div class="fontShortHand">
    This is some sample text.
</div>
<br/><br/><br/><br/><br/><br/>

CSS

body, input {
  font: 14px arial;
  overflow: hidden;
}
.propInputCont {
  float: left;
  text-align: center;
  margin-right: 5px;
  width: 80px;
}
.setPropCont {
  float: left;
  margin-right: 5px;
  width: 120px;
}
.propInputs, .setPropCont {
  margin-bottom: 1em;
}
.curCss {
  border: none;
  border-bottom: 1px solid black;
  text-align: center;
  width: 80px;
}
.mandatory {
  border-bottom-color: red;
}
.cf:before,
.cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}
.tar {
  width: 40px;
  text-align: right;
}
.fontfamily {
  display: inline-block;
}

JavaScript

var textAreas = document.getElementsByClassName("curCss"),
    shortText = "",
    getCheckedValue,
    setCss,
    getProperties,
    injectCss;
getProperties = function () {
  shortText =
      getCheckedValue("font_style") + " " +
      getCheckedValue("font_variant") + " " +
      getCheckedValue("font_weight") + " " +
      getCheckedValue("font_size") +
      getCheckedValue("line_height") + " " +
      getCheckedValue("font_family");
  return shortText;
}
getCheckedValue = function(radio_name) {
  oRadio = document.forms[0].elements[radio_name];
  for (var i = 0; i < oRadio.length; i++) {
    if(oRadio[i].checked) {
      var propInput = "input_" + radio_name,
          curElemName = "input_" + radio_name,
          curElem = document.getElementById(curElemName);
      curElem.value = oRadio[i].value;
      return oRadio[i].value;
    }
  }
}
setCss = function () {
  getProperties();
  injectCss(shortText);
}
injectCss = function(cssFragment) {
  old = document.body.getElementsByTagName("style");
  if (old.length > 1) {
    old[1].parentElement.removeChild(old[1]);
  }
  css = document.createElement("style");
  css.innerHTML = ".fontShortHand{font: " + cssFragment + "}";
  document.body.appendChild(css);
}
setCss();

规范

规范	状态	注释
CSS Fonts Module Level 3 The definition of 'font' in that specification.	候选推荐	Added support for `font-stretch` values.
CSS Level 2 (Revision 1) The definition of 'font-weight' in that specification.	推荐	Added support for keywords.
CSS Level 1 The definition of 'font' in that specification.	推荐	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`font`	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 3	Opera 完整支持 3.5	Safari 完整支持 1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0
支持 `font-stretch` values in shorthand	Chrome 完整支持 60	Edge 完整支持 79	Firefox 完整支持 43	IE 不支持 No	Opera 完整支持 47	Safari 完整支持 11	WebView Android 完整支持 60	Chrome Android 完整支持 60	Firefox Android 完整支持 43	Opera Android 完整支持 44	Safari iOS 完整支持 11	Samsung Internet Android 完整支持 8.0
System fonts	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 4	Opera 完整支持 6	Safari 完整支持 1	WebView Android 完整支持 37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0

图例

完整支持
不支持

元数据

最后修改： Aug 15, 2020

CSS
CSS 参考
CSS 字体
指南
1. OpenType font features guide
2. Variable fonts guide
At-Rules
1. @font-face
2. @font-feature-values
特性

在此页