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. highcharts设置Area颜色透明度

    $(function () { $('#container').highcharts({ chart: { type: 'area' }, xAxis: { categories: ['Jan', ' ...

  2. TortoiseSVN 更新时忽略指定文件夹

    命令行可以这么来svn update –set-depth=exclude 文件夹 那么TortoiseSVN客户端呢?在文件夹右键中的”更新至版本(U)”更新深度选”排除”,确定,搞定下次更新就不会 ...

  3. HTML CSS编码规范(黄金定律)

    HTML 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 嵌套元素应当缩进一次(即两个空格). 对于属性的定义,确保全部使用双引号,绝不要使用单引号. 不 ...

  4. 【CSS3】---为边框应用图片 border-image

    为边框应用图片 border-image 顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似.例如: background:url(xx.jpg) 10px 20px no ...

  5. Ajax Array Json 示例

    function functionName(){ var list=new Array(); $("td.classA").each(function(){ list.push($ ...

  6. 对App数据库元素进行简单的设计

    假如对<豆瓣>进行简单的数据库元素设计; 分析页面: 简单的豆瓣一共有以下页面{ 活动页面 活动详情页面 电影页面 电影详情页面 影院页面(一般不用到数据库,不及于数据库考虑) 我的{ 活 ...

  7. 20150301—ASP.NET的Repeater

    Repeater与GridView等数据列表一样,都是用来显示数据库的信息的,其中Repeater是最基本的列表形式,其用法也比较灵活. 一.Repeater的位置: 工具箱-数据-Repeater ...

  8. 20150224—ASP.NET基础

    一.如何使用VS2012创建ASP.NET的项目. 文件-新建-网站 出现以下对话框,选择ASP.NET的空网站(注意,左侧使用的模板是Visual C#) 选择好存放位置,名字之后 点击确定.这样就 ...

  9. HTTP Status 500 - An exception occurred processing JSP page /WEB-INF

    HTTP Status 500 - An exception occurred processing JSP page /WEB-INF/test/showCountry.jsp at line 11 ...

  10. Javascript this 解析

    Javascript中,this是一个非常有用的关键字, this是在运行时基于函数的运行环境绑定的,但是,如果使用的时候不注意,很容易就出错了. ECMAScript Standard对this的定 ...