CSS 简写属性 font
可设置某元素字体的不同属性,或将元素的字体设置为系统字体。
font: 1.2em "Fira Sans", sans-serif;
font: 1.2em/2 "Fira Sans", sans-serif;
font: italic bold 1.2em "Fira Sans", sans-serif;
font: ultra-condensed small-caps 1.2em "Fira Sans", sans-serif;
font: caption;
可以将 font
属性指定为单个关键字,它将选择系统字体,或者作为字体相关的属性的简写。
如果将 font
指定为系统关键字,则它必须是 caption
、icon
、menu
、message-box
、small-caption
、status-bar
之一。
如果 font
指定为字体相关的属性的简写:
- 必须包含以下值:
- 可以选择性包含以下值:
font-style
、font-variant
和 font-weight
必须在 font-size
之前
font-variant
只可以使用 CSS 2.1 定义的值,即 normal
和 small-caps
font-stretch
必须是单个关键字值
line-height
必须跟在 font-size
后面,由“/”分隔,例如“16px/3
”
font-family
必须最后指定
初始值 | as each of the properties of the shorthand:
|
---|
适用元素 | all elements and text. 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
|
---|
计算值 | 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
|
---|
Animation type | as each of the properties of the shorthand:
|
---|
font =
[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] |
<system-family-name>
<font-variant-css2> =
normal |
small-caps
<font-width-css3> =
normal |
ultra-condensed |
extra-condensed |
condensed |
semi-condensed |
semi-expanded |
expanded |
extra-expanded |
ultra-expanded
<system-family-name> =
caption |
icon |
menu |
message-box |
small-caption |
status-bar
p {
font: 12px/14px sans-serif;
}
p {
font: 80% sans-serif;
}
p {
font: bold italic large serif;
}
p {
font: status-bar;
}
<p>改变下方的单选钮,查看生成的简写属性及其效果。</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">这是一段示例文字。</div>
<br /><br /><br /><br /><br /><br />
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;
}
const textAreas = document.getElementsByClassName("curCss");
function getProperties() {
return (
`${getCheckedValue("font_style")} ` +
`${getCheckedValue("font_variant")} ` +
`${getCheckedValue("font_weight")} ` +
`${getCheckedValue("font_size")}` +
`${getCheckedValue("line_height")} ` +
`${getCheckedValue("font_family")}`
);
}
function getCheckedValue(radioName) {
const radios = document.forms[0].elements[radioName];
for (let i = 0; i < radios.length; i++) {
if (radios[i].checked) {
const curElemName = `input_${radioName}`;
const curElem = document.getElementById(curElemName);
curElem.value = radios[i].value;
return radios[i].value;
}
}
}
function setCss() {
injectCss(getProperties());
}
function injectCss(cssFragment) {
const old = document.body.getElementsByTagName("style");
if (old.length > 1) {
old[1].parentElement.removeChild(old[1]);
}
css = document.createElement("style");
css.textContent = `.fontShortHand{font: ${cssFragment}}`;
document.body.appendChild(css);
}
setCss();
BCD tables only load in the browser