Detailed explanation of android Chinese font upward offset solution

When developing webapp, I found that Chinese at android will inexplicably shift upward. In order to solve this problem, many methods were tried, and finally the following solution was used.

1. bug appears

At present in the development of webapp, in the debugging time, found that the Chinese project has 1 point upward offset. The specific performance is: use developer tools to view elements, and the true height and position of elements are different from the text. Columns such as, 1 span Adj. font-size And line-height Are set to 16px When debugging, the height of the element is really 16px However, the height of Chinese does not seem to be more than 16px And the displayed position is obviously out of the size range of the element and shifted upward.

At first, I thought it was caused by style, so I tried various modifications to css, but it didn't work at all. Later, I saw using "positioning" or "top margin" to force the position of words on the Internet, but found this method too troublesome, and finally gave up this scheme.
Later, I thought of using ubuntu It is suspected that the default font of the system may cause this problem. So I downloaded a font file (using "Siyuan bold"). Then configure the global font and find that this problem can be solved.

2. The second question arises

Although using custom fonts solves the problem of Chinese text offset, the performance is not ideal because the font file is too large. It is not ideal to put font files on the server or use cdn. Finally, I found the plug-in fontmin. The principle of this plug-in is to change the 字符集 Filter, and the generated new font file contains only the character set to be used.

3. Final plan

Although fontmin Character set filtering is possible, but it is uncertain which Chinese characters are needed in the project. But it doesn't matter. After experiments, use one only 0 The font file of this character set can also solve our initial problem. Let's look at the implementation steps.

3.1 Font Download

Download a Chinese font on the Internet. Here I use google fonts. First, test 1. After referring to this font directly, can you solve the font offset? If possible, proceed to the next step.

3.2 Installing fontmin

Global installation is not recommended here, but can be installed in the project.

npm install fontmin -D

Then write the configuration file. Here I wrote it in the root directory of the project.

// fontmin-config.js

var Fontmin = require("fontmin")
var srcPath = "./src/assets/fonts/my-font.ttf" //  Font source file 
var destPath = "./src/assets/font-output/" //  Output path 
var text = "0" //  Filtered character set 

var fontmin = new Fontmin()
  .src(srcPath) //  Input configuration 
  .use(
    Fontmin.glyph({
      text: text
    })
  )
  .dest(destPath) //  Output configuration 

fontmin.run(function(err, files, stream) {
  if (err) {
    console.error(err)
  }
  console.log("done")
})

Then execute

cd your-project-dir
node ./fontmin-config.js

3.3 Configuring css

// global.css

@font-face {
  font-family: "my-font";
  src: url("../fonts/my-font.ttf");
}

html,body{
  font-family: "my-font", sans-serif;
}