解决Chrome最小字体为12px问题

最新推荐文章于 2022-03-11 11:42:24 发布
原创 最新推荐文章于 2022-03-11 11:42:24 发布 · 3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#chrome #前端开发 #webkit #css

本文介绍了中文版Chrome浏览器对中文用户将所有网页最小字体强制限制在12px的问题，并提供了两种解决方案：一是通过修改Chrome的配置文件；二是使用CSS hack来解决此问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

中文版 Chrome 的 bug，对中文用户将所有网页最小字体强行限制在12px。其实个人认为这不能算是bug，因为12px以下的字体太小了，考虑到用户体验，chrome将最小字体设置为12px。但是这样给前端开发的童鞋们带来了困扰啊。

 

目前，我知道的有两种解决方案：

 

1.  Hack Chrome 自身：

打开路径 "Documents and Settings/用户名/Local Settings/Application Data/Google/Chrome/User Data/Default/"下的 Preferences 文件，在 "webkit" 的 "webprefs" 里面增加两行：
"minimum_font_size": 8,
"minimum_logical_font_siz": 12,

 

2. CSS hack：

 

-webkit-text-size-adjust:none;

 

P.S.  英文版表示木有压力 :)

Chrome 最小字体12px
oscar999的专栏
03-18 1万+
问题状况 在Chrome 中使用CSS font-size 设置字体大小， 当字体设置大于 12px时， 一切正常 当字体设置小于12px时， 字体显示全部是12px. New Document Font Size 16px Font Size 15px Font Size 14px Font Size 13px Font Size 12px Font Size
【前端知识之CSS】怎么让Chrome支持小于12px的文字
weixin_44337386的博客
05-18 3831
本系列主要整理前端面试中需要掌握的知识点。本节介绍怎么让Chrome支持小于12px的文字。
Chrome的最小字体12px限制最终解决办法
01-22
相信不少做网站的用户会有这样一个问题，Chrome 默认最小字体是12px（最新版英文也有此问题），这个是 Chrome 为了更好显示中文设计的，但是这样一来就会出现某些上标、下标字体过大，影响用户体验。之前在开发Hybid App的时候也被它困扰了很久,在百度上查了很久，网上所有的解决方案都惊奇地相似，只有下面两种： 1-针对谷歌浏览器加前缀进行适配 html{ 　　-webkit-text-size-adjust:none; 　　} 给html标签加上下面一个属性，然而，当我打开浏览器时，发现并没什么用，后来发现这个属性在chrome 27版本以后被废弃了，可真烦呢！ 2-利用css3的
谷歌浏览器字体最小12px
weixin_33713707的博客
05-17 326
其实当时遇到这个问题，开始使用了下边的方法解决，但是效果不好，后来找到另一个帖子，挺好用，但是由于没有及时总结，找不到位置了http://blog.youkuaiyun.com/freshlover/article/details/9746821中文版Chrome浏览器不支持12px以下字体的解决方案Chrome 27之前的中文版桌面浏览器会默认设定页面的最小字号是12px，英文版则没有...
chrome最小字体12px
weixin_30273501的博客
04-15 84
http://www.mamicode.com/info-detail-512021.html http://www.divcss5.com/wenji/w738.shtml 转载于:https://www.cnblogs.com/lily1010/p/5395215.html
CHROME 最小字体限制为12PX的终极解决方案
bangtuojie1772的博客
02-24 574
http://www.mamicode.com/info-detail-512021.html http://www.divcss5.com/wenji/w738.shtml 转载于:https://www.cnblogs.com/wudiwangdamin/p/6437515.html
前端浏览器字体小于12px的解决办法
09-22
在前端开发中，由于浏览器的默认限制，字体大小通常最小只能设置为12px，这在某些情况下可能无法满足设计师对于更小字体的需求。当设计稿中的字体尺寸为10px或其他小于12px的值时，我们需要寻找解决办法来实现预期...
chrom浏览器设置不了小于12px的文字大小的解决方法
09-25
这个问题源于Chrome的一个特性，即其出于用户体验考虑，限制了小于12px字体的显示，以防止文字过于小而难以阅读。 Chrome的这一行为可能被一些人视为一个BUG，但更多的是看作是一种人性化的设计决策。尽管如此，...
突破谷歌浏览器字体最小为12px限制
火腿肠的博客
01-21 623
用transform的scale（）属性来控制
谷歌浏览器字体如何改到12px以下
K1nney的博客
05-30 1189
谷歌浏览字体最小12px,要改到12px以下时,比如10px,需要改样式: font-size: 10px; -webkit-transform-origin-x: 0; -webkit-transform: scale(0.8);
字体属性设置(一)：谷歌浏览器12px以下字体的显示;方法和原理
water_v的博客
10-31 867
前言chrome谷歌浏览器默认的字体大小为16px；可以通过设置font-size来设置字体大小但是当设置到12px以下的时候字体大小不再改变；对于想设置其他大小的字体就很头疼，本文参考网上的方法，并对该方法以及原理介绍；并对该方法的弊端进行阐述并提出一种合适的解决办法。1.适用对象block或者inline-block；2.方法（该方法先以p标签举例）方法: 通过设置transform:scale
解决chorme中文版最小字体为12px问题
ta爷的国
07-06 231
chrome中文版默认最小字体大小是12px。解决方案：-webkit-text-size-adjust:none;
解决谷歌浏览器 字体12px 限制后各种问题解决方案
lingdian1614114082的博客
03-02 414
1 scale缩放 布局不改变问题 使用zoom或者添加 -webkit-transform-origin : left top ; zoom与scale的异同点 作为一名前端，尤其是页面要兼容ie浏览器的前端，肯定对着两个属性都很熟悉。 zoom和scale都是css中常用的放大和缩小一个元素的方法，在scale还没有成为css3标准之前，我们“唯一”能用来放大和缩小一个元素的方...
Chrome 强制显示最小字体为 12px的解决方法
weixin_33895475的博客
02-14 296
-webkit-text-size-adjust:none; 转载于:https://blog.51cto.com/maobin/1359124
冷知识：font-size最小12px的误区
qq_41261490的博客
03-11 6842
背景 我们在做项目的时候，有时会遇到很长的文字，产品想要在一定的宽度完全显示，但是基于我们的认知时浏览器默认的最小字体的12px，就很难想到说去再减小字体显示。 其实浏览器设置font-size最小为12px是为了中文而产生了，这还是源于咱们的中国文字文化博大精深，字体比较复杂，更小的字体会看不清楚，所以浏览器针对中文限制了最小字体大小12px。 中文语言下 英文语言下 当我们把浏览器语言设置为其他语言的时候，font-size是不受限制的。 中文最小字体解决方案 当我们是中文环境
浏览器最小字体小于12px解决方案
weixin_30246221的博客
06-30 570
<style> p{font-size:10px;-webkit-transform:scale(0.8);} /*这里的数字0.8，是缩放比例，可以根据情况变化。*/ </style> http://www.w3chtml.com/css3/ 注：快速查询CSS属性 转载于:https://www.cnblogs.com/stro...
Chrome浏览器12px问题-webkit-text-size-adjust: none 已失效的解决方案
没做过产品的后端不是个好前端
03-15 2629
对于早期的chrome, 如果要想显示12px以下的字体，一般通用的方案都是在对应的元素中添加 div { -webkit-text-size-adjust: none; } 但是我今天遇到的需求，添加了之后没有反应，而且浏览就根本不支持这种写法。 在网上看到了博客《Chrome浏览器不支持字体小于12px的解决办法》看到了解决方案，使用transform + display， 于是便实践了...
解决谷歌浏览器字体缩小到12px
weixin_46435234的博客
07-17 479
浏览器字体小于12px的解决方案 1.通过transform:scale()进行缩放 <div class="box text1">字体大小是12px</div> <!--里面在添加span标签，因为transform:scale会缩放外层div的宽高 --> <div class="box text2"> <span>字体大小是8px</span> </div> 复制代码 .box{ width: 20
Chrome浏览器下CSS字体大小设置小于12px无效问题
06-08
这个问题可能是由于Chrome浏览器默认的最小字体大小设置引起的。Chrome浏览器在默认情况下将最小字体大小设置为12px，如果您的CSS设置的字体大小小于12px，那么浏览器会自动将字体大小设置为12px，从而导致您的CSS设置无效。 要解决这个问题，您可以通过在CSS中添加以下代码来覆盖Chrome浏览器的默认设置： ``` body { -webkit-text-size-adjust: none; } ``` 这个CSS属性可以防止浏览器自动缩放字体大小，从而保证您的CSS设置生效。如果您只想禁用Chrome浏览器的最小字体大小限制，可以使用以下代码： ``` body { -webkit-text-size-adjust: 100%; } ``` 这将使Chrome浏览器按照您的CSS设置显示字体大小，而不是自动将其缩放到12px。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值