How does CSS customize fonts? Introduction to text font styles in HTML

CSS How to customize the font you know? There are CSS styles to set the font style, such as the introduction of the font size, as well as the font weight settings, this article teaches you how to use CSS style to do these things, now let's take a look at the article

First of all, we introduce how to use CSS style to customize the font, take a look at it:

Here we describe the properties in a CSS style:

Font-family: Defines the font family for text. Also known as the font family, there are five kinds of universal: Serif,sans-serif,monospace,cursive,fantasy.

Of course, you can also find specific fonts. We find the fonts on our computer on our own computers, and then we can set the names to copy them, of course, if the user does not install the font, then this font is useless. The default font for the client is displayed. (Want to see more on topic.alibabacloud.com CSS video tutorial)

Let's look at an example of a text font:

<style>.you_1{font-family:serif}.you_2{font-family:sans-serif}.you_3{font-family:monospace}.you_4{ Font-family:cursive}.you_5{font-family:fantasy}</style>
Here the five paragraphs above give a different font style, we will now look at the results displayed in the browser:


, the last one does not have any settings, is to set the first five fonts, it seems obvious, this is the font-family in five kinds of characters commonly used body, basically all computers have these fonts, do not need to worry about others in the computer display. We're done with our custom fonts.

Second, now talk about our text font style, such as change size ah, font bold introduction. Let's see it together:


 

 
  
 
   
Font-weight: Used to set the text thickness, there are three kinds: normal,bold bold, Parameter 100~900, defines the text size
 
   
Font-size: property is used to set the size of the text. There are px,em,%. The default 1em equals 16 pixels.
 
  

 
This is another introduction to the two fonts in CSS styles, and now let's make them appear in one instance

Take a look at examples of font style settings:

<style>.you_1{font-weight:600}.you_2{font-size:40px}</style>
As you can see, this code first sets the text weight parameter, and also has an PX parameter that sets the size of the text. Now let's see what the effect looks in the browser:


It's a little bit bigger. But it doesn't matter, it's sure to be able to see clearly. No one can say that it is not clear, one is to set the thickness, one is set size, should not be confused which is the setting size and which is the setting thickness of it.

Well, this is the end of the article, which describes how CSS styles are set and how the text font style is designed. If you have questions, you can leave a comment below.