5 Font Management Features in CSS3
At our blog, we strive to right some posts that will keep developers stay ahead in their process. We keep them informing with latest software release, technologies that perk up the realm or may be at times we share simple tips to rock their tasks.
Today, we are going to share some basic features related to fonts embedded in CSS3, just to give you a quick recap on the daily use of CSS3 in your project and make your work sharp and let it stay in-flow –
We know that HTML5 provides basic support for font management, where we developers can specify bold, italics, underline, and other effects. CSS3 takes the support for font to an entirely new level. Well, let us dive into a few CSS3 artifacts related to fonts.
This property allows developers to specify the prioritized list of font family names and you can apply this property to almost elements and inheritance of all permitted types.
Example:
body {
font-family: sans-serif, Helvetica, Verdana;
}
Explanation: This example implies that sans-serif is preferred font over other, and if not available, Helvetica will be used and finally Verdana if none of the categories are present. We can even specify a generic-family as a value for this property. (includes permitted values such as “serif”, “sans-serif”, “cursive”, “fantasy” and “monospace”)
This specifies the weight of the glyphs in the font and their intensity. In this case, the permitted values are “normal” (equal to 400), “bold” (equal to 700), “bolder”, lighter” and numeric values range from 100 through 900 in increments of 100.
Developers use this to select a face from a font family - normal, condensed or expanded. In this case, the permitted values include - “ultra-condensed”, “extra-condensed”, “condensed”, “semi-condensed”, “normal”, “semi-expanded”, “expanded”, “extra-expanded” and “ultra-expanded”.
Well, developers use this property to select italic or oblique faces and for them the permitted values are - “normal”, “italic”, or “oblique”.
The use of this property mainly applies in the selection of desired height of glyphs from a font and its permitted under the following values –
Today, we are going to share some basic features related to fonts embedded in CSS3, just to give you a quick recap on the daily use of CSS3 in your project and make your work sharp and let it stay in-flow –
We know that HTML5 provides basic support for font management, where we developers can specify bold, italics, underline, and other effects. CSS3 takes the support for font to an entirely new level. Well, let us dive into a few CSS3 artifacts related to fonts.
- font-family
This property allows developers to specify the prioritized list of font family names and you can apply this property to almost elements and inheritance of all permitted types.
Example:
body {
font-family: sans-serif, Helvetica, Verdana;
}
Explanation: This example implies that sans-serif is preferred font over other, and if not available, Helvetica will be used and finally Verdana if none of the categories are present. We can even specify a generic-family as a value for this property. (includes permitted values such as “serif”, “sans-serif”, “cursive”, “fantasy” and “monospace”)
- font-weight
This specifies the weight of the glyphs in the font and their intensity. In this case, the permitted values are “normal” (equal to 400), “bold” (equal to 700), “bolder”, lighter” and numeric values range from 100 through 900 in increments of 100.
- font-stretch
Developers use this to select a face from a font family - normal, condensed or expanded. In this case, the permitted values include - “ultra-condensed”, “extra-condensed”, “condensed”, “semi-condensed”, “normal”, “semi-expanded”, “expanded”, “extra-expanded” and “ultra-expanded”.
- font-style
Well, developers use this property to select italic or oblique faces and for them the permitted values are - “normal”, “italic”, or “oblique”.
- font-size
The use of this property mainly applies in the selection of desired height of glyphs from a font and its permitted under the following values –
- “absolute-size” – The value is determined by the user-agent: Possible values are “xx-small”, “x-small”, “small, “medium”, “large”, “x-large”, “xx-large”
- “relative-size” – This keyword is interpreted relative to the table of font sizes and the computed “font-size” of the parent element. Possible values are “larger” and “smaller”
- “length” - this is to specify an absolute font size
- “percentage” – this specifies an absolute font size related to the parent element’s font size
As a hardcore web design and development company, we have to adopt and recapitulate various framework, platforms and codes for different projects. It comes handy to our developers and we hope to extend the boundary with the use of blog to help other developers like us. Hope you find this information useful.
Credit: Image
Comments
Post a Comment