Baseline Widely available
The font CSS shorthand property sets all the different properties of an element's font. Alternatively, it sets an element's font to a system font.
font:
1.2rem "Fira Sans",
sans-serif;
font:
italic 1.2rem "Fira Sans",
serif;
font: italic small-caps bold 16px/2 cursive;
font: small-caps bold 24px/1 sans-serif;
<section id="default-example">
<p id="example-element">
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
as if the waters had but newly retired from the face of the earth, and it
would not be wonderful to meet a Megalosaurus, forty feet long or so,
waddling like an elephantine lizard up Holborn Hill.
</p>
</section>
@font-face {
font-family: "Fira Sans";
src:
local("FiraSans-Regular"),
url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Fira Sans";
src:
local("FiraSans-Italic"),
url("/shared-assets/fonts/FiraSans-Italic.woff2") format("woff2");
font-weight: normal;
font-style: italic;
}
section {
margin-top: 10px;
font-size: 1.1em;
}
As with any shorthand property, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). Though not directly settable by font, the longhands font-size-adjust and font-kerning are also reset to their initial values.
/* font-size font-family */
font: 1.2em "Fira Sans", sans-serif;
/* font-size/line height font-family */
font: 1.2em/2 "Fira Sans", sans-serif;
/* font-style font-weight font-size font-family */
font: italic bold 1.2em "Fira Sans", sans-serif;
/* font-stretch font-variant font-size font-family */
font: ultra-condensed small-caps 1.2em "Fira Sans", sans-serif;
/* system font */
font: caption;
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: caption, icon, menu, message-box, small-caption, status-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 CSS property.
<'font-variant'>
See the font-variant CSS property.
<'font-weight'>
See the font-weight CSS property.
<'font-stretch'>
See the font-stretch CSS property.
<'font-size'>
See the font-size CSS property.
<'line-height'>
See the line-height CSS property.
<'font-family'>
See the font-family CSS property.
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.
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.
font =Examples Setting font properties
[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'># ] |
<system-family-name><font-style> =
normal |
italic |
left |
right |
oblique <angle [-90deg,90deg]>?<font-variant-css2> =
normal |
small-caps<font-weight> =
<font-weight-absolute> |
bolder |
lighter<font-width-css3> =
normal |
ultra-condensed |
extra-condensed |
condensed |
semi-condensed |
semi-expanded |
expanded |
extra-expanded |
ultra-expanded<font-size> =
<absolute-size> |
<relative-size> |
<length-percentage [0,â]> |
math<line-height> =
normal |
<number [0,â]> |
<length-percentage [0,â]><font-family> =
[ <family-name> | <generic-family> ]#<system-family-name> =
caption |
icon |
menu |
message-box |
small-caption |
status-bar<font-weight-absolute> =
normal |
bold |
<number [1,1000]><length-percentage> =
<length> |
<percentage><family-name> =
<string> |
<custom-ident>+<generic-family> =
<generic-script-specific> |
<generic-complete> |
<generic-incomplete><generic-script-specific> =
generic( fangsong ) |
generic( kai ) |
generic( khmer-mul ) |
generic( nastaliq )<generic-complete> =
serif |
sans-serif |
system-ui |
cursive |
fantasy |
math |
monospace<generic-incomplete> =
ui-serif |
ui-sans-serif |
ui-monospace |
ui-rounded
/* 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 its 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;
}
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();
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3