Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to solve the upward deviation of Chinese fonts in android". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1.bug appears

Currently in the development of webapp, when debugging, found that the Chinese in the project is a little bit upward deviation. The specific performance is as follows: use developer tools to view the element, the true height and location of the element is different from the text. For example, both font-size and line-height of a span are set to 16px, and when debugging, the height of the element is indeed 16px, but the height in Chinese does not seem to be just 16px, and the position displayed is obviously beyond the size range of the element, offset upward.

At first I thought it was caused by style, so I tried various changes to css, but to no avail. Later, I saw on the Internet that I used "location" or "top margin" to force the position of the text, but found that this method was too troublesome, and finally gave up this plan.

Later, I thought of using ubuntu, and suspected that this problem might be caused by the default font of the system. So I downloaded a font file (using "source boldface"). Then configure the global font and find that you can solve this problem.

two。 The second problem arises.

Although the use of custom fonts solves the problem of Chinese text offset, the performance is not ideal because the font file is too large. Either putting the font file on the server or using cdn is not ideal. Finally found the plug-in fontmin. The principle of this plug-in is to filter the character set in the font file to generate a new font file that contains only the text character set to be used.

3. The final plan

Although fontmin can filter the character set, it is uncertain which Chinese text is needed in the project. But it doesn't matter, through experiments, using a font file with a character set of only 0 can also solve our initial problem. Let's take a look at the implementation steps.

3.1 Font download

Download a Chinese font from the Internet. I use google fonts here. First test whether the font offset can be resolved after referencing the font directly. Move on to the next step, if possible.

3.2 install fontmin

Global installation is not recommended here, just install it in the project.

Npm install fontmin-D

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

/ / fontmin-config.jsvar 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")})

And then execute

Cd your-project-dirnode. / fontmin-config.js

3.3 configure css

/ / global.css@font-face {font-family: "my-font"; src: url (".. / fonts/my-font.ttf");} html,body {font-family: "my-font", sans-serif;} "how to solve the upward deviation of Chinese fonts in android", thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.