Original: itsOli @ front-end 10,000 hours this article was first published in the public number "front-end 10,000 hours" this article belongs to the author, without authorization, please do not reprint! This article is adapted from "sparrow" private pay column "front end | ten thousand hours from zero basis to easily obtain employment"Copy the code

❗ ️ ❗ ️ ❗ ️

The following link is the latest erratum to this article”CSS to style text: ① Font properties”

Brief introduction of the principle of font icon, start using iconfont to achieve a font icon demo.Copy the code

🙋 on the question “refer to the answer in detail”, please click here to view access!

Introduction: As the most basic part of Web page, the importance of “text” is self-evident. For “text”, we need to master two related properties – “font properties” and “text properties”.

• CSS font properties: mainly defines the font series, font size, font thickness, style, and deformation of “text”.
• CSS text properties: Mainly defines the appearance of “text” – such as indentation and horizontal alignment, vertical alignment, word spacing and letter spacing, text conversion, text decoration, text shading, whitespace handling, and text orientation.

In this article, we’ll start with CSS font properties.

1 Define the font family for text

The font-family property is used to define the font family for text.

First of all, what we usually call “font” is not just a single font, but a “font family”.

In addition to various “specific font families” such as Times, Verdana, Helvetica, or Arial, CSS defines five “common font families.”

A universal font family is a combination of font systems that have a similar appearance. In theory, any font family that a user installs tends to fall into one of these five generic families (except for practical exceptions).

1.2 How to specify “Font Series” in work

Suppose the requirements are as follows: I want to specify the font for P to be displayed as Times, but also accept the following serif font order (TimesNR, Georgia, New Century Schoolbook, New York).

Often we write code like this:

p {
  font-family: Times, TimesNR, Georgia, 'New Century Schoolbook'.'New York', serif;
}

/* 🏆 Of course, you can also use Unicode codes to represent fonts directly. For example: '\5FAE\8F6F\96C5\9ED1' is the Unicode code of the word "Microsoft Yahei". How do we know the Unicode code of a "font"? You can right-click the element, click console, and type escape(' boldface ') to pop up the corresponding code. Then replace %u with \. * /
Copy the code

❗️

• The font-family property is used to specify the “font family” used in the document.

• When we specify only one or more specific fonts for a Web page, the problem arises when we write as follows:

p {
  font-family: Times, TimesNR, Georgia, 'New Century Schoolbook'.'New York';
}
Copy the code

In a cross-platform environment, there is no guarantee that users will also have these specific fonts installed.

If the user does not have these fonts installed, the user’s browser will use a default font to display the Web. We Web creators have no control over the display.

A serif at the end, however, tells the user’s browser to display my P using a serif that is installed on your computer, even if you don’t.

• Notice the “single quotes” in the rule:

When there is one or more Spaces in a font name, or if the font name contains symbols such as # or $, we must enclose the font name in single quotes so that the browser can recognize it.

On the other hand, if you enclose the five “common font families” in single quotes, the browser will think (or maybe you want to tell the browser) that you need a “specific font” with the same name as each of the five “common font families” instead of a “common font.”

3 Define the font size of “text”

The font-weight attribute is used to define the font size of “text”.

Keywords 100 to 900 specify 9 levels of bold for the font. If a font has these bold levels built in, the numbers map directly to predefined levels, with 100 for the smallest font distortion and 900 for the coarsest font distortion.

However, it is rare for a font to have 9 word weights that correspond exactly to the 100-900 CSS word weights, instead of 4 to 6. Of course, don’t worry, at least 400 and 700 weights are required for each font — 400 equals normal and 700 equals bold.

In practice, the two most commonly used values are normal and bold. Examples of usage:

h2 {
  font-weight: bold;
}
Copy the code

If you set the element bold to bolder, the browser sets a font bold that is thicker than the inherited value. In contrast, the keyword lighter causes the browser to move the bold down instead of up.

4.1 italic

If the italic version of the current font is available, set the text to the italic version; If not, the browser uses the OBLIQUE state to simulate ITALics. Ex. :

p {
  font-style: italic;
}
Copy the code

p {
  font-style: oblique;
}
Copy the code

4.3 normal

Set text to normal font (turn existing italics off)

Out of the box, make “font” more possible – font icon

The @font-face rule, which allows web developers to specify online fonts for their web pages. By doing so, @font-face eliminates the need to rely on a user’s computer font.

“Rules” are written as follows:

@font-face {font-family: "Remote font Name";
            src: url(https://); }Copy the code

Below we use iconfont commonly used in practical work for illustration:

• Step 1: Open alibaba’s website www.iconfont.cn/ and search for the icon (such as login) after logging in.

• Step 2: Add to shopping cart and save as item test-1;

• Step 3: In the “My Project” screen, we focus on Font Class;

• Step 4: You can edit the icon as you need;

• Step 5: After editing, “Save only” and return to the project interface, click “View online links”;

• Step 6: Copy the code to your OWN HTML document.

• Step 7: Introduce stylesheets into your HTML and view the results;

• Step 8: In this way, we can manipulate the “font ICONS” just as we did with the “text” at the beginning of this article;

🏆 Summary:

1. What does this have to do with @font-face?

Now let’s open the code on the website and see what it looks like:

As you can see, it’s really easy and convenient to use the @font-face rule in combination with Alibaba’s tools.

2. How do font ICONS work and why are they used this way?

In the article “(01) (1) HTML based | HTML” in we learned:

When writing HTML documents,
the tag must be specified to tell the browser that you should use UTF-8 as Unicode decoding.

In other words, it would be perfectly fine if all the text in our HTML documents were written directly in Unicode code — a Unicode code, which can be thought of as a specific number for any character in the world.

If so, based on the point “a text in one country is an icon in the eyes of people in other countries”, any “icon” we make can also be displayed on the page and operated like “text”.

It’s just that the normal font ICONS aren’t existing text, they’re Unicode codes that flow out and are extendable. In other words, you can add anything to these codes, but it’s not an existing standard.

So you need to declare a font with the @font-face rule (as described above and below).

3. Why doesn’t the third step manipulate Unicode instead of Font class?

Let’s do it once to see what’s wrong:

We see that simply writing Unicode codes in a document does not display ICONS. We need @font-face to declare a downloaded font:

Copy and paste into an HTML document to see the effect:

It works the same way, but as you can see, the

and

in the tag are both written in Unicode code, which is not easy to read and maintain — we don’t know what it is just looking at the code.

Postscript: In the next article we will continue to talk about “text attributes”. After learning about line-height, we will introduce the font attribute in this article. By then, “CSS styles text” will be completely within our grasp.

I wish you good, QdyWXS ♥ you!