Set the font in CSS

Set the font in CSS

 

When setting the font, we can set the font family, Font Style, font size, font bold, and font conversion. Next we will analyze the font settings one by one.

Font family:

There are two types of font series in CSS:

Generic font family: A combination of fonts with the same appearance

Specific font family: a specific font family

It seems that these definitions are a bit vague. Of course, we are learning practical, so how can we apply these font series? This applies the font-family attribute we set in CSS. That's right. Let's look at this example.

We can see that there are many values after the font-family attribute. Yes, we can write a lot of values or write a value, Time New

Roman (New Rome font), Times (), serif; there are many font series, but our browsers can use so many fonts at the same time. So what should we write so much, don't worry. The reason why we write so much is that we have a spare tire for the browser. When our browser does not support the first font, it will use the second font to open the document, if the second method does not work, use the third method. There is always one suitable for you. Haha. The font family is here for everyone. See the font style below.

Font Style:

The font family is set through the font-family attribute. Then, the font style is set based on the attributes. Now you know the name of the font. You can use the font-style attribute to set the font style.

The font style can be seen as whether to set the font to italic, normal as normal, italic and bolique are italic, and I am too stupid to see what is the difference between the two, of course there must be differences, but the difference is not big. I think they are common italics.

Font Size:

The font size may be the most important thing in the font settings, because our setting of the font size directly affects our content arrangement. We cannot set the font size at will. For example, can you set the font of a paragraph as the title. Not good. Of course, we need to understand the "size" before setting the font size ". Set the font size in CSS. The absolute size and relative size are different. In fact, the absolute size and relative size are the units behind the numbers when we set the font size. Sometimes, in combination with the browser, we also combine the relative size and percentage, so that users can use their own browsers to set the font size.

In this place, when we set the font size, the unit behind the number is px, pixel. I believe everyone is familiar with the pixel size, but we also know that it is hard to grasp how many pixels are used to set the font size. Do we know the default font size of the browser? 16px. So we can easily think of whether the browser font size can be set to 2, 3, 1.2 times of the font size. Let's create a reference object. In this way, the font of our browser is a reference object. We can set a font that is several times larger than the browser font.

H1 {font-size: 2.5em ;}
H2 {font-size: 1.875em ;}
P {font-size: 0.875em ;}
 

In this way, we set a relative font. 1em = 16px, that is, the default font size of the browser. This is the relative font size setting.

Combination of percentages and font sizes:

In this way, we can adjust the font size of the browser. We can see that the implementation in this step is very simple. Add a font-size: 100% in the table signature "body". Ah, I forgot to say, we set the font size attribute with the Word font-size. Sorry, my mind has been flying and I forgot to implement it. So far, we have learned how to set the font size and whether to remember font-family, font-style, and font-size.

Bold font:

Sometimes when we look at others' interfaces, we find that others' fonts are very beautiful and you may be amazed to say that they are bold. Looking at my own details, I feel as ashamed as I think. It doesn't matter. In fact, it is very easy to bold the font. We only need to apply the attributes in the font settings.

The font-weight attribute can also make your font rough, and don't need money. Let's take a look at how this attribute can be applied:

P. n {font-weight: normal ;}
P. l {font-weight: lighter ;}
P. t {font-weight: bold ;}
P. th {font-weight: 900 ;}

Normal is a normal font, and lighter is a highlighted font. In fact, we do not have to set a highlighted font. bold is used to set a bold font.

Of course, we can also use numbers as attribute values when setting the font width. 900 is actually the same as bold.

Font conversion:

Go straight to the topic: the font-variant attribute is used for font-variant conversion. There are many attributes, But we rarely use them, such as normal and small-

Caps;

P. normal {font-variant: normal ;}
P. samll {font-variant: small-caps ;}

This is the font-variant application, so far we have read it .. I also read the font conversion, but I don't know if you have any problems. You may think like a primary school student: teacher, I hava a problem. Well, I also have a question: can we write so many attributes together? This is a good question. When we can set the font, we just want to set the background, and there will be a lot of problems, finally, we can use the background attribute to set all the attributes we want to set. Of course, we can use font in this place, followed by the attributes we want to set:

P. x1 {
Font: 15px Arial, sans-serif;
}
P. x2 {
Font: italic bold 12px/30px Geogria, serif;
}

This can be called the ultimate attribute of font settings: Grand Slam attribute