Google does not support fonts smaller than 12px. The ultimate solution_html/css_WEB-ITnose

Each browser manufacturer will have its own design subjectivity, and these starting points may seem good but often deeply hurt programmers.

1. Requirements

The rendering is specified for Google Chrome, and the font size is 6-8px (for printing small sizes).

2. Explore

2.1 CSS HACK

Searched many web pages, all pointing to one result:

html

{      -webkit-text-size-adjust:none;}

Put the above code at the beginning of the document. . .

Yes, it doesn’t work. . . The result is a series of negative reactions such as speaking in a rough tone, blushing, and staring.

2.2 The Spring of CSS 3

I happened to bring a book with me, which talks about the features of CSS3. After quickly browsing the whole book, I discovered a feature:

div {    transform:scaleY(0.8);}

? ? Scale the specified label. For example, the above code means to adjust the height of the div and its sub-elements (including text, including font size) ( Y) Decrease to 80%.

Similar, width scaling: scaleX(pre), overall scaling scale(pre).

You can indeed zoom in after trying it.

However, if the HTML is like this:

<div id="d1">your text</div><div id="d2">your text2</div>

Then there will be a big white space between d1 and d2. How to remove this white space? Where is Bai?

Two iron laws:

{     margin-top:-12px;               padding-bottom:-12px;}

Using the negative value of marin, you can move the margin in the specified direction, that is, the entire element;

Using the negative value of padding, you can move the inner margin in the specified direction, that is, expand the element body; after

, the reduced text does not change, so the effect is achieved? ?Reduce font size in Google Chrome and execute as normal.

3. Summary

Transform is actually an implementation of computer graphics, including 2D transformation, 3D transformation, etc.

The foundation is very important, every effort will not be in vain~.