字体 | font

fontCSS属性是用于设定缩写属性font-style，font-variant，font-weight，font-size，line-height，和font-family；或者使用特定的关键字将元素的字体设置为系统字体。

/* size | family */
font: 2em "Open Sans", sans-serif;

/* style | size | family */
font: italic 2em "Open Sans", sans-serif;

/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/3 cursive;

/* style | variant | weight | stretch | size/line-height | family */
font: italic small-caps bolder condensed 16px/3 cursive;

/* The font used in system dialogs */
font: message-box;
font: icon;

/* Global values */
font: inherit;
font: initial;
font: unset;

与任何速记属性一样，任何未指定的单个值都将设置为其相应的初始值（可能会覆盖先前使用非速记属性设置的值）。虽然没有直接设定由font，所述longhands font-stretch，font-size-adjust和font-kerning也复位到它们的初始值。

初始值	作为速记的每个属性：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和:: first-line。
遗传	是
百分比	作为简写的每个属性：font-size：引用父元素的字体大小line-height：引用元素本身的字体大小
媒体	视觉
计算值	作为速记的每个属性：font-style：如指定的font-variant：指定的font-weight：指定的关键字或数值，用大胆和轻量级转换为实际值font-stretch：指定字体-size：如指定，但相对长度转换为绝对长度line-height：对于百分比和长度值，绝对长度，否则为指定font-family：按指定
动画类型	作为速记的每个属性：font-style：discrete font-variant：discrete font-weight：字体重量font-stretch：字体stretch字体大小：长度line-height：数字或长度font-family ：离散
规范的顺序	出现在价值形式语法中的顺序

font-style: normal
font-variant: normal
font-weight: normal
font-stretch: normal
font-size: medium
line-height: normal
font-family: depends on user agent

Applies to all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line).   [Inherited](inheritance) yes   Percentages as each of the properties of the shorthand:

font-size：引用父元素的字体大小
line-height：指的是元素本身的字体大小

Media visual   [Computed value](computed_value) as each of the properties of the shorthand:

font-style：作为指定
font-variant：作为指定
font-weight：指定的关键字或数值，bolder并lighter转换为实际值
font-stretch：作为指定
font-size：按照规定，但相对长度转换为绝对长度
line-height：对于百分比和长度值，绝对长度，否则如指定
font-family：作为指定

动画类型作为速记的每个属性：

font-style：离散
font-variant：离散
font-weight：一个字体的重量
font-stretch：一种字体拉伸
font-size：一个长度
line-height：数量或长度
font-family：离散

Canonical order order of appearance in the formal grammar of the values

句法

font属性可以被指定为单个关键字，其将选择系统字体，或者作为各种字体相关属性的简写。

如果font被指定为一个系统的关键字，它必须是以下之一：caption，icon，menu，message-box，small-caption，status-bar。

如果font被指定为多个与字体相关的属性的简写，则：

它必须包含以下值：
- <font-size>
- <font-family>
它可以选择包含以下值：
- <font-style>
- <font-variant>
- <font-weight>
- <line-height>
font-style，font-variant并且font-weight必须在之前font-size
font-variant只能指定在CSS 2.1中定义的值，即normal和small-caps
line-height必须紧跟font-size在“/”前面，如下所示：“ 16px/3”
font-family 必须是指定的最后一个值。

值

<'font-style'>查看font-styleCSS属性。<'font-variant'>查看font-variantCSS属性。<'font-weight'>查看font-weightCSS属性。<'font-stretch'>查看font-stretchCSS属性。<'font-size'>查看font-sizeCSS属性。<'line-height'>查看line-heightCSS属性。<'font-family'>查看font-familyCSS属性。caption用于字幕控制的系统字体（例如按钮，下拉菜单等）。icon用于标记图标的系统字体。menu菜单中使用的系统字体（例如，下拉菜单和菜单列表）。message-box对话框中使用的系统字体。small-caption用于标记小控件的系统字体。status-bar在窗口状态bars.Prefixed系统字体keywordsBrowsers使用的系统字体通常实现几个，前缀，关键字：壁虎工具-moz-window，-moz-document，-moz-desktop，-moz-info，-moz-dialog，-moz-button，-moz-pull-down-menu，-moz-list，和-moz-field。

形式语法

[ [ <'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 ]

示例

/* 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字体模块级别3该规范中'font'的定义。	候选推荐	增加了对字体拉伸值的支持。
CSS级别2（修订1）该规范中'font-weight'的定义。	建议	新增对关键字的支持。
CSS级别1该规范中'font'的定义。	建议	初始定义。

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Shorthand	1.0	(Yes)	1.0 (1.0)	3.0	3.5	1.0 (85)
System fonts	1.0	(Yes)	1.0 (1.0)	4.0	6.0	1.0 (85)
Support of font-stretch values	(Yes)	?	43 (43)	?	?	?

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	?	?	?	?
Support of font-stretch values	?	?	43 (43)	?	?	?

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18