font

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

浏览器支持

语法:

取值:

• 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属性指定为单个关键字，它将选择系统字体，或者作为字体相关的属性的简写。

如果将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

change the radio buttons below to see the generated shorthand and it's effect.
 
 
 font-style
 none
 normal
 italic
 oblique 
 
 font-variant
 none
 normal
 small-caps 
 
 font-weight
 none
 normal
 bold 
 
 font-size
 12px
 16px
 24px 
 
 line-height
 none
 1.2
 3 
 
 font-family
 courier
 serif
 sans-serif 
 
 
 
 font : 
 
 
 font-style 
 optional 
 
 
 font-variant 
 optional 
 
 
 font-weight 
 optional 
 
 
 font-size 
 mandatory 
 
 
 line-height 
 optional 
 
 
 font-family 
 mandatory 
 
 this is some sample text.

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  1) {
 old[1].parentelement.removechild(old[1]);
 }
 css = document.createelement("style");
 css.innerhtml = ".fontshorthand{font: " + cssfragment + "}
";
 document.body.appendchild(css);
}

setcss();

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com