The font-style property is mostly used to specify italic text. It has two value, italic and normal.
// If the text is italic, it makes the text normal.
p.normal {
font-style: normal;
}
// If the text is normal, it makes the text italic.
p.italic{
font-style:italic;
}
The font-size specifies the size of the text. The higher the value is bigger the text.
h1 {
font-size: 40px;
}
The font family of a 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, and so on.
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 other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman".
p {
font-family: "Times New Roman", Times, serif;
}
The property font-weight represents the thickness of the font.
p.normal {
font-weight: normal; // Same as 500
}
p.thick {
font-weight: bold; // Same as 700
}
// You can also use number like 500, 600,700, 800 etc.
p.thick {
font-weight: 700;
}
The font-variant property specifies whether or not a text should be displayed in a small-caps font. In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.
// If the font variant is set, you can make the text normal using the normal value
p.normal {
font-variant: normal;
}
// You can use small-caps value to make the text appear in small-caps font.
p.small {
font-variant: small-caps;
}
All the above font property discussed above can be specified in the font property as a shortcut. But the shorthand property is used very rarely as it is not much of a readable. You rather use different property for different purpose to make your code look more cleaner.
Avoid using font shorthand property
p.ex2 {
font: italic bold 12px/30px Georgia, serif;
}
Web fonts allow Web designers to use fonts that are not installed on the user's computer. When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.
Your "own" fonts are defined within the CSS @font-face rule.
In the @font-face rule; first define a name for the font (e.g. myFirstFont) and then point to the font file.
To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
You must add another @font-face rule containing descriptors for bold text:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
The file "sansation_bold.woff" is another font file, that contains the bold characters for the Sansation font.
Browsers will use this whenever a piece of text with the font-family "myFirstFont" should render as bold.
This way you can have many @font-face rules for the same font.
The following table lists all the font descriptors that can be defined inside the @font-face rule:
Required. Defines a name for the font
Required. Defines the URL of the font file
Optional. Defines how the font should be stretched. Default is "normal". You can use one of the following values -
Optional. Defines how the font should be styled. Default is "normal". You can use one of the following values -
Optional. Defines the boldness of the font. Default is "normal". You can use one of the following values -