Font properties in CSS


In the previous CSS lesson, Taimienphi.vn introduced you to the Background properties in CSS, to learn more Font properties in CSS, read along to the next article of Taimienphi.vn.


Properties font in CSS determine the type of font used, size, font style, …. Refer to the following CSS of Taimienphi.vn to learn the Font properties in CSS in detail.

Font properties in CSS

Table of Contents:
1. -Family Font property in CSS
2. Font-Style property in CSS
3. Font-Size property in CSS
3.1. Set Font Size in Pixel units
3.2. Set Font Size in Em units
3.3. Use a combination of Percent (%) and Em units
4. Font-Weight property in CSS
5. Responsive Font Size in CSS
6. Font-Variant property in CSS
7. Font properties in CSS

Font properties in CSS

Font properties in CSS include:

– Properties font-family Used to change the font.

– Properties font-style used to create italic font.

– Properties font-variant used to create a small-cap effect (change lowercase letters to small letters).

– Properties font-size Used to change the font size.

– Properties font Used to shorten some other fonts.

1. -Family Font property in CSS

To change the font for the text, we use the attribute font-family.

When using properties font-family We have to identify many different font names as “backup”. If the browser does not support the first font, we can use the next font, ….

Start with the font you want to use and end with the generic family so that the browser can select the font in the generic family if other fonts are not available.

Note: If the font name is longer than one word, we must put the font name in quotation marks, such as “Times New Roman”.

If there are multiple fonts specified in the list, we use commas to separate.

For example:

fonts in css

The output will look like the following:

fonts in css 2

2. Font-Style property in CSS

Properties font-style in CSS is used to specify italic font for text.

The font-style attribute consists of 3 values:

thường – Display text as normal.

italic – display text in italics.

oblique – this value is close to italic value, but less supported.

For example:

crystal font in css 3

The output will look like the following:

fonts in css 4

3. Font-Size property in CSS

Properties font-size In CSS it is used to set the font size of the text.

In web design, managing and choosing the font size is quite important. We cannot adjust the font size of the text as the title font size and vice versa.

Instead we have to use proper HTML tags, such as using tags

for titles and tags

for the text.

The font size values ​​in CSS include absolute size and relative size.

Absolute size (absolute size):

– Set specific font size.

– Do not allow users to change the font size on all browsers.

– Absolute size is useful in cases where the physical output size is known.

Relative size:

– Set font size relative to surrounding elements.

– Allows users to change text size on the browser.

Note: If no specific font size is specified, the default text size is 16px (16px = 1em).

3.1 Set Font Size in Pixel units

By setting the font size in pixels, we can control the entire text size.

For example:

fonts in css 5

The output will look like:

fonts in css 6

3.2 Set Font Size in Em units

Allow users to change font size (on the browser menu). Some developers often use the Em unit instead of the Pixel unit.

1em is equivalent to the current font size. The default font size on browsers is 16px, so the default size of 1em is 16px.

To calculate the size converted from pixels to em, we use the formula: pixels / 16 = you.

For example:

fonts in css 7

The output will look like:

font style in css 8

In the example above, the text size is set in units you The same text size is set in pixels in the previous example. However with em size, we can adjust the text size on all browsers.

3.3 Use a Percent (%) and Em unit

This solution works on all browsers, setting the font size for the element

The default is in percent units.

For example:

fonts in css 9

The output will look like:

fonts in css 10

4. Font-Weight property in CSS

Properties font-weight in CSS is used to set the font boldness.

For example:

fonts in css 11

The output will look like:

fonts in css 12

5. Responsive Font Size in CSS

Also we can set the font size by device vw (stands for viewport width – the width of viewport).

This way the text size will be adjusted to fit the browser window size.

For example:

fonts in css 13

The output will look like:

fonts in css 14

Note: Viewport is the size of the browser window, 1vw = 1% width of viewport. If the viewport width is 50 cm then 1vw is 0.5 cm.

6. Font-Variant property in CSS

Properties font-variant The CSS determines whether the text is displayed as small caps or not.

For example:

fonts in css 15

The output will look like:

font font in css 16

7. Font properties in CSS

Here is a list of Font properties in CSS:

Property Description

font Set all font properties in a declaration.

font-family Specifies, changes the text font.

font-size Specifies the font size of the text.

font-style Specifies the font font style.

font-variant Specifies whether the text is displayed in small caps.

font-weight Determine the font density.

fonts in css 17

https://thuthuat.taimienphi.vn/thuoc-tinh-font-trong-css-48856n.aspx
The above lesson Taimienphi.vn has just introduced you to Font property in CSS. In the next CSS lessons, Taimienp0hi.vn will introduce you more attributes Text in CSS Please.

.

Add a Comment

Your email address will not be published. Required fields are marked *