浏览器css字体大小font-size小于12px时不生效，总是 12px

解决浏览器字体显示极限：最小字体设置问题,
原创 已于 2023-10-12 17:48:50 修改 · 1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #javascript #前端 #chrome

于 2023-10-12 17:47:59 首次发布
本文讲述了作者在设计UI时遇到的挑战，即在某些情况下，即使将字体设为12px以下，谷歌浏览器默认设置仍无法显示更小的字体。解决方法是在Chrome的浏览器设置中找到并调整“最小字体大小”至0，以实现极小字体的显示。

今天遇到UI定义一个非常小字体的图

发现字体到达12px之后 ，无论多少小都无法改变

浏览器控制台定义8px依然无效

这时候如果是谷歌浏览器   需要在去浏览器设置重新设置字体大小

chrome://settings/fonts     有一个“最小字体大小”的设置

这时候吧设置拉到最小0就好了

孜然卷k
关注
CSS - font-size 设置小字体不生效解决方案（小于12px）
热门推荐
🏆 前端领域优质创作者
05-08 1万+
前言 使用 font-size 设置小于 12px 的字体时，发现并不生效（字体不会再缩小了）。 原因是 Chrome 以及 Chromium 内核的浏览器在中文语言下最小字体只能是 12px，大部分浏览器都是如此。 解决方案 如果执意要设置小于 12px 的字体，那只能使用 transform: scale() 缩放属性来实现。 /* 小于12px 的字体 */ .txt { -webkit-transform: scale(0.5) } 兼容写法 有些浏览器允许设置小于 12px 的字体，那么你
在谷歌浏览器下，使用CSS实现设置font-size小于12px无效的终极解决方案
浮游的博客
03-02 1192
近日做一个需求的时候，需要调整字号，结果在设置font-size:10px时，发现好像并没有什么变化。网站查找资料后才知道，谷歌浏览器最低支持12px的字号。font-size 有一个最小值 12px（不同操作系统、不同语言可能限制不一样），低于 12px 的，一律按 12px 显示。理由是 Chrome 认为低于 12px 的中文对人类是不友好的。
font-size 设置字体不生效解决方案（小于12px）
zhaojiaxing123的博客
11-25 2652
font-size 设置字体不生效解决方案（小于12px）
font-size 小于 12px 无效
Star丶Xing
05-06 1246
问题 测试在 Chrome 浏览器中，设置 font-size 小于 12px 时无效。 示例 在线运行 以下是在 Chrome 中运行的结果。可以看到 0px 是生效的，但是小于 12px 的设置，统统和 12px 的文字大小一样。 原因 Chrome 认为 12px 以下的字体阅读不舒适。所以默认限制字体不能小于12px，但是允许设置为 0px。 这个最小字号，在 chrome://sett...
css 实现文字小于12px（浏览器呈现）
wu_2004的博客
09-05 1009
利用transform的scale属性进行缩放效果。利用zoom缩放属性。
前端浏览器字体小于12px的解决办法
09-22
由于浏览器默认限制，直接设置小于12px的字体大小通常不会生效。为了解决这一问题，可以使用CSS的transform属性对元素进行缩放处理。本篇文章将通过具体代码示例，讲述如何利用transform:scale()实现小于12px的字体...
探讨浏览器如何计算 CSS font-size 的百分比继承值
weixin_41455464的博客
10-16 400
百分比继承是 CSS 中一个重要的概念，理解透彻它可以帮助我们更好地控制页面排版，避免一些意料之外的样式问题。等新的单位，可以更精确地控制字体的大小和间距。此外，CSS Houdini 提供了一组 API，允许开发者自定义 CSS 引擎的行为，包括字体大小的计算方式。通过修改 CSS 变量的值，可以快速地修改整个网站的字体大小，而不需要修改每个元素的样式。可以使用浏览器的开发者工具来查看元素的样式信息，以及计算后的字体大小。值后，浏览器会按照继承链的顺序，从根元素到目标元素，依次计算每个元素的。
font-size: 12px 在手持端不生效
最新发布
11-09
我们正在解决用户提出的问题：在手持设备上，设置`font-size: 12px`不生效。 根据引用内容，我们可以考虑以下几个方面： 1. 引用[1]中提到，CSS3 Media Queries在现代浏览器中支持良好，但IE6-8不支持。同时，响应...
解决谷歌（Google Chrome）浏览器下CSS设置字体大小小于12px无法生效的问题
站住借个吻的专栏
02-16 1295
谷歌浏览器默认最小字体为12px，小于12px的字体它都以12px显示 解决方案： 在html或者body里添加一句谷歌浏览器专有的属性。 html,body{       -webkit-text-size-adjust:none; } 注意：如果使用了这个属性，浏览器的字体将不能使用放大缩小功能！（就是按住CTRL键上下滚动鼠标中键的那功能）
解决chrome浏览器CSS字体大小小于12px不起作用的方法
创8的专栏
10-16 4298
谷歌浏览器是不支持12px以下小字体的，可能是考虑到用户体验吧。 网上也有一些文章介绍，说可以使用：  -webkit-text-size-adjust:none; 但是，自chrome 27之后，就取消了对这个属性的支持。 我们还有其它办法解决这个问题吗？ 谷歌浏览器支持CSS缩放，于是，我们可以在这方面做文章：  -webkit-transform: scale(
解决谷歌浏览器下CSS设置字体小于12px无效办法，关于如何在chrome里实现小于12px的文字。
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
12-26 973
谷歌浏览器默认最小字体为12px，小于12px的字体它都以12px显示，有时我们需要字体小点，特别是在制作英文网站时，所以很蛋疼。不过还是有解决方案的。当然文字缩小到12px以下本来就一定程度影响到可用性了，建议无视chrome的这个特性。在html或者body里添加一句谷歌浏览器专有的属性。关于如何在chrome里实现小于12px的文字。
设置 font-size 小于12px
学敲代码的Stars的博客
03-29 476
设置了font-size: 10px不生效，计算样式还是12px。
前端修炼手札：Chrome下CSS字体大小设置小于12px无效
iicecream的专栏
05-16 2646
在chrome浏览器中，可能是出于人性化浏览的考虑，如果字体大小小于12px,h
【已解决】浏览器无法设置小于12px的字体大小（font-size）
程序边界
07-25 572
小于12px时无效，字体不会再缩小。Chrome浏览器中，设置。原理对整个盒子进行缩放。
css 设置字体大小(小于12px)不起作用解决方案
weixin_43305450的博客
07-12 749
原因是 Chrome 以及 Chromium 内核的浏览器在中文语言下最小字体只能是 12px，大部分浏览器都是如此。如果执意要设置小于 12px 的字体，那只能使用 transform: scale() 缩放属性来实现。使用 font-size 设置小于 12px 的字体时，发现并不生效（字体不会再缩小了）。
css设置字体大小等失效
huang_ftpjh的博客
01-28 9793
浏览器的最小字体是12px 你设置字体 div这种块级标签 改成行级标签试试 <div class="message" > <span class="messageleft"> <a href="/user/forget_reset_password.do">忘记密码？</a> </span&
让浏览器支持小于12px 的文字
qq_43039818的博客
07-26 715
该方法兼容更多浏览器，但scale属性只对可以定义宽高的元素生效，因此需要把内联元素转化为行内元素。因此当有时想要修改内联元素（如span）的font-size值小于12px时，会发现修改无效。在一些浏览器中内联元素的字体大小有一个最小的默认值，通常是 12px。将span元素文字的大小在12px的基础上缩放至其0.8倍。将span元素文字的大小在12px的基础上缩放至其0.8倍。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值