The explosion

Recently, I found that the height of all the text blocks in the page was completely different from the height in the design draft, and then the UI sister exploded!

Font :24px; font-size:24px; [font height:24px] [font size :24px] [font size :24px] [font size :24px] [font size :24px] The result is that the line height is higher than the line height in the design.

Why is line height not equal to font size?

The official description of line-height looks like this:

The default value of line-height is normal. The recommended value for normal is between 1.0 and 1.2. If the font size is set without line-height, the default line height is a multiple between 1.0 and 1.2 of the font.

So what exactly is this multiple?

After tracking it in the Chrome console, normalize.css was introduced in the project to initialize the browser’s default CSS style. Set the HTML line-height to 1.15.

Why normalize. CSS set line-height to 1.15 by default?

Look at github’s Issues for normalize.css and find the answer in Issues 593, here.

The general process is as follows: someone found that the line-height of text of the same font and size is inconsistent in different environments. Then, someone did a test on CrossBrowsertesting and concluded that this problem does exist and varies greatly

When the font size was 100px, the most common line height was 115px. However, results varied from 101px on Mac Firefox to 136px on Android Chrome.

Finally, since most line heights are 115px, it is recommended to set the default line-height to 1.15 in order to solve the problem of inconsistent line heights for the same font and font size in different environments

Setting line-height to 1.15 is intended to address environmental compatibility issues. So, why not set line-height:1 to address compatibility issues, and also to address the issue of line height not matching the UI design? .

Set Overflow: Hidden to display incomplete fonts

Font-size: 10.0pt; font-family: arial, sans-serif; font-size: 10.0pt; overflow:hidden;

dphyTxg

The code is as follows:

<span style="
font-size:100px;
line-height:1;
overflow:hidden;
border:1px solid #ddd;
display:inline-block">dphyTxg</span>
Copy the code

Note: You can demonstrate this using div and then drop display:inline-block. Using div found the sample in markdown was messed up…

Why does setting the line height to match the font size make the text appear incomplete?

Only here can we really enter into the deep-seated reason exploration.

To answer this question, it is necessary to understand font metrics first, and to refer to other article instructions, as follows:

  1. The original address
  2. Deep dive CSS: font metrics, line-height and vertical-align
  3. EM Square
  4. FontForge

The brief explanation is as follows:

  1. We setfont-sizeThe height of the font actually corresponds to the fontEM squarePart of the
  2. Fonts can be overridden at design timeEM squarePart of the
  3. Font actual design withEM squarePartially consistent,line-height:normalwithline-height:1equal
  4. As you can see from the picture above,ascender+descender>Em Size 即1100 + 540 > 1000At this time,The line - height: 1.64So the default line height for 100px text is 164px

The sample analysis

Using Microsoft Yahei, the default font in Windows, as an example, we can actually calculate line-height.

h1

line-height:

The code is as follows:

<h1 id="font" style="line-height:normal; font-size: 100px; Font-family: Microsoft Yahei">h1</h1>
<p>line-height: <code id="o1" style="font-size: 50px"></code></p>
<script>
  document.getElementById('o1').textContent = window.getComputedStyle(document.getElementById('font')).height;
</script>
Copy the code

As you can see from the top, Microsoft Yahei is 100px in height and 132px in height on Windows. Check with FontForge to see if that’s true.

As can be seen from the figure above, (ascender+ Descender)/Em Size is used, i.e. (2167+536)/2048≈1.32, i.e. line-height is 1.32.

conclusion

  1. line-height:normalThe value of is related to the font, which varies in different environments
  2. Incomplete display occurs when line-height is set to a value less than the default value
  3. Normalize. CSS sets line-height to 1.15 by default. If the normal value of line-height is greater than 1.15, the text will not be displayed completely
  4. To solve the problem that font line-height is inconsistent on different platforms, select the maximum value of Normal on different platforms based on the font

A bloodbath and reflection caused by line-height

Author’s Official Account: