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; 

font: caption; 

<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; } 

/* 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() { getProperties(); injectCss(shortText); } 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();