font Baseline Widely available
CSS-свойство fontfont-stylefont-variantfont-weightfont-stretchfont-sizeline-heightfont-family
Как и с любым сокращённым свойством, любое значение, которое не указано, устанавливается в начальное значение (возможно, переопределяя значения, ранее установленные с использованием не сокращённых свойств). Свойства font-size-Adjustfont-kerningfont, но они также сбрасываются к своим начальным значениям.
The font property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties.
If font is specified as a system keyword, it must be one of: captioniconmenumessage-boxsmall-captionstatus-bar
If font is specified as a shorthand for several font-related properties, then:
it must include values for:
it may optionally include values for:
font-style, font-variant and font-weight must precede font-size
font-variant may only specify the values defined in CSS 2.1, that is normal and small-caps
font-stretch may only be a single keyword value.
line-height must immediately follow font-size, preceded by "/", like this: "16px/3"
font-family must be the last value specified.
<'font-style'>
See the font-style
<'font-variant'>
See the font-variant
<'font-weight'>
See the font-weight
<'font-stretch'>
See the font-stretch
<'font-size'>
See the font-size
<'line-height'>
See the line-height
<'font-family'>
See the font-family
System font values
caption
The system font used for captioned controls (e.g., buttons, drop-downs, etc.).
icon
The system font used to label icons.
The system font used in menus (e.g., dropdown menus and menu lists).
message-box
The system font used in dialog boxes.
small-caption
The system font used for labeling small controls.
status-bar
The system font used in window status bars.
Prefixed system font keywords
Browsers often implement several more, prefixed, keywords: Gecko implements -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, and -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 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;
}
<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>
<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 />
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;
}
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();
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.