为什么不建议将 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,目前已有四百多人。

时间: 2024-10-02 08:20:44

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

XE6 c++builder 设置 font size GetPropInfo SetOrdProp

TObject* objTemp; objTemp = GetObjectProperty(this, "Font"); if (objTemp) { PPropInfo ppi; ppi = GetPropInfo(objTemp->ClassType(), "Size"); if (ppi && (*ppi->PropType)->Kind == tkInteger) SetOrdProp(objTemp, ppi, 12);

GetPropInfo Font Size

设置font size,遍历所有控件,有的控件没有font属性,所以要用GetPropInfo判断 if (GetPropInfo(cmp, "font")) function GetObjectProperty( const AObject   : TObject; const APropName : string ):TObject; var PropInfo:PPropInfo; begin Result  :=  nil; PropInfo:=GetPropInfo(AObje

Generate eps plot with appropriate font size and line width in GNU Octave

Because eps terminal is different from the one for screen display, the font size and line width should all be adjusted as the following example: clist = GenColorList(); h = 1; figure(h); clf(h); # This is mandatory. ## Set the axis position. Sometime

[Android Tips] 9. framework notification layout font size

android 4.4 framework notification layout 相关字体大小 * title: notification_title_text_size: 18dp * content: notification_text_size: 14dp * subtext: notification_subtext_size: 12dp [Android Tips] 9. framework notification layout font size

unity UGUI text font size对性能影响巨大

Font Size对ugui text的性能影响非常大. <Cube Duck Run>在itouch5上测试是很流畅的,但是在iphone5上测试,在game over后显示历史最高分时却总会卡好几秒,导致游戏体验极差.使用屏蔽法查了两天终于找到了问题的原因,原来显示历史最高分的text的font size设成了150.其实本来font size为50就够了,但是由于text的父节点上有个0.3倍的缩放,所以导致text的font size设成150其大小在屏幕上看起来才会适,当初编辑界面的

latex: font size 修改字体大小的几种方式

参考:Adjusting font size with TikZ picture 调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \huge \Huge 用法如下: \node (c) at (1,2) {\large x}; 版权声明:本文为博主原创文章,未经博主允许不得转载.

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

调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \huge \Huge [Reference] 1.Adjusting font size with TikZ picture 原文地址:https://www.cnblogs.com/shenxiaolin/p/10316436.html

设置MyEclipse显示代码行数和设置字体的技巧

设置MyEclipse显示代码行数和设置字体的技巧 一个优秀的程序员一定会做到两点,避免bug和瞬间定位bug,显示代码的行数,能帮助我们及时发现错误,分析错误. 1.在MyEclipse菜单栏中找到Window选项,在其下拉菜单中选中Preferences选项,打开 2.在弹出的如下窗口中,在左侧选项列中选General,点击其下拉三角,找到其子选项,Editors 3.在Editors选项中,找到Text Editors选项选中,在右侧中找到Show line numbers,并勾选 4.关

运维学习之网络管理&IP设置&网关、DNS、DHCP的设置

11.管理网络 1.ip基础知识 1.ipv4 2进制32位-----10进制 172.25.0.10/255.255.255.0 172.25.0.10:ip地址 255.255.255.0:子网掩码 子网掩码255位对应的ip位为网络位 子网掩码0对应的ip位为主机位 2.配置ip <<图形化>> 1.图形界面 nm-connection-editor 2.文本化图形 nmtui <<命令>> ifconfig 网卡 ip netmask ##临时设定

【SVN】SVN设置日志提交限制和日志模板设置(windows下)

1.SVN设置日志提交限制 服务器中安装的VisualSVN Server ,在新增Repositoreis时,每个Repositoreis(即新建的项目)下都会有一个hooks(钩子程序)在hooks目录下有一些tmpl文件,作为不同的hooks操作 新建一个pre-commit.bat文件,文件内容如下: @echo off setlocal set SVN_BINDIR=C:/Program Files/VisualSVN Server/bin/ set REPOS=%1 set TXN=