CSS Font
In this chapter, we will speak about fonts.
The CSS font properties are used for defining the size, font family, boldness, and the style of the text.
Besides, it sets the font of the element to the system font.
The CSS font property is considered to be a shorthand property. So, here we will explain the following properties:
- Font Family
- Font Style
- Font Size
- Font Weight
- Font Variant
When we write some information, some text or link in our webpage, we must give them styles. We use the properties mentioned above for text styles. Let's know more about these properties.
Font Family
For the font family of the text, we use the font-family property. This is the name of the font, which we want to use on our webpage.
p {
font-family: Arial, sans-serif;
}As you see we have given to our <p> tag font-family property. We differentiate two types of families:
- generic family - a group of font families having a similar look (like "Serif" or "Sans-serif")
- font-family - a particular font family (like "Times New Roman" or "Arial")
When we use a specific font family that consists of more than one word, we take the name in quotes (like "Times New Roman"). At the same time, we must write more than one font-family, because in case the browser won't support your first font-family, you can have several other similar font-families.
Font Style
We use font-style property mostly for texts that we want to write italic.
Most of all we use the following values of the font-style property:
- normal, which shows the text normally,
- italic, which shows the text in italics,
- oblique, which “leans” the text.
Example of the font-style property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="font-style:normal">This is paragraph with font-style property with normal value.</p>
<p style="font-style:italic">This is paragraph with font-style property with italic value.</p>
<p style="font-style:oblique">This is paragraph with font-style property with oblique value.</p>
</body>
</html>By default, our text will be font-style: normal, even without writing this value.
Font Size
For the size of our text, we use the font-size property.
We need to give value to our property. The values are given by pixels, pt, em, rem, etc. You can find the full list in the font-size section. You need to know that 1em=16px. Most of all we use pixels (px).
Example of the font-size property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3 style="font-size:40px;"> Some heading with font-size property.</h3>
<p style="font-size:25px;"> Some paragraph with font-size property.</p>
<a style="font-size:2em;"> Some link with font-size property.</a>
</body>
</html>You need to check it also by yourself. You can do that with our HTML online editor click here.
Font-Variant
The font-variant property allows us to set the text as normal or small-caps from a font family.
The small-caps value makes the lowercase letters to the uppercase letters, but these converted letters will be displayed a little smaller than normal uppercase letters.
Example of the font-variant property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.smallcaps {
font-variant: small-caps;
}
</style>
</head>
<body>
<h2>Font-variant property example</h2>
<p>Here we used a normal text as you can see.</p>
<p class="smallcaps">But We Used A Text With Small-Caps Here.</p>
</body>
</html>Font Weight
Now you know that when we have some text, and we want to make our text italic, we use the font-style property.
Now let's learn what we can do for making our text bolder in case it isn't a heading because by default the headings are bold.
For that, we use the font-weight property.
Mostly we use the following values of the font-weight property:
- normal
- bold
The value can be given also by numbers.
Example the font-weight property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="font-weight:900">Some paragraph with the font-weight property with value bold.</p>
<p style="font-weight:normal">Some paragraph with the font-weight property with value normal.</p>
<p style="font-weight:bold">Some paragraph with the font-weight property with value bold.</p>
</body>
</html>As you remember we have told you that we can give value with numbers 100-900. Value 100 is normal, and 900 is the bolder. And as much as the number grows between 100 and 900, the font becomes bolder.
0 Comments
CAN FEEDBACK
Emoji