Problem status
Use CSS font-size to set the font size in chrome.
Everything works when the font setting is greater than 12px
When the font setting is less than 12px, the font display is all 12px.
<!--Add by oscar999-->
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta name= "Author" content= "oscar999" >
</HEAD>
<BODY>
<div style= "font-size:16px" >font size 16px</div>
<div style= "font-size:15px" >Font size 15px</div>
<div style= "font-size:14px" >font size 14px</div>
<div style= "font-size : 13px ">font size 13px</div>
<div style=" font-size:12px ">font size 12px</div>
<div Style= "font-size:11px" >font size 11px</div>
<div style= "font-size:10px" >font size 10px</div >
<div style= "font-size:9px" >font size 9px</div>
</BODY>
</HTML>
From the above example, pages that are equal to less than 12px are displayed in the same font size.
In IE, Firefox appears to be normal.
cause Analysis
I don't know if it's a bug in Chrome itself, or it's intentionally designed by Chrome itself.
Look directly at the solution.
Workaround
The workaround can be considered in two directions,
The first is to set the relevant configuration of the browser to achieve the effect (for end users)
The second is by adding CSS styles. (made for developers)
Way One:
To set the minimum browser font limit:
1. Modification Method One
Settings-"Advanced Settings-" Web Content--"Custom fonts ...
Set it to the minimum font. (No restart required)
2. Modify method Two.
Locate the following files on the client machine
C:\Documents and Settings\ user name \local Settings\Application Data\google\chrome\user Data\default\preferences
"WebKit": {
"webprefs": {
"minimum_font_size": +,
"minimum_logical_font_size": +
}
}
Modify the above values to do so (restart Chrome)
In addition to dealing with the above two methods, a solution is also circulating on the network:
Settings – Options – Advanced options – Change font and language settings – language – Google Chrome language: English (United States)
Way two: Modify CSS
Mode one may be of little use to developers because it is not known or possible to modify the browser configuration for all end users.
Because Chrome is using the WebKit kernel, you can achieve your goals by adding the following CSS:
-webkit-text-size-adjust:none;
<!--Add by oscar999--> <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <HTML> <HEAD> <TITLE> New Document </ title> <meta name= "Author" content= "oscar999" > <style> html {-webkit-text-size-adjust:none} </style > </HEAD> <BODY> <div style= "font-size:16px" >font size 16px</div> <div style= "font-size : 15px ">font size 15px</div> <div style=" font-size:14px ">font size 14px</div> <div style=" font-size:13px ">font size 13px</div> <div style=" font-size:12px ">font size 12px</div> <div
Style= "font-size:11px" >font size 11px</div> <div style= "font-size:10px" >font size 10px</div>
<div style= "font-size:9px" >font size 9px</div> <div style= "font-size:8px" >Font size 8px</div>
<div style= "font-size:7px" >font size 7px</div> <div style= "font-size:6px" >Font size 6px</div> </BODY> However, there is one problem with this approach:
The size of the font does not change when you zoom in and out of the entire page. (Hold down the CTRL key while sliding the mouse wheel)