概述
font
属性是设置 font-style
, font-variant
, font-weight
, font-size
, line-height
和 font-family
属性的简写,或使用特定的关键字设置元素的字体为某个系统字体。
和其它的CSS简写属性一样,该属性中未被设置的属性值使用它们各自的初始值,并覆盖之前由非简写的属性设置的值。
注意: 在使用 CSS
font
简写属性时有几条注意事项。如果不符合这些情况,该属性将无效并被完全忽略。
初始值 | as each of the properties of the shorthand:
|
---|
适用元素 | all elements. It also applies to ::first-letter and ::first-line . |
---|
是否是继承属性 | yes |
---|
Percentages | as each of the properties of the shorthand:
font-size : refer to the parent element's font sizeline-height : refer to the font size of the element itself
|
---|
适用媒体 | visual |
---|
计算值 | as each of the properties of the shorthand:
font-style : as specifiedfont-variant : as specifiedfont-weight : the keyword or the numerical value as specified, with bolder and lighter transformed to the real valuefont-stretch : as specifiedfont-size : as specified, but with relative lengths converted into absolute lengthsline-height : for percentage and length values, the absolute length, otherwise as specifiedfont-family : as specified
|
---|
是否适用于 CSS 动画 | as each of the properties of the shorthand:
|
---|
正规顺序 | order of appearance in the formal grammar of the values |
---|
语法
/* 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;
/* The font used in system dialogs */
font: message-box;
值
<'font-style'>
- 见
font-style
属性。
<'font-variant'>
- 见
font-variant
属性。
<'font-weight'>
- 见
font-weight
属性。
<'font-size'>
- 见
font-size
属性。
<'line-height'>
- 见
line-height
属性。
<'font-family'>
- 见
font-family
属性。
caption
icon
menu
message-box
small-caption
status-bar
- 关键字用于表示某个特定的系统字体,以代替每个单独的普通属性:
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
.
-
正式语法
[ [ <‘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)
and 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 }
实样
HTML Content
<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>
<div class="setPropCont">
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>
</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>
CSS Content
body, input {
font: 14px arial;
}
.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;
}
JavaScript Content
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();
规范
浏览器兼容性
特性 |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
简写 |
1.0 |
1.0 (1.0) |
3.0-4.0 |
3.5 |
1.0 (85) |
系统字体 |
1.0 |
1.0 (1.0) |
4.0-5.5 |
6.0 |
1.0 (85) |
特性 |
Android |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
基础特性支持 |
? |
? |
? |
? |
? |