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. 重磅消息：JavaFX官方文档翻译完毕

    经过XMan团队业余时间半年的努力,终于将JavaFX官方文档全部翻译完毕,内容已经全部在http://www.javafxchina.net中发表. 中文文档具体目录如下: 第一篇 开始学习Java ...

  2. Android聊天界面刷新消息

    今天,我想来分享一下自己初用线程的感受,虽然写法略显粗糙,并没有用线程Thread中核心的Looper,MessageQueue消息队列这些知识,正因为是初学线程,所以就只用最基础的来写了,慢慢学习优 ...

  3. AndroidTestCase简单使用

    1.根据需求创建TestCase类,实现测试用例.此类需继承AndroidTestCase类 public class TestCase extends AndroidTestCase { @Over ...

  4. (火炬)MS SQL Server数据库案例教程

    (火炬)MS SQL Server数据库案例教程 创建数据库: CREATE DATABASE TDB //数据库名称 ON ( NAME=TDB_dat,//逻辑文件名 在创建数据库完成之后语句中引 ...

  5. C语言知识总结（1）

    C语言中的数据类型 存在疑问,具体参考下面评论 变量的存储 变量实例 ; ; 内存由大到小寻址,优先分配内存地址较大的字节给变量.b的内存地址比a大 每个变量都有地址:第一个字节的地址就是变量的地址 ...

  6. 根据DateTime来获取当天是周几（已完结）

    只需要以下代码: @System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetDayName(item.CreateTime. ...

  7. [转]基于SQL脚本将数据库表及字段提取为C#中的类

    开发时,勉不了需要使用SQL直接与数据库交互,这时对于数据库中的表名及字段名会使用的比较多.如果每使用一次都复制一个,实在蛋疼.所以就考虑将其做成const常量.但是数据库中的表和字段相当多,一个一个 ...

  8. Java对象初始化详解(转)

    在Java中,一个对象在可以被使用之前必须要被正确地初始化,这一点是Java规范规定的.本文试图对Java如何执行对象的初始化做一个详细深入地介绍(与对象初始化相同,类在被加载之后也是需要初始化的,本 ...

  9. Angular2中的metadata(元数据)

    @Attrubute() 从host element 中获得普通(不是@Input)属性对应的值 适用于组件嵌套或指令, 从父组件向子组件传递数据 app.component.ts import {C ...

  10. HTML 5中的文件处理之FileAPI(转载)

    原文地址:http://developer.51cto.com/art/201202/319435.htm 在众多HTML5规范中,有一部分规范是跟文件处理有关的,在早期的浏览器技术中,处理小量字符串 ...