Fix Chrome Google browser does not support CSS settings less than 12px text

Source: Internet
Author: User

In the latest version of Google. I'm not supporting this property anymore.

Google Chrome is WebKit's kernel and has a-webkit-text-size-adjust private CSS property, which is
The achievable font size does not affect the device or browser.
The CSS style is defined as follows:
-webkit-text-size-adjust:none;


How to enable Google Chrome to support fonts less than 12px



The Siege master, who often deals with Web pages, should know. Google does not support fonts that are less than 12px.
There are many web solutions.
Like what. Modify the browser configuration. Modifies the browser language.
But as a web, we can't modify the user's browser. That's when it happens.
1
Private properties of the WebKit:
2
Html{-webkit-text-size-adjust:none;}
But, in the latest version of Google. This property is not supported anymore. So. This property ....
Have said goodbye to us ~

CSS3 has a new attribute transform
And the only thing we use is Transform:scale ()

Write a section of code
1
<body>
2
<p> I am a font that is less than 12PX </p>
3
</body>
Defining styles
1
body,p{margin:0; padding:0}
2
p{font-size:10px;}
Put it in the browser preview. Will find that the latest version of Google is no longer supported. or 12px?
That's why we used it.
1
-webkit-transform:scale (0.8); 0.8-bit zoom factor, specific to the actual needs of the modification
After the modified style is
1
body,p{margin:0; padding:0}
2
P{font-size:10px;-webkit-transform:scale (0.8);}
However, if this property will scale all properties of P. What if I have a background? Do I have a border? will be reduced!
So we modify the structure to
1
<p><span> I am a font that is less than 12PX </span></p>
Defines the style as
1
body,p{margin:0; padding:0}
2
p{font-size:10px;}
3
Span{-webkit-transform:scale (0.8);}
But you'll be surprised to find out, no. In fact, it is thought that-webkit-transform:scale (0.8); can only be scaled to define the width height
element, and span is an inline element, you cannot
We have amended to
1
body,p{margin:0; padding:0}
2
p{font-size:10px;}
3
Span{-webkit-transform:scale (0.8); Display:inline-block}
Why define Display:inline-block instead of Display:block?
A block is the exclusive line. What if I keep chasing after the elements. So convert to Inline-block

Put in Google Browser, run it will find the support font is small ~ ~ ~ Rest assured ...

But you'll find out. There will be a certain margin. Seemingly margin or padding spacing. This is the problem with scaling. The original bit
The 12px font size is also in place.
So, to modify the margin. Defined as negative:


Actually, it's not over.


Do you think it's over?
NO, we also need to go compatible with opera!!!
Why? Opera is now the latest version of the WebKit kernel ~ ~ ~ ~ Bitter Engineer Ah ~
But what about the new version of opera?
It's a 10px font. Then in the zoom, dare not imagine!
So we're going to modify the style to
1
body,p{margin:0; padding:0}
2
p{font-size:10px;}
3
Span{-webkit-transform:scale (0.8);-o-transform:scale (1); Display:inline-block}
Let opera's not scale.

Rest assured that opera still supports his private prefixes.


Now our code is like this!
01
<!doctype html>
02
03
04
<meta charset= "Utf-8" >
05
<title> Untitled Document </title>
06
<style>
07
body,p{margin:0; padding:0}
08
p{font-size:8px;}
09
Span{-webkit-transform:scale (0.8);-o-transform:scale (1); Display:inline-block}
10
</style>
11
12

13
<body>
14
<p><span> I am a font that is less than 12PX </span></p>
15
</body>
16

For convenience, we'd better define a class that makes it easy for us to call each other

Revision changed to
01
<!doctype html>
02
03
04
<meta charset= "Utf-8" >
05
<title> Untitled Document </title>
06
<style>
07
body,p{margin:0; padding:0}
08
p{font-size:8px;}
09
. Shrink{-webkit-transform:scale (0.8);-o-transform:scale (1); Display:inline-block}
10
</style>
11
12

13
<body>
14
<p><span class= "Shrink" > I am a font less than 12PX </span></p>
15
</body>
16
If you have a good solution. Welcome to leave a message to me!

Fix Chrome Google browser does not support CSS settings less than 12px text

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.