问题:为什么不建议将 font-size 设置为 12px 以下?如果一定要设置为 12px 以下要怎么做?

先看看把 font-size 设置为 12px 以下时的效果:(浏览器为 Chrome 52)

在其他浏览器上效果却不一样:

因为 Chrome 这款任性的浏览器做了如下限制:

1. font-size 有一个最小值 12px(不同操作系统、不同语言可能限制不一样),低于 12px 的,一律按 12px 显示。理由是 Chrome 认为低于 12px 的中文对人类是不友好的。

2. 但是允许你把 font-size 设置为 0.

3. 这个 12px 的限制用户是可以自行调整的,进入 chrome://settings/fonts 设置,滚动到最下方你就可以调整 12px 为其他值。

如果我一定要设置小于 12px 的字体怎么办?

1. Chrome 29 版本之前,你可以使用 `-webkit-text-size-adjust: none;` 来解除这个限制。29 版本后,就不能这样做了。

2. 你可以先设置 12px,然后使用 transform: scale(0.833333) 将元素缩小,效果跟 10px 很接近。不过要注意的是,transform: scale 出了缩小 font-size,也会缩小其他一些属性,需要多测试。

好了,今天的分享就到这里,想要更多交流可以加我们的前端交流3群:222459918,目前已有四百多人。

为什么不建议将 font-size 设置为 12px 以下?如果一定要设置为 12px 以下要怎么做?的更多相关文章

  1. GetPropInfo Font Size

    设置font size,遍历所有控件,有的控件没有font属性,所以要用GetPropInfo判断 if (GetPropInfo(cmp, "font")) function G ...

  2. hiho #1288 微软2016.4校招笔试题 Font Size

    #1288 : Font Size 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Steven loves reading book on his phone. The ...

  3. LaTeX :font size 修改字体大小的几种方式

    调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \hu ...

  4. unity UGUI text font size对性能影响较大

    Font Size对ugui text的性能影响非常大. <Cube Duck Run>在itouch5上测试是很流畅的,但是在iphone5上测试,在game over后显示历史最高分时 ...

  5. Markdown更改字体、颜色、大小,设置文字背景色,调整图片大小设置居中,插入表格等方法

    Markdown 通过简单标记语法,使普通文本内容具有一定格式.但它本身不支持修改字体.字号与颜色等功能的. 一.更改字体大小.颜色.更改字体 Markdown语法 <font face=&qu ...

  6. 【配置】检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(非简单设置为【经典】模式)。

      ×   检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(非简单设置为[经典]模式). 我们将ASP.NET程序从IIS6移植到IIS7,可能运行提示以下错误: HTTP 错误 5 ...

  7. redis密码设置、访问权限控制等安全设置

    redis作为一个高速数据库,在互联网上,必须有对应的安全机制来进行保护,方法有2,如下. 1.比较安全的办法是采用绑定IP的方式来进行控制.  请在redis.conf文件找到如下配置 # If y ...

  8. 【转】检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(非简单设置为【经典】模式)。

    检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(非简单设置为[经典]模式). 我们将ASP.NET程序从IIS6移植到IIS7,可能运行提示以下错误: HTTP 错误 500.23 ...

  9. 关于LinearLayout设置权重后width或height不设置0dp的影响说明

    摘要 平时没那么注意LinearLayout布局时权重的问题,设置了权重属性后,通常建议将width或height的属性值设置为0dp,有时候设置权重后,还是习惯将width或height的属性设置为 ...

  10. APUE学习之三个特殊位 设置用户ID(set-user-ID),设置组ID(set-group-ID),sticky

    设置用户ID(set-user-ID),设置组ID(set-group-ID),sticky   set-user-ID: SUID      当文件的该位有设置时,表示当该文件被执行时,程序具有文件 ...

随机推荐

  1. Android之上下文context

    Context,中文直译为“上下文”,SDK中对其说明如下: 1.它描述的是一个应用程序环境的信息,即上下文. 2.该类是一个抽象(abstract class)类,Android提供了该抽象类的具体 ...

  2. Redhat 7改动默认执行级别方法 --RHEL7使用systemd创建符号链接指向默认执行级别

    今天装了下正式版的RHEL7,发现熟悉的inittab中没有了改动默认执行级别,打开inittab例如以下 [root@localhost init.d]# vi /etc/inittab # ini ...

  3. springboot 使用model重定向到html模板,对数据进行展示

    1:使用springboot, ,html使用thymeleaf,nekohtml模板 在build.gradle中添加依赖 buildscript { repositories { mavenCen ...

  4. 微博开源框架Motan初体验

    前两天,我在开源中国的微信公众号看到新浪微博的轻量Rpc框架--Motan开源了.上网查了下,才得知这个Motan来头不小,支撑着新浪微博的千亿调用,曾经在2014年的春晚中有着千亿次的调用,对抗了春 ...

  5. 3.7 Templates -- Links

    一.The {{link-to}} Helper 1. 使用{{link-to}}创建一个指向route的链接: app/router.js Router.map(function() { this. ...

  6. cocos进阶教程(3)Lua加密技术

    如果开发者不想让游戏中的资源或脚本文件轻易的暴露给其他人,一般会采用对文件进行加密的方式来保护文件或资源被盗用.Quick-Cocos2d-x 为开发者提供了xxtea加密算法,用来对脚本文件及资源进 ...

  7. 在Java中关于二进制、八进制、十六进制的辨析

    八进制数中不可能出7以上的阿拉伯数字.但如果这个数是123.是567,或12345670,那么它是八进制数还是10进制数?单从数字的角度来讲都有可能! 八进制 所以在Java中规定,一个数如果要指明它 ...

  8. Lyft Level 5 Challenge 2018 - Final Round (Open Div. 2)

    A. The King's Race 签. #include <bits/stdc++.h> using namespace std; #define ll long long ll n, ...

  9. "字节跳动杯"2018中国大学生程序设计竞赛-女生专场 Solution

    A - 口算训练 题意:询问 $[L, R]$区间内 的所有数的乘积是否是D的倍数 思路:考虑分解质因数 显然,一个数$x > \sqrt{x} 的质因子只有一个$ 那么我们考虑将小于$\sqr ...

  10. C#——文件上传(一般处理程序ashx)

    Framework版本:.Net Framework 4 1.FileInfo实体 using System; using System.Collections.Generic; using Syst ...