为什么不建议将 font-size 设置为 12px 以下?如果一定要设置为 12px 以下要怎么做?
问题:为什么不建议将 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 以下要怎么做?的更多相关文章
- GetPropInfo Font Size
设置font size,遍历所有控件,有的控件没有font属性,所以要用GetPropInfo判断 if (GetPropInfo(cmp, "font")) function G ...
- hiho #1288 微软2016.4校招笔试题 Font Size
#1288 : Font Size 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Steven loves reading book on his phone. The ...
- LaTeX :font size 修改字体大小的几种方式
调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \hu ...
- unity UGUI text font size对性能影响较大
Font Size对ugui text的性能影响非常大. <Cube Duck Run>在itouch5上测试是很流畅的,但是在iphone5上测试,在game over后显示历史最高分时 ...
- Markdown更改字体、颜色、大小,设置文字背景色,调整图片大小设置居中,插入表格等方法
Markdown 通过简单标记语法,使普通文本内容具有一定格式.但它本身不支持修改字体.字号与颜色等功能的. 一.更改字体大小.颜色.更改字体 Markdown语法 <font face=&qu ...
- 【配置】检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(非简单设置为【经典】模式)。
× 检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(非简单设置为[经典]模式). 我们将ASP.NET程序从IIS6移植到IIS7,可能运行提示以下错误: HTTP 错误 5 ...
- redis密码设置、访问权限控制等安全设置
redis作为一个高速数据库,在互联网上,必须有对应的安全机制来进行保护,方法有2,如下. 1.比较安全的办法是采用绑定IP的方式来进行控制. 请在redis.conf文件找到如下配置 # If y ...
- 【转】检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(非简单设置为【经典】模式)。
检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(非简单设置为[经典]模式). 我们将ASP.NET程序从IIS6移植到IIS7,可能运行提示以下错误: HTTP 错误 500.23 ...
- 关于LinearLayout设置权重后width或height不设置0dp的影响说明
摘要 平时没那么注意LinearLayout布局时权重的问题,设置了权重属性后,通常建议将width或height的属性值设置为0dp,有时候设置权重后,还是习惯将width或height的属性设置为 ...
- APUE学习之三个特殊位 设置用户ID(set-user-ID),设置组ID(set-group-ID),sticky
设置用户ID(set-user-ID),设置组ID(set-group-ID),sticky set-user-ID: SUID 当文件的该位有设置时,表示当该文件被执行时,程序具有文件 ...
随机推荐
- Python开发【Django】:Model操作(二)
Model操作 1.操作汇总: # 增 # # models.Tb1.objects.create(c1='xx', c2='oo') 增加一条数据,可以接受字典类型数据 **kwargs # obj ...
- 比特币 BTC本地测试节点
BTC本地测试节点 #环境 ubuntu 16.4 #客户端安装 #下载页面 #https://bitcoin.org/zh_CN/download cd /opt/ wget https://bit ...
- android(十)smali
Dalvik是google专门为Android操作系统设计的一个虚拟机,经过深度的优化.虽然Android上的程序是使用java来开发的,但是Dalvik和标准的java虚拟机JVM还是两回事. Da ...
- python笔记9-多线程Threading之阻塞(join)和守护线程(setDaemon)
python笔记9-多线程Threading之阻塞(join)和守护线程(setDaemon) 前言 今天小编YOYO请xiaoming和xiaowang吃火锅,吃完火锅的时候会有以下三种场景: - ...
- mysql创建和删除表
创建表 简单的方式 CREATE TABLE person ( ), name ), birthday DATE ); 或者是 CREATE TABLE IF NOT EXISTS person ( ...
- 使用jackson工具类把对象或集合转为JSON格式
jackson使用方法: 1.加入jar包: jackson-annotations-2.2.2.jar jackson-core-2.2.2.jar jackson-databind-2.2.2.j ...
- django-生成随机验证码
Python生成随机验证码,需要使用PIL模块. 安装: pip3 install pillow 1 1 pip3 install pillow 基本使用 1.创建图片 from PIL impo ...
- web前端几个小知识点笔记
1.css实现宽度是百分比的盒子为正方形 <div style="width:50%;padding-bottom:50%;height:0px;background:#ccc;&qu ...
- rails 数据验证
validates :money, :presence => true, :numericality => {:only_integer => true}
- Mybatis使用generatedKey在插入数据时返回自增id始终为1,自增id实际返回到原对象当中的问题排查
今天在使用数据库的时候,遇到一个场景,即在插入数据完成后需要返回此数据对应的自增主键id,但是在使用Mybatis中的generatedKey且确认各项配置均正确无误的情况下,每次插入成功后,返回的都 ...