Font family
The family font of a piece of text is defined by the font-family.
This feature should have several font styles to reserve. If the browser does not support this font, it will try the following font and so on.
Select the font you want first and end with a font belonging to the generic family group so that the browser selects the same font in this group if there are no other fonts available. Fonts separated by commas.
Note: If the family font name has more than one word, it must be placed in quotation marks.
p {
font-family: "Times New Roman", Times, serif;
}
Font style
The font-style
feature is often used to define italic text; it has three values:
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
Font size
font-size
properties used to specify text size. Control of text size is very important in web design. However, the text size should not be used to make text that looks like a title or title look like a piece of text.
Always use appropriate HTML tags, like
next
for good titles
for text paragraphs. Text size values can be absolute or relative.
Absolute size
Relative size
Note : If you do not specify the font size, the default default size of the text (paragraph) is 16px (16px = 1em).
Set font size in pixels
Select the text size in pixels for you to have full control over the text size.
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Note: If using pixels, you can still use the zoom in / out tool to resize the whole page.
Set font size by em
To allow users to change text (on the Browser Menu), many developers use me instead of pixels. I am also a unit encouraged by W3C.
1em is equivalent to the current font size. The default text on the browser of the text is 16px. So the default size of 1em is 16px. To convert from pixel to em using the formula: pixel / 16 = you.
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
In the above example, the text size is equal to the previous pixel usage example but for me it is possible to change the text size in all browsers. However, on older versions of IE there is still a problem, when the text is enlarged it will look bigger than the correct size, similarly when scaled it will be smaller than the actual level.
Use a combination of percent and me
The solution that works for all browsers is to set the default text size as a percentage of the element .
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Weight font
The font-weight
is used to specify normal or bold text.
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
Text size with feedback
Text size can be set in units of vw, ie viewport width. Then the text size will follow the browser window size.
Note: Viewport is the browser window size. 1vw - 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.
Variant font
The font-variant
determines whether the text is displayed in small-caps. In small-caps, lowercase letters are converted to uppercase but smaller in size than regular capital letters.
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
Previous article: Text in CSS
The following article: Icon in CSS