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. web服务器内置对象,或者说是ServletAPI的实例

    final javax.servlet.jsp.PageContext pageContext; javax.servlet.http.HttpSession session = null;   // ...

  2. 使用OLEDB读取excel和csv文件

    这是我第一次在博客上写东西,简单的为大家分享一个oledb读取文件的功能吧,这两天在做一个文件导入数据库的小demo,就想着导入前先在页面上展示一下,之前调用Microsoft.Office.Inte ...

  3. C#垃圾回收机制

    C#属于托管的面相对象的语言,内存回收机制就是一个代表, C#有一套类似"全自动"的垃圾回收机制,也就是虚拟机会自动来判断执行内存的回收, 我们一般常用的Dispose(),Usi ...

  4. Android实现抽奖转盘

    一.SurfaceView认识及的应用的思路 SurfaceView继承自(extends)View,View是在UI线程中进行绘制: 而SurfaceView是在一个子线程中对自己进行绘制,优势:避 ...

  5. Android ViewPager的简单实现

    研究了两天ViewPager,看了几篇网上的帖子,但总的来说看得一头雾水,理不清头绪,偶然发现了一篇简单易懂的帖子,讲的调理比较清晰,原文链接附在文后.   在本例中使用ViewPager + Fra ...

  6. Part 2 Creating, altering and dropping a database

    A SQL Server database can be created, altered and dropped1. Graphically using SQL Server Management ...

  7. C# 输出24小时格式时间

    比如   MessageBox.Show(DateTime.Now.ToString("yyyy-MM-dd hh:mm:ss")); 会输出  2014-4-3 5:08:4[1 ...

  8. sql修改字段长度

    语法: alter table <表名> alter column <字段名> 新类型名(长度) 示例:假如有名T1,字段名F1,原来F1为varchar(3),现在要改为va ...

  9. UILabel自适应高、宽

    根据Label和字体大小自适应高度 - (CGFloat)getHeightWithLabel:(UILabel *)label andFontSize:(CGFloat)size { label.n ...

  10. Revit二次开发-BIM模型导出

    最近一个月一直在研究Revit二次开发-BIM模型的导出,在网上找了很多相关资料学习.下面简单介绍一下我最近做的这个BIM模型的导出功能. 开始尝试使用Revit2015的样例程序里提供的读取模型几何 ...