Common ways of manipulating font properties in CSS include the following:
font-family
The font-family property specifies the type of the font.| CSS Declaration | Output |
| p {font-family: verdana;} | Font Family Verdana. |
| p {font-family: arial;} | Font Family Arial. |
| p {font-family: impact;} | Font Family Impact. |
font-size
The font-size property specifies the size of the font. The size can be numerical (length or percentage), or in text (possible values are "xx-large", "x-large", "large", "medium", "small", "x-small", and "xx-small").| CSS Declaration | Output |
| p {font-size:9px;} | Font Size 9px. |
| p {font-size:150%;} | Font Size 150%. |
| p {font-size:0.8cm;} | Font Size 0.8cm. |
| p {font-size:small;} | Font Size small. |
| p {font-size:large;} | Font Size large. |
font-weight
The font-weight property specifies the thickness of the font. Font weight can go from 100 to 900, with 900 being the thickest. One can also specify "bold", "bolder", or "normal".Examples below:
| CSS Declaration | Output |
| p {font-weight: 100;} | This is font weight 100. |
| p {font-weight: 900;} | This is font weight 900. |
| p {font-weight: bold;} | This is bold font weight. |
font-style
The font-style property specifies whether the font is italic or oblique.| CSS Declaration | Output |
| p {font-style: italic;} | This is font style italics. |
font-variant
The font-variant property specifies whether the font will be displayed in small caps. Small caps mean that all letters will be displayed in the capital case, but the font size is smaller than usual. The possible values are 'small-caps' and 'normal'. Let's look at the example below.With the following CSS,
| span { font-variant:small-caps; } |
the HTML code below,
| <span>initial in small caps</span> AND LATER IN LARGE CAPS. |
renders
| initial in small caps AND LATER IN LARGE CAPS. |
0 comments:
Post a Comment