字体 | font (Fonts) - CSS 中文开发手册
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="https://cdn.breakyizhan.com/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;
80px;
}
.setPropCont {
float: left;
margin-right: 5px;
120px;
}
.propInputs, .setPropCont {
margin-bottom: 1em;
}
.curCss {
border: none;
border-bottom: 1px solid black;
text-align: center;
80px;
}
.mandatory {
border-bottom-color: red;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.tar {
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) |
? |
? |
? |