CSS 简写属性 font 可设置某元素字体的不同属性，或将元素的字体设置为系统字体。
{{InteractiveExample("CSS Demo: font")}}
```css interactive-example-choice font: 1.2rem "Fira Sans", sans-serif;
```css interactive-example-choice
font:
italic 1.2rem "Fira Sans",
serif;
```css interactive-example-choice font: italic small-caps bold 16px/2 cursive;
```css interactive-example-choice
font: small-caps bold 24px/1 sans-serif;
```css interactive-example-choice font: caption;
```html interactive-example
<section id="default-example">
<p id="example-element">
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
as if the waters had but newly retired from the face of the earth, and it
would not be wonderful to meet a Megalosaurus, forty feet long or so,
waddling like an elephantine lizard up Holborn Hill.
</p>
</section>
```css interactive-example @font-face { font-family: "Fira Sans"; src: local("FiraSans-Regular"), url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; }
@font-face { font-family: "Fira Sans"; src: local("FiraSans-Italic"), url("/shared-assets/fonts/FiraSans-Italic.woff2") format("woff2"); font-weight: normal; font-style: italic; }
section { margin-top: 10px; font-size: 1.1em; }
与任何简写属性一样，任何未指定的值都将设置为其对应的初始值（可能覆盖先前使用非简写属性设置的值）。虽然不能通过 `font` 直接设置，但是 {{cssxref("font-size-adjust")}} 和 {{cssxref("font-kerning")}} 也会重置为初始值。
## 组成属性
该属性是以下 CSS 属性的简写：
- {{cssxref("font-family")}}
- {{cssxref("font-size")}}
- {{cssxref("font-stretch")}}
- {{cssxref("font-style")}}
- {{cssxref("font-variant")}}
- {{cssxref("font-weight")}}
- {{cssxref("line-height")}}
## 语法
```css-nolint
/* font-size font-family */
font: 1.2em "Fira Sans", sans-serif;
/* font-size/line height font-family */
font: 1.2em/2 "Fira Sans", sans-serif;
/* font-style font-weight font-size font-family */
font: italic bold 1.2em "Fira Sans", sans-serif;
/* font-stretch font-variant font-size font-family */
font: ultra-condensed small-caps 1.2em "Fira Sans", sans-serif;
/* 系统字体 */
font: caption;
可以将 font 属性指定为单个关键字，它将选择系统字体，或者作为字体相关的属性的简写。
如果将 font 指定为系统关键字，则它必须是 caption、icon、menu、message-box、small-caption、status-bar 之一。
如果 font 指定为字体相关的属性的简写：
必须包含以下值：
- {{cssxref("<font-size>")}}
- {{cssxref("<font-family>")}}
可以选择性包含以下值：
- {{cssxref("<font-style>")}}
- {{cssxref("<font-variant>")}}
- {{cssxref("<font-weight>")}}
- {{cssxref("<font-stretch>")}}
- {{cssxref("<line-height>")}}
font-style、font-variant和font-weight必须在font-size之前font-variant只可以使用 CSS 2.1 定义的值，即normal和small-capsfont-stretch必须是单个关键字值line-height必须跟在font-size后面，由“/”分隔，例如“16px/3”font-family必须最后指定
值
<'font-style'>- : 见 {{cssxref("font-style")}} 属性。
<'font-variant'>- : 见 {{cssxref("font-variant")}} 属性。
<'font-weight'>- : 见 {{cssxref("font-weight")}} 属性。
<'font-stretch'>- : 见 {{cssxref("font-stretch")}} 属性。
<'font-size'>- : 见 {{cssxref("font-size")}} 属性。
<'line-height'>- : 见 {{cssxref("line-height")}} 属性。
<'font-family'>- : 见 {{cssxref("font-family")}} 属性。
系统字体
caption- : 用于标题控件（如按钮、下拉列表等）的系统字体。
icon- : 用于标签图标的系统字体。
menu- : 菜单中（如下拉菜单和菜单列表）使用的系统字体。
message-box- : 用于对话框的系统字体。
small-caption- : 用于小标题控件的系统字体。
status-bar- : 用于窗口状态栏的系统字体。
- 带前缀的系统字体关键字
- : 浏览器经常会实现多个带前缀的关键字；Gecko 实现了
-moz-window、-moz-document、-moz-desktop、-moz-info、-moz-dialog、-moz-button、-moz-pull-down-menu、-moz-list和-moz-field。
- : 浏览器经常会实现多个带前缀的关键字；Gecko 实现了
形式定义
{{CSSInfo}}
形式语法
{{CSSSyntax}}
示例
设置字体属性
/* 设置字体大小为 12px，行高为 14px，字体家族为 sans-serif */
p {
font: 12px/14px sans-serif;
}
/* 将字体大小设置为父元素的 80% 或默认值（如果没有父元素存在），设置字体家族为 sans-serif */
p {
font: 80% sans-serif;
}
/* 设置字体粗细为 bold，
风格为斜体，
大小为 large，
家族为 serif。*/
p {
font: bold italic large serif;
}
/* 使用与窗体状态栏一致的字体 */
p {
font: status-bar;
}
运行实例
```html hidden
改变下方的单选钮，查看生成的简写属性及其效果。
```css hidden
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;
}
```js hidden const textAreas = document.getElementsByClassName("curCss");
function getProperties() {
return (
${getCheckedValue("font_style")} +
${getCheckedValue("font_variant")} +
${getCheckedValue("font_weight")} +
${getCheckedValue("font_size")} +
${getCheckedValue("line_height")} +
${getCheckedValue("font_family")}
);
}
function getCheckedValue(radioName) {
const radios = document.forms[0].elements[radioName];
for (let i = 0; i < radios.length; i++) {
if (radios[i].checked) {
const curElemName = input_${radioName};
const curElem = document.getElementById(curElemName);
curElem.value = radios[i].value;
return radios[i].value;
}
} }
function setCss() { injectCss(getProperties()); }
function injectCss(cssFragment) {
const old = document.body.getElementsByTagName("style");
if (old.length > 1) {
old[1].parentElement.removeChild(old[1]);
}
css = document.createElement("style");
css.textContent = .fontShortHand{font: ${cssFragment}};
document.body.appendChild(css);
}
setCss(); ```
{{ EmbedLiveSample('运行实例','100%', '440px')}}