| |
CSS Font-Family Best Practice |
|
|
Subject: CSS Font-Family Best Practice
Author: CyberSpider
In response to: CSS Font
Posted on: 04/13/2016 11:46:31 PM
Generically, there are five types of fonts:
serif -- with serifed endings, e.g. Lucida Fax, Georgia, Times New Roman;
non-serif -- without serifed endings, e.g. Verdana, Helvetica, Arial;
monospace -- same fixed length, e.g. Lucida Console, Courier, Courier New
cursive
fantasy
The device may not have the font specified in your CSS available, it is always advised to designate several failover or fallback fonts including a generic family at the end of the list -- allow the device to pick a close one on its own from the generic family.
For example:
p {
/* wanted | failover | generic */
font-family: "Lucida Console", "Courier New", monospace;
}
Try it yourself in sandbox »
>
> On 04/13/2016 06:23:10 PM CyberSpider wrote:
CSS font property can be categorized as:
font-style -- normal, italic, oblique;
font-style -- normal, none, small-caps;
font-weight -- normal, none, small-caps;
font-weight -- normal, bold, lighter, bolder, 100, 900;
font-stretch -- normal, condensed, expanded;
font-size -- medium, small, large, 12px, 0.8em, 80%;
line-height -- normal, 2.3, 2.5em, 120%;
font-family -- "Times New Roman", Verdana, Courier;
A example:
p.custom {
font-style: italic;
font-variant: small-caps;
font-weight: bolder;
font-stretch: condensed;
font-size: 16px;
line-height: 2;
font-family: cursive;
}
They can also be put together under one roof:
p.custom {
/* style | variant | weight | stretch | size/height | family */
font: italic small-caps bolder condensed 16px/2 cursive;
}
Try it yourself in sandbox »
References:
- Next Post: CSS Text CyberSpider 04/13/2016 07:11:07 PM
- Previous Post: CSS Font CyberSpider 04/13/2016 06:23:10 PM
- Next Topic: CSS Text CyberSpider 04/13/2016 07:11:07 PM
- Previous Topic: CSS Selectors CyberSpider 04/10/2016 09:53:57 PM
- Index: by Date
- Index: by Topic
|
|
|
|
