CHROME 最小字体限制为12PX的终极解决方案

本文由五月雨恋提供，转载请注明出处。

　　

　　相信不少做网站的用户会有这样一个问题，Chrome 默认最小字体是12px（最新版英文也有此问题），这个是 Chrome 为了更好显示中文设计的，但是这样一来就会出现某些上标、下标字体过大，影响用户体验。鉴于本人发文不多，文采欠佳。就直接上解决方案了，希望能给以网友帮助。

　　先上图，然后上代码

　　-效果图

　　-源码

 <!doctype html>

 <html lang="zh">

 <head>

     <meta charset="UTF-8">

     <title>解决 CHROME 最小字体为12PX</title>

     <link rel="stylesheet" href="css/base.css">

     <style type="text/css">

         .fz6{

             font-size: 6px;

         }

         .fz12{

             font-size: 12px;

             line-height: 20px;

         }

         @media screen and (-webkit-min-device-pixel-ratio:0) {

             .-webkit-fz6-box{

                 width: 400px;

             }

             .-webkit-fz6{

                 /* defout most smallest:12px*/

                 -webkit-font-size: 12px;

                 -webkit-line-height: 20px;

                 /*  字体缩放12×0.5= 6px,

                     translate调整位置

                     取父级盒子宽度的负50% -400px * 50% = -200px*/

                 -webkit-transform: scale(0.5) translate(-200px,0px) ;

                 /* -ms-transform: ;

                 -o-transform: ;

                 transform: ;

                 -webkit-min-device-pixel-ratio:0;*/

                 -webkit-letter-spacing: 1px;

             }

         }

         .box-fieldset{

             width: 400px;

             height: 40px;

             font-size: 16px;

             line-height: 28px;

         }

         .fieldset{

             border-top: 1px solid #ccc;

             border-right:0px;

             border-bottom: 0px;

             border-left: 0px;

         }

         .legend-txt-c{

             text-align: center;

         }

         .sub,.sup{

             font-size: 8px;

             line-height: 14px;

         }

         @media screen and (-webkit-min-device-pixel-ratio:0) {

         /* 针对Google Chrome、Safari 3.0、Opera 9 的CSS样式 */

             .-webkit-w16{

                 width: 16px;

                 display: inline-block;

             }

             .-webkit-sub,.-webkit-sup{

                 -webkit-transform: scale(0.5) translate(-8px,0px) ;

                 /* -ms-transform: ;

                 -o-transform: ;

                 transform: ;

                 -webkit-min-device-pixel-ratio:0;*/

                 -webkit-letter-spacing: 1px;

             }

         }

         @-moz-document url-prefix() {

             /* 针对Firefox的CSS样式 */

             .-moz-sub,.-moz-sup{

                 position: relative;

             }

             .-moz-sub-span{

                 position: relative;

                 top: -8px;

             }

             .-moz-sup-span{

                 position: relative;

                 top: 0px;

             }

         }

     </style>

 </head>

 <body>

     <p class="fz12">这段话的实际字体大小为12px，几乎所有主流浏览器都能正常识别</p>

     <p class="fz6">这段话的实际字体大小6px，Chrome 默认最小字体是12px，这是Chrome为了更好显示中文设计的。但是这样一来就会出现某些上标、下标字体过大，影响用户体验。（例如2<sup>2</sup>,CO<sub>2</sub>）</p>

     <div class="-webkit-fz6-box">

         <p class="fz6 -webkit-fz6">这段话的实际字体大小6px。已经解决CHROME浏览器不能正常显示的问题</p>

     </div>

     <div class="box-fieldset">

         <fieldset class="fieldset">

         <legend class="legend-txt-c">使用场景</legend>

             <p>《高中化学》

                 二氧化碳：CO<sub class="sub -moz-sub"><span class="-webkit-w16 -webkit-sub -moz-sub-span">2</span></sub>；

                 水：H<sub class="sub -moz-sub"><span class="-webkit-w16 -webkit-sub -moz-sub-span">2</span></sub>O；

                 氢气：H<sub class="sub -moz-sub"><span class="-webkit-w16 -webkit-sub -moz-sub-span">2</span></sub>；

             </p>

             <p>《高中数学》

                 2<sup class="sup -moz-sup"><span class="-webkit-w16 -webkit-sup -moz-sup-span">2</span></sup>；

                 10<sup class="sup -moz-sup"><span class="-webkit-w16 -webkit-sup -moz-sup-span">2</span></sup>；

                 2<sup class="sup -moz-sup"><span class="-webkit-w16 -webkit-sup -moz-sup-span">10</span></sup>；

             </p>

           </fieldset>

     </div>

 </body>

 </html>

最后提供Demo下载：http://yunpan.cn/cZyATmRAZ4Xgi （提取码：6fe5）

【原创】CHROME 最小字体限制为12PX的终极解决方案的更多相关文章

  1. chrome中怎么避免最小字体只能为12px

    在chrome下,fontSize的像素>=12px,因此不能通过调整html.fontSize=10px来定位rem. 但是我们可以通过设置html{font-size:625%;},p{fo ...

  2. chrome最小字体12px如何修改

    在html标记样式里加入 <style> html { -webkit-text-size-adjust:none } </style> 这样的方式可以设置chrome字体小于 ...

  3. chrome最小字体12px

    http://www.mamicode.com/info-detail-512021.html http://www.divcss5.com/wenji/w738.shtml

  4. Chrome浏览器字体设置低于12px无效

    在Chrome 在IE11                 本来以为是padding问题导致出现左右两边的底部不在同一直线(在IE上),在Chrome显示是正常的,查了一下,IE11和Chrome都是 ...

  5. 针对谷歌默认最小字体12px的正确解决方案 （css、html）

    今天晨会,产品要求把以前12px的字体改小一点,我心想这有什么难的,就随口答应了.哪知,改css的时候,谷歌浏览器中font-size小于12px时,字体就不会再缩小了.当时我的第一反应就是会不会是其 ...

  6. 换算rem的宽度和高度不生效 chrome字体最小为12px

    现在很多前端都用rem来单位元素和字体大小 一般的设置是 html{ font-size:62.5%; } 换算来源 1rem = 16px 10/16 = 0.625 这样10px 就等于了1rem ...

  7. Chrome浏览器最小字体12px限制问题解决方法

    问题描述: 页面宽度有限的情况下显示大数据,采用font-size:8px来压缩字体大小,版本 25.0.1547.66及以下版本的chrome浏览器没有问题,后续版本的就不可以了: 问题原因: 浏览 ...

  8. css解决谷歌，360浏览器默认最小字体为12px问题

    当我们设置前台html页面样式问题字体小于12px;时,会发现不管怎么设置小于12px字体,在谷歌.360浏览器上都不生效. 但在火狐等浏览器上却可以正常设置,当你打开谷歌360的设置后会发现,它们设 ...

  9. Linux 环境下如何使 Chrome 浏览器字体更漂亮

    Windows 就免谈了,本身字体渲染技术 Cleartype 以及 DirectWrite 就稀烂得一塌糊涂.Mac 下面本来字体渲染就很好,所以关键就是在 Linux 下如何使 Chrome 的字 ...

随机推荐

  1. CF 107E 多边形面积并

    107E Darts 题目:给出n个矩形,问落在n个矩形交的部分的概率 分析:裸的多边形面积并. 代码略..

  2. 转：自建CDN防御DDoS（1， 2， 3）infoq

    本文中提到的要点: 1.  针对恶意流的应对方法与策略.(基本上,中级的,顶级的) 2.  IP分类的脚本 3.  前端proxy工具的选择与使用. 4.  开源日志系统的选择与比较. (http:/ ...

  3. iOS小技巧 - 和屏幕等宽的Table分割线

    前言 因为本人也是学习iOS才一个多月,在写程序的过程中经常会遇到一些看似应该很简单,但是要解决好却要知道一点小trick的问题. 因此后面会陆续记一些这类问题,一来加深印象,二来也可以做个备忘录. ...

  4. 实现toolbar透明的背景效果

    //MyToolbar.h 头文件 @interface MyToolbar : UIToolbar @end //MyToolbar.m 实现文件 #import "MyToolbar.h ...

  5. php学习笔记6--php中的文件包含 include,require,include_once,require_once

    php中的文件包含 include,require,include_once,require_once 文件包含:是指将一个文件的内容包含进另外一个文件,有利于代码的复用等.php中文件包含指令有4个 ...

  6. Javascript之图片上传预览

    使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...

  7. 我的博客模板（线框图wireframe）

    不久前看到一篇介绍定制网页浏览的方法,当时就想着,我把我的博客页也修改下,在手机浏览的时候,也能漂亮的显示出来.以后写的文章的话,也可以分享的微信朋友圈里面和朋友分享. 具体步骤参考:http://w ...

  8. cocos2dx-lua 批量打包及修改

    coco2dx目前大部分开发者肯定是用lua解决问题,问题来了,每次改一下lua配置可能你每次都得运行 cocos luacompile -p android 针对不同的平台,可能会有某些配置会略有不 ...

  9. Cocos2d-JS自定义粒子系统

    除了使用Cocos2d-JS的11种内置粒子系统外,我们还可以通过创建ParticleSystem对象,并设置属性实现自定义粒子系统,通过这种方式完全可以实现我们说需要的各种效果的粒子系统.使用Par ...

  10. Android App测试要点

         本文主要内容,转载自 http://www.51testing.com/html/04/344504-849373.html,      在这里,主要是整理一下app测试的总体思路,这里的a ...