Font Families:
In CSS there are two types of font families:
- Generic family - a group of font families with a similar look for instance 'Serif' or 'monospace'.
- Font Family - a specific font family such as Times New Roman or Aerial
The font family property should hold several font names as a "fallback" system. If the browser does not support the first font,it tries the next font.
Start with the font that you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
If the name of the font family is more than one word, it must be in quotation marks, like font-family: "Times New Roman". Here's how you'd write the syntax:
p{font-family:"Times New Roman", Times, serif;}
Font style:
The font style property is commonly used to specify italic text.
This property has three value:
- normal - text is shown normally
- Italic - The text is shown in italics
- Oblique - The text is "leaning" (oblique is very small to italic, but less supported)
p.normal {font-style:normal;}
Just like the text transformations you'd make the class name the same as the value so when typing it in you remember what the class name for the syntax is.
Font size:
The font size property obvously sets the size of the font.
Be able to change the size of the font is very important but you should never try to adjust the size of a heading to look like a paragraph or try to make a prargraph look like a heading. Just use the normal HTML tags <h1> and <p> for headings and paragraphs. If you do not specify the text size , the defult size is et which is 16px or 1em
The font size value can be an absolute, or relative size.
absolute size:
- sets the text to a specific size
- doesn't allow a user to change the text size in all browsers (bad for accessibility)
- Absolute size is useful when the physical size of the output is known
Relative size:
- Sets the size relative to surrrounding pixels.
- Allows the user to change the text size in browsers
This is the syntax for setting the font size:
h1 {font-size:40px;}
Set Font size with Em:
To avoid resizing problems with the older versions of internet explorer, many developers use em instead of pixels. 1em is equal to the current font size.
16 pixels=1em
h1 {font-size:2.5em;}
This font size is equal to 40px. With the em sizes, it's possible to adjust the size in all browser. However using em does mean that soemtime when making text larger it becomes to0 large and when making text smaller it becomes too small.
There is a solution though. Through using a combonation of percentages and em.
All you have to do is set the default font-size in a percentage for the <body> element.
The syntax that you must enter looks like this:
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
The size of letters:
The size of letters by change the value to normal (give you normal sized text), bold (gives you a thick sized text and 900 (which gives you a thicker sized text).
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
No comments:
Post a Comment