Chrome Minimum Font 12px

Source: Internet
Author: User
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)


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.