Home > Developer > Web Develop
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
