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

已于 2023-10-12 17:48:50 修改
阅读量758 收藏 2
点赞数 2
文章标签： css javascript 前端 chrome
于 2023-10-12 17:47:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/M_E_i/article/details/133796039
版权
本文讲述了作者在设计UI时遇到的挑战，即在某些情况下，即使将字体设为12px以下，谷歌浏览器默认设置仍无法显示更小的字体。解决方法是在Chrome的浏览器设置中找到并调整“最小字体大小”至0，以实现极小字体的显示。
摘要由CSDN通过智能技术生成

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

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

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

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

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

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

孜然卷k
关注
font-size：10px 不起效的解决方法。
weixin_43612234的博客
01-12 1万+
关于字体大小为12px以下没效的解决方案。 有时候UI给我们图的时候，有一些样式是正常情况下是不起效的，例如，设置字体大小 font-size：8px，往往设置了这个属性是没有效的。这个时候可能你很烦躁。特别是项目在赶的时候。（我就是这样，明天要上线的那种。） 其实可以这样设置： 方案1：如果是手机端；设置了一rem为单位的。 <style> //根元素的设置。 html{ font-...
font-size 设置字体不生效解决方案（小于12px）
zhaojiaxing123的博客
11-25 2363
font-size 设置字体不生效解决方案（小于12px）
font-size 小于 12px 无效
Star丶Xing
05-06 1143
问题 测试在 Chrome 浏览器中，设置 font-size 小于 12px 时无效。 示例 在线运行 以下是在 Chrome 中运行的结果。可以看到 0px 是生效的，但是小于 12px 的设置，统统和 12px 的文字大小一样。 原因 Chrome 认为 12px 以下的字体阅读不舒适。所以默认限制字体不能小于12px，但是允许设置为 0px。 这个最小字号，在 chrome://sett...
css 实现文字小于12px（浏览器呈现）
wu_2004的博客
09-05 875
利用transform的scale属性进行缩放效果。利用zoom缩放属性。
解决谷歌（Google Chrome）浏览器下CSS设置字体大小小于12px无法生效的问题
站住借个吻的专栏
02-16 1220
谷歌浏览器默认最小字体为12px，小于12px的字体它都以12px显示 解决方案： 在html或者body里添加一句谷歌浏览器专有的属性。 html,body{       -webkit-text-size-adjust:none; } 注意：如果使用了这个属性，浏览器的字体将不能使用放大缩小功能！（就是按住CTRL键上下滚动鼠标中键的那功能）
css 设置字体大小(小于12px)不起作用解决方案
weixin_43305450的博客
07-12 598
原因是 Chrome 以及 Chromium 内核的浏览器在中文语言下最小字体只能是 12px，大部分浏览器都是如此。如果执意要设置小于 12px 的字体，那只能使用 transform: scale() 缩放属性来实现。使用 font-size 设置小于 12px 的字体时，发现并不生效（字体不会再缩小了）。
前端浏览器字体小于12px的解决办法
09-22
由于浏览器默认限制，直接设置小于12px的字体大小通常不会生效。为了解决这一问题，可以使用CSS的transform属性对元素进行缩放处理。本篇文章将通过具体代码示例，讲述如何利用transform:scale()实现小于12px的字体...
使用CSS3的font-face字体嵌入样式的方法讲解
09-24
现代浏览器通常不需要额外处理，可以直接引用`@font-face`定义的字体。 尽管`@font-face`提供了一种强大的字体嵌入工具，但也有一些潜在的问题，如加载速度、版权问题以及对网络带宽的消耗。设计师在使用时应考虑到...
Chrome浏览器下CSS字体大小设置小于12px无效问题
06-08
Chrome浏览器在默认情况下将最小字体大小设置为12px，如果您的CSS设置的字体大小小于12px，那么浏览器会自动将字体大小设置为12px，从而导致您的CSS设置无效。 要解决这个问题，您可以通过在CSS中添加以下代码来...
vue3.0中使用postcss-pxtorem的具体方法
10-15
总的来说，Vue 3.0中结合`postcss-pxtorem`和动态调整字体大小的策略，可以极大地简化移动端适配的过程，让开发更加高效。理解rem的工作原理和如何与屏幕宽度关联，是掌握这种适配方法的关键。希望这篇文章对你在...
html font-family设置无效,HTML+CSS入门 CSS设置中文字体(font-family:"黑体")后样式失效问题如何解决...
weixin_39887577的博客
06-03 2069
本篇教程介绍了HTML+CSS入门 CSS设置中文字体(font-family:"黑体")后样式失效问题如何解决，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<做项目时偶遇的一诡异问题，同样的代码，在ff和IE7以上页面显示正常，但IE6无论怎么改都不起作用，本来以为是IE6的某些浮动bug所致，结果弄了很长时间也不行，后来不经意间把原来设定的font-family:"...
解决chrome浏览器CSS字体大小小于12px不起作用的方法
创8的专栏
10-16 4175
谷歌浏览器是不支持12px以下小字体的，可能是考虑到用户体验吧。 网上也有一些文章介绍，说可以使用：  -webkit-text-size-adjust:none; 但是，自chrome 27之后，就取消了对这个属性的支持。 我们还有其它办法解决这个问题吗？ 谷歌浏览器支持CSS缩放，于是，我们可以在这方面做文章：  -webkit-transform: scale(
CSS - font-size 设置小字体不生效解决方案（小于12px）
weixin_63722092的博客
10-10 5351
CSS - font-size 设置小字体不生效解决方案（小于12px）
【已解决】浏览器无法设置小于12px的字体大小（font-size）
程序边界
07-25 508
小于12px时无效，字体不会再缩小。Chrome浏览器中，设置。原理对整个盒子进行缩放。
解决谷歌浏览器下CSS设置字体小于12px无效办法，关于如何在chrome里实现小于12px的文字。
最新发布
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
12-26 876
谷歌浏览器默认最小字体为12px，小于12px的字体它都以12px显示，有时我们需要字体小点，特别是在制作英文网站时，所以很蛋疼。不过还是有解决方案的。当然文字缩小到12px以下本来就一定程度影响到可用性了，建议无视chrome的这个特性。在html或者body里添加一句谷歌浏览器专有的属性。关于如何在chrome里实现小于12px的文字。
设置 font-size 小于12px
学敲代码的Stars的博客
03-29 356
设置了font-size: 10px不生效，计算样式还是12px。
前端修炼手札：Chrome下CSS字体大小设置小于12px无效
iicecream的专栏
05-16 2515
在chrome浏览器中，可能是出于人性化浏览的考虑，如果字体大小小于12px,h
iPhone 手机浏览器 font-size 失效问题
在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。
05-15 1488
问题 电脑端浏览器显示正常，iPhone手机浏览器却异常，如下图 用Safari调试iPhone手机网页，可以看到设置了 font-size: 12px 但实际浏览器渲染的字体大小却是 16px 解析 因为 Font Boosting 字体提升 Webkit 给移动端浏览器专门提供的属性 ，因为移动端屏幕小，原始页面宽度大，在移动端浏览器浏览网页时的字体会比较小，看不清，Font Boosting 会自动把字体变大，方便浏览。 解决 直接为该失效元素加一行代码： text-size-adjust:
浏览器缩放125% 内容不变 js
09-03
当浏览器缩放至125%时，原始页面上的元素大小会随之变大，但是元素之间的相对位置和布局并不会改变。如果在该页面上使用JavaScript，则可以通过以下方法解决内容不变的问题： 1. 使用相对单位：相对单位如em、rem、vw、vh等可以根据父元素或视口的大小来动态调整元素的尺寸。使用这些单位可以确保元素在浏览器缩放时保持相对的大小和位置。例如，可以使用rem单位来设置元素的字体大小，这样字体大小随着浏览器缩放而自动调整。 2. 使用响应式设计：通过使用CSS媒体查询和弹性布局等技术，可以根据浏览器窗口大小或屏幕尺寸自动调整元素的大小和布局。响应式设计可以确保页面在不同尺寸的浏览器缩放下保持良好的可用性和可读性。 3. 使用JavaScript动态计算：可以使用JavaScript在页面加载或浏览器缩放时动态计算元素的尺寸和位置。通过监听浏览器缩放事件，可以在浏览器缩放时重新计算元素的样式属性，并将其更新为适当的值。 综上所述，通过使用相对单位、响应式设计和JavaScript动态计算等方法，可以实现在浏览器缩放至125%时保持内容不变的效果。这样可以确保页面的可用性和可读性，并提供更好的用户体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值