Ensuring the correct vertical position of large text

Tobi Reif points out that the vertical positions of custom fonts with super-large fonts can be very different even on the same browser and on different operating systems. Solution? Did you know that some CSS properties are only valid within the @font-face block? They are called "descriptors", and font-display is a common example. There are other low-supported properties, such as ascent-override , descent-override , and line-gap-override . Chrome supports these properties and can be used to solve this problem.

I like this approach, which overwrites the "metrics" of local (rollback) fonts to match the custom font you will load so that when the custom font is loading, the text will hardly move. I hate FOUT (I know it's good for performance in theory), but I can still accept it if text substitution doesn't cause a large shift in content.

The above is the detailed content of Ensuring the correct vertical position of large text. For more information, please follow other related articles on the PHP Chinese website!