font

设置或检索对象中的文本字体，是复合属性。

浏览器支持


浏览器都支持 `font`

语法:

font :[[ font-style || font-variant || font-weight ]? font-size [/ line-height ]? font-family ]

默认值	看独立属性自身
适用于	所有元素
继承性	有
动画性	看独立属性自身
计算值	看独立属性自身

取值:

font-style :指定文本字体样式
font-variant :指定文本是否为小型的大写字母
font-weight :指定文本字体的粗细
font-size :指定文本字体尺寸
line-height :指定文本字体的行高
font-family :指定文本使用某个字体或字体序列

说明:

设置或检索对象中的文本特性。该属性是复合属性。

使用第一种声明方式参数必须按照如上的排列顺序，且 font-size 和 font-family 是不可忽略的。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值。
对于如何使用客户端系统没有字体和自定义字体，可以参阅 @font-face 规则。
对应的脚本特性为 font 。

如果 font 字体相关的属性的简写：

必须包含以下值： font-style 、 font-family
可以选择性包含以下值： font-style 、 font-variant 、 font-weight 、 line-height
font-style , font-variant 和 font-weight 必须在 font-size 之前
font-variant 只可以是 normal 和 small-caps 、 line-height 必须跟在 font-size 后面，由" / "分隔，例如" 16px/3 "
font-family 必须最后指定

系统关键字

font :caption | icon | menu | message-box | small-caption | status-bar

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

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

caption:使用有标题的系统控件的文本字体（如按钮，菜单等）（CSS2）
icon:使用图标标签的字体（CSS2）
menu:使用菜单的字体（CSS2）
message-box:使用信息对话框的文本字体（CSS2）
small-caption:使用小控件的字体（CSS2）
status-bar:使用窗口状态栏的字体（CSS2）

系统关键字前缀

浏览器经常会多实现几个带前缀的关键字；Gecko 实现了 -moz-window , -moz-document , -moz-desktop , -moz-info , -moz-dialog , -moz-button , -moz-pull-down-menu , -moz-list ,和 -moz-field .

例子

/* 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 elementor 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 }

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')"> <labelfor="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();

返回CSS导航

font

浏览器支持

语法:

取值:

说明:

系统关键字

系统关键字前缀

例子