CSS can stand out in the layout of the many standard means of winning is its powerful ability of text processing, such as the “simple” box edge text is beyond the ability of word wrap in the concept of CSS flow almost are born, and gradually become the industry’s “normal cognition”, however, contemporary SVG standard to wrap text, Also need you to manual processing, for the computer, nothing is born, CSS in the graphic layout of many customized standards in now seems to be very “human”, this chapter we will explore the CSS text processing mechanism.

Personally, this chapter is divided into three chapters. This section mainly introduces the knowledge related to the text (font) attribute. The next chapter introduces the @font face rule as a separate chapter. Without further ado, let’s take a look at who the Font family members are and what features they have.

1. Font-size: 16px; vertical-align

Font size is used to define the size of a font. In addition to defining the size of a font, there are also a lot of friends and family. Font-size: 16px; line-height: 20px; “> < span style =” font-size: 16px;

When you talk about text, you have to talk about inline elements, and when you talk about inline elements, you have to talk about line-height and vertical-align. Some of the category attributes of line-height are computed relative to font size, and the percentage values of vertical-align are computed relative to line-height, so we can use this feature to implement some “adaptive layout”. For example, the following CSS code combination

<div>The text<img src=". / deleted. PNG"></div>
<style>
div {
  font-size: 20px;
  line-height:1.5;
}
div > img {
  width: 16px; 
  height: 16px;
  vertical-align: 25%;
  position: relative;
  top: 8px;
}
</style>
Copy the code

Font size = 20px*1.5 = 30px

Vertical-align: height* percentage = 30px * 25% = 7.5px

In the chapter of inline elements, we learned that the bottom edge of character X is the baseline of the text, while the picture generally takes its own bottom edge as the baseline, so the bottom edge of the picture is aligned with the bottom edge of the two Chinese characters by default. We then align the bottom edge of the image with the center line of the Chinese character by declaring vertical-align:25% (note that this is an estimate), as shown below. The red line represents the center line

When the bottom edge of the picture is aligned with the center line of the text, we can offset the picture itself by transform to make the center line of the picture and the center line of the text aligned. Here, I use relative relative positioning to achieve the same effect.

Finally, we achieved dynamic alignment between text and ICONS (if you are interested, try changing the value of text font size to test it).

Ex, EM and REM are close relatives of font size

Ex, EM, and REM are close relatives of font size, because they are all relative units of font size, calculated from the value of font size, and can be converted into a relative unit for layout purposes.

Ex is the height of character x. The larger the value of font size is, the larger the value of ex is calculated.

Now let’s look at the unit em, which, as the name suggests, is the width of the letter ‘M’, right? The height of the? Well, not exactly. In official parlance, em is the height of a type (think movable type). Since its calculated value is close to the width and height value of “M”, it is called EM. Em can also be considered the width of a Chinese character, due to the boxy nature of the uppercase “M” and Chinese fonts. For example, the browser default font size is 16px. If the width of a div is 160px, then the div can fit exactly ten Chinese characters, 160px = 10em = 10 Chinese characters.

I highlighted a sentence in red at the beginning of this section, and I wonder if you could get this example right (I didn’t get it right anyway)

<! -- This is so showy -->
<span>hello</span>
<span>world</span>
<style type="text/css">
span{
    font-size: 2em;
    margin: 0 1em;
}
</style>
Copy the code

The default font of the browser is 16px. What are the calculated values of the font-size and margin of the SPAN tag?

Font-size :2em = 2* 16px = 32px,margin:1em = 16px

Well, the truth is not that simple. Let’s see what the browser tells us.

What if the browser calculated 2em exactly the same as 1em?

Now that the browser has given the final result, let’s analyze a wave of why 1em ===2em? Did you notice that I used the word ex,em, REM three times? Why does this word come up so often? Because this relative calculation is critical. For example, what does the browser do when it gets a margin:0 1em? Font-size: 16px “em”; font-size: 16px “em”; font-size: 16px “em”; font-size: 16px “em”; Isn’t that a fucking loop?

Font size:2em =2* default font size=2*16px = 32px, and then tell margin:0 1em, I calculated it, you can use it. Margin = 0 1em = 1*font-size = 32px. So the final calculated value, font size and margin are 32px.

After understanding the concept of relative, we can think of using relative units to make flexible layouts. However, the EM unit is affected by the current context of font size and is not particularly stable. To solve this limitation, another unit, REM, which is closely related to font size, was created.

Rem, as its name implies, is the relative unit of the font size of the root element, which is only affected by the font size of the root element. Therefore, REM is widely used in flexible layout schemes of mobile terminals. Although REM is derived from EM, they have completely different fates. Now he has been sidelined for tens of thousands of years, while REM has become a powerhouse in mobile layout

3. Font-size: 14px

Font size also supports keyword attributes, which many people may not know (including me again). Font -size keyword attributes fall into two categories

(1) Relative size keywords. Font size refers to the font size computed relative to the current element

Larger: A little larger. Is the default font size for the big tag.

Smaller: Smaller. Is the default font size for the small tag.

(2) Absolute size keywords. The font size of the current element is independent of the font size set by the browser. Browser size how to set their own baidu)

There are seven absolute size keywords: very large, very large, large, medium, small, small, and very small.

These two size keywords behave differently in different browsers, especially relative size keywords. Take a look at them and they are basically useless. Absolute size keywords, except for medium, are basically useless. Personally think, understand these two slant door attribute is good.

4. Special font size:0 with text hiding

There is a 12px size limit in Chrome on the PC, which means that the font size of the text cannot be less than 12px. Of course, THERE is a perversion that requires me to change the font to 10px. Use transform:scale() to change the size of the element.

Font size:<12px will be treated as 12px, except for 0. If you set font size:<12px, it will be treated as 12px. He can actually make font-size participate in the calculation with the value of 0px. However, after font size:0 was designed, like REM, it did not do its own job, but played some spare energy in some special areas, such as “how to solve the problem of image bottom margin”, you can set the parent element font size:0, to eliminate the influence of ghost blank node.

Font-family: arial, sans-serif; mso-font-kerning

The default value of font family is controlled by the operating system and browser. The default font of Windows and OS is different, and the default font of Chrome and Firefox is different on the same system.

In addition to supporting the keyword of the font name, font type is also supported. Font-family :’Microsoft Yahei’, ‘Microsoft Yahei’; If font names contain Spaces, be sure to enclose them in quotation marks. Of course, font family also supports the corresponding Chinese name, but try to use English, in case of font parsing failure.

Let’s take a look at some of the less popular types of fonts. In my opinion, font family has created a family tree for fonts, and also created a category for families with similar habits. Documents on the MDN are classified as follows

Font-family :serif, sans-serif, monospace, cursive, fantasy, system-UI

For Chinese websites, the application scenarios of the latter three fonts are limited, so I will not expand them more. Here I will focus on introducing serif fonts, sans Serif fonts and equal-width fonts.

Serif font and sans serif font are two relatively common fonts in the font family. The so-called serif font, popularily speaking, is the font with extra decoration at the beginning and end of strokes and different thickness of strokes, such as “宋体”. Sans-serif typefaces do not have these extra decorations and have similar strokes of thickness, such as the “yahei” typeface that is most commonly used today. Note that both serif and sans serif fonts, or any of the above “font types”, have a default font keyword, and after personal testing, the default serif font package in Google browser is 宋体. The default font package for sans-Serif is Microsoft Yahei. Of course, different operating systems and browsers may have their own preferences, so “font type” can be a way to show which fonts the operating system likes.

Next, let’s talk about the practical value of equal width fonts. The so-called equal width fonts are generally for English fonts, because Chinese fonts were mentioned in the introduction of EM. Each Chinese font is approximately equal width and height, but the case of English letters is very different, such as the following example:

<div>iiiiiii</div>
<div>MMMMMMM</div>
Copy the code

Since the Markdown editor supports markup language, we can preview the final look directly as follows (hint: you can check the following elements directly in your browser to see the CSS style)

iiiiiii
MMMMMMM

Actually monospaced font I needless to say, the benefits of us directly, I typed in the code box code, is completely aligned from top to bottom, to do the alignment, you must let each character occupied position is consistent, and in the browser’s default font, the position occupied by the two lines just a bit far, such as wide application of font very much, The so-called benevolence benevolence wisdom is different, when used naturally will think of.

6. Fine font weight

Font-size: 16px “font weight”; font-size: 16px “font weight”; font-size: 16px “font weight”; 100/200/300/400/500/600/700/800/900 and relative to the parent element of lighter and bolder.

Some people might think I’m crazy, but why don’t I just write 100-900? Because the number 100 is not a number, it’s just a keyword, if you come from a relative of 100, 100.000001, sorry, font-weight does not recognize, do not recognize. Font weight:100 doesn’t work either. Why is font weight:100 the same as 200/300/400? We can’t leave this to the browser, which can detect these keywords. The reason we can’t see these changes is because we don’t have any text in our system that corresponds to them, so we usually just use the keywords Normal (400) and bold (700). To see these subtle changes, We need our operating system to install these font packs, and of course in a production environment you can’t ask the user to follow anything other than a browser, so to solve this problem you need @font-face. This property will be explored in more detail than here.

7. Other attributes of the font family: font-style and font-variant

Font style Supports normal and ITALic. It also supports oblique. In fact, this keyword has no soft use. Italic indicates the italic font package that references the font. Generally, most text packages do not have a separate italic font package, but some English font packages do have an italic font package. If the italic font package cannot be found, tilt the font directly. Oblique is used to tilt text directly, so I say that it doesn’t have any soft use. In general, italic fonts look much better than text. Who would use oblique?

Font – Variant is also a CSS attribute that does not conform to China’s national conditions. Its function is to realize small size uppercase letters, which can keep m and M in the same shape. This attribute may be used more in countries where English is the mother tongue, so it is a weak attribute for us.

8. Your font attributes are hidden

Font supports abbreviations and has the following syntax:

[[<'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'>[/<'line-height'> ]? <'font-family'> ]
Copy the code

I want to skip the introduction of font abbreviations here because they are part of the bad stuff of CSS, which reads as follows:

For most abbreviable attributes, abbreviations are not an issue. You can declare what you want, any options can be missing, and if not, the initial value will be applied. For example, list-style and background values that are not applied are not inherited 99% of the time anyway, so it doesn’t matter whether the values are set or not. However, many typographical attributes are expected to be inherited from parents. So when you use font abbreviations, things get messy. If you’re not familiar with the complexity of this property, you might be scratching your head. In other words, if I declare bold text on the body element, I might expect the text inside to inherit bold. As a result, once a font abbreviation that lacks the font-weight attribute is applied, the text is no longer displayed in bold.

Font-family: arial, sans-serif; mso-ascii-font-family: arial, sans-serif; mso-ascii-font-family: arial, sans-serif; If you omit the line height, it will be inherited. If you omit the line height, the line height will be reset to normal. This setting is also…..

In summary, font abbreviations are not recommended.

In addition to abbreviations, the font attribute also supports keyword attribute values, which many people may not know (including me again). The list of keywords is shown below

  • Caption: A font containing a caption control (button, drop-down, etc.).
  • Icon: Font used for label ICONS, affecting all files and folder names.
  • Menu: font used for the menu (drop-down menu and menu list below).
  • Message-box: font used for message boxes.
  • Small-caption: A font used to mark small controls.
  • Status-bar: font used in the status bar of a form.

It is important to note that after declaring the font: keyword, you do not need to define the attributes of font size,font family, etc., because these keywords are essentially abbreviations that already contain the various attributes of font.

The ONT keyword can be used to make web pages follow the system. There are already many desktop software that can change the default font of the system. Wouldn’t it be smart to let the browser display the font according to the user’s “mood”? Here I offer two ways to change the font to match the system’s default font. In the first instance, system-ui is used as an example:

html{font-familyThe system - the UI} orhtml{font:menu}
Copy the code

This is the end of this chapter. The content of @font face will also be included in this chapter, but in order to ensure that the reading time of the article is not too long, WE plan to set up a separate chapter about @font Face. Give it a thumbs up if you think it’s useful

Never forget why you started, and your mission can be accomplished.

You can also scan the QR code to enter the blogger’s fan group (708637831). Of course, you can also scan the QR code to reward and directly keep a handsome blogger.