CSS Font
CSS font property defines the font family of boldness, size, and style of the text.
CSS Font Families:
The font-family property allows you to indicate the typeface that ought to be utilized for any content interior the element(s) to which a CSS run the show applies. The value of this property is the name of the typeface you need to utilize. In CSS generally, there are two types of font family names:
- Generic family: a group of font families with a similar. Example "serif"
- Font-family: a specific font family. Example "Arial"
The font family of text is set with the font-family property. 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 you want and end with a generic family, to let the browser pick a similar font in the generic family if no font is available. The name of a font family is more than one word, it must be inside double quotation marks. Example font-family: "Arial". And more than one font family is specified in a comma-separated (,) list.
Example
h1 {
font-family: "Arial, Times New Roman, serif";
}
Font Style
CSS font-style property is used to specify a text. This property has three values:
- Normal: the text is shown normally.
- Italic: the text is shown in italics.
- Oblique: This is very similar to italics but less supported. And the other font style is Bold but the Font property is changed by the font-weight
Example
h1{
font-style: italic;
}
p{
font-style: normal;
}
h3{
font-style: oblique;
}
h2{
font-weight: bold;
}
Font Size
The font-size property sets the size of the text. The font-size property empowers you to set down a size for the font.
Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings or headings look like paragraphs. Always use the proper HTML tags <h1> -<h6> for headings and <p> for paragraphs.
The font-size value can be:
Absolute size |
|
| Relative size |
|
Note: If you want do not specify a font size the default size for normal text is 16px or 1em
How to set font size?
In different ways set the font-size in of the text:
Set font size with Pixels: Setting the font size with pixels gives you full control over the text size.
Example:
h1{
font-size: 40px;
}
p{
font-size: 16px;
}
h3{
font-size: 38px;
}
h2{
font-size: 30px;
}
Set font size with Em: To avoid the resize problem with the older version. Many developers use em instead of pixels. The em size unit is recommended by the WC3.
1 em is equal to the current font size. The default text size in browsers is 16px. So 1em = 16px.
If you want to calculate the pixels to em using this formula: pixels/16 =em
Example
h1{
font-size: 2.5em;/* 40px/16 =2.5em */
}
h2{
font-size: 1.875em; /* 30px/16 =2.5em */
}
p{
font-size: 1em;/* 16px/16 =2.5em */
}
How to use a combination of Percent and Em?
We can utilize a combination of percentage and em to indicate the font size of components for superior compatibility of the font. This permits us to have uniform content over distinctive browsers.
Example
body{
font-size: 100%;
}
h1{
font-size:2.5em;
}
h2{
font-size: 1.875em;
}
p{
font-size: 1em;
}
CSS font properties
| Property | Description |
| font | Set all font properties in one declaration body{ font: 16px Arial, sans-serif; } |
| font-family | Specifies the font family for text. body{ font-family:sans-serif; } |
| font-size | Specifies font size of the text. body{ font-size: 16px; } |
| font-style | Specifies font style for the text. body{ font-style: italic; } |
| font-variant | Specifies deployed or not in small caps font body{ font-variant: small-caps; } |
| font-weight | Specifies the weight of the text. body{ font-weight: bold; } |
Leave a comment
No Cmomments yet