The tutorial brought to you today is a solution to the problem that Google Chrome does not support setting CSS smaller fonts.
Let's first look at the display of each font in ie, Firefox, and Google browsers
ie below:
Under Firefox:
Under Google:
【summary of a problem:】
① From the above figure, it is obvious that when the font size of css is set to 12px or less under Google, the display is the same size, and the default is 12px;
Then there has always been a way on the Internet to add a Google private property to the current style: -webkit-text-size-adjust:none;
However, after verification, I found that it is no longer valid in the new version of Google. So how should we set the fonts under Google?
We can use a property in CSS3: transform:scale()
②The Chinese version of chrome has a problem of 12px font limitation, that is, when the font is smaller than 12px, it is displayed in 12px. This problem is not prominent in Chinese websites, because Chinese fonts are generally defined as greater than or equal to 12px in order to display clearly. But if it is some English website, it is hard to say. At this time, the limit of 12px will destroy the beauty of the page, and even cause the page to be deformed because the text becomes larger.
[Old solution: (The new version is no longer compatible)]
It can be solved by using the private CSS property of -webkit-text-size-adjust of the Webkit kernel. For example, the following code can be successfully solved, through which the font size can be achieved without being affected by terminal devices or browsers. The styles are defined as follows:
.abc{ -webkit-text-size-adjust:none; font-size:10px; }
As long as -webkit-text-size-adjust:none; is added, the font size is not limited.
Note: If this property is used, the browser's font will not be able to use the zoom function! (It is the function of holding down the CTRL key and scrolling the middle mouse button up and down)
[Try to change units - useless]
Some friends say that it is useful to use em (character) as a unit to define the font size. I have personally tested it, and the font with the meaning of em is not smaller than 12px in Google Chrome. So it is useless.
Higher versions of Chrome Google Chrome no longer support fonts smaller than 12px:
The -webkit-text-size-adjust:none; solution will not work after chrome is updated to version 27.
Therefore, the high-version chrome Google browser no longer supports the -webkit-text-size-adjust style, so use it with caution. In order to be compatible with major browsers, it is best to set the minimum text font size to 12px and above.
What should we do then? Think about it, there is still a solution.
Chrome supports CSS3. So can we write, -webkit-transform : scale() method to solve it?
Regarding the transform scaling property of css3, I made a summary in the following article http://570109268.iteye.com/admin/blogs/2406787
【The latest solution】
Prefix -webkit-google before this property, then you can control the size of the font, the code is as follows:
<style>
p{font-size:10px;-webkit-transform:scale(0.8);}
/*The number 0.8 here is the scaling ratio, which can be changed according to the situation. */
</style>
<p>Zhongmeng test 10px</p>
(1) Valid after testing
[Note] But it should be noted that if the <p> element has a background, giving this attribute will make the background also change, so we can put a <span> in the <p> tag.
<style>
p span{font-size:10px;-webkit-transform:scale(0.8);}
</style>
<p><span>Zhongmeng test 10px</span></p>
(2) At this time, the test is found to be invalid
This is because the transform:scale() property is only for elements that can be scaled and can define width and height, while span is an inline element;
We can define a display: block for the span element, and that's it.
<style>
p span{font-size:10px;-webkit-transform:scale(0.8);display:block;}
</style>
<p><span>Zhongmeng test 10px</span></p>
In this way, the font can be changed after walking under Google Chrome.
DIVCSS5 recommends:
1. Use pictures: If the content is fixed and unchanged, use the content of less than 12px text to be cut out to make pictures, which will not affect compatibility or affect the appearance.
2. Use a font size of 12px and above: In order to be compatible with major mainstream browsers, it is recommended to set a font size greater than or equal to 12px when designing artwork. If you are receiving an order, you need to explain to the customer that browsers smaller than 12px are not compatible and so on.
3. Continue to use the font size and style setting less than 12px: if you don't consider chrome, you can ignore compatibility, and set -webkit-text-size-adjust:none when setting objects less than 12px to achieve maximum compatibility.
4. Use fonts above 12px: For compatibility and for simpler code, reconsider compatibility under weight.
I believe that after reading these cases, you have mastered the method
Related Reading:
Front-end js framework summary and usage explanation
The above is that Google Chrome does not support text with CSS settings less than 12px. What should I do? details of