This is the seventh day of my participation in the August More text Challenge. For details, see:August is more challenging

preface

In CSS we often use fonts, colors, borders, internal and external spacing, images, etc.

In addition, there are a few less commonly used but useful little gestures (knowledge) in CSS.

Without further ado, cut to the chase.

Text rendering

In general, text is one of the most basic elements of a page.

For aesthetics and unifying the theme, we change the font of the text to fit the theme of the page.

->text-rendering<-

This property will give us precise control over font rendering.

The text-rendering CSS property defines how the browser rendering engine renders the font. Browsers trade off speed, clarity, and geometric accuracy. – MDN

It has four values.

  • auto
    • How the browser optimizes speed, legibility, and geometric accuracy when drawing text according to rules.
  • optimizeSpeed
    • Speed will take precedence when drawing text.
    • This will invalidate the effect of spacing and hyphenation.
  • optimizeLegibility
    • Legibility is given priority when drawing text.
    • Word spacing and hyphenation are valid
    • There are fatal performance issues in Android devices
  • geometricPrecision
    • Geometric accuracy takes precedence when drawing text
    • In the browser, if your font size has a decimal point, the browser will automatically round it. When you use this property and the rendering engine supports decimal point rendering, you will have the correct font size.

It’s worth noting that the text-rendering property is not defined in any CSS standard. It is actually an SVG property. But the Gecko/WebKit/Blank browser allows you to apply this attribute to HTML elements.

backface-visibility

This property makes the back of the specified element invisible to the observer (that is, the user).

Elements that transform using 3D space have a mirror image of their back. This property allows you to set whether the back is visible or not.

There are two property values:

  • visible
    • The back of the element is visible to the user
  • hidden
    • The back of the element is not visible to the user

The compatibility of this property is ok.

It’s worth mentioning that this is an experimental function.