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. html+CSS--水平居中设置（定宽块状元素）

    来源:http://www.imooc.com/code/4336 当被设置元素为 块状元素 时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素. ...

  2. ES6:JavaScript 新特性

    我相信,在ECMAScript.next到来的时候,我们现在每天都在写的JavaScript代码将会发生巨大的变化.接下来的一年将会是令JavaScript开发者们兴奋的一年,越来越多的特性提案将被最 ...

  3. JQuery Mobile 实战一

    今天我们来使用JQuery Mobile来开发一个web mobile app. 要实现的如下所示效果: 开始: 第一步:添加JS包等引用,直接去官网下载最新的JQuery Mobile 包,http ...

  4. PHP与MySQL中编码的设置

    php代码 header("Content-type:text/html;Charset=utf8"); myql_query("set names utf8" ...

  5. Android 手势滑动，多点触摸放大缩小图片

    效果展示: 基本思路: <1>首先写一个图片控制类ImageControl,实现对图片控制的的基本操作,我们的图片控制类ImageControl是继承自ImageView自定义的视图: & ...

  6. Mysql按时间段分组查询来统计会员的个数

    1.使用case when方法(不建议使用)-  代码如下 复制代码 SELECT    COUNT(DISTINCT user_id) user_count,    CASE    WHEN cre ...

  7. jQuery AJAX Call for posting data to ASP.Net page ( not Get but POST)

    the following jQuery AJAX call to an ASP.Net page. $.ajax({ async: true, type: "POST", url ...

  8. Windows下用cmd命令安装及卸载服务

    第一种方法: 1. 开始 ->运行 ->cmd2. cd到C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727(Framework版本号按IIS配置) ...

  9. AMQ学习笔记 - 13. Spring-jms的配置

    概述 如何使用spring-jms来简化jms客户端的开发? 这篇文章主要记录如何配置以便以后复用,而非原理的讲解,有些内容我 没有掌握原理. producer端 producer端负责发送,这里使用 ...

  10. 精简DropDownList用法

    ViewBag.TypeID = new SelectList(db.TType, "ID", "Name", model.TypeID); @Html.Dro ...