同样大小rem的字体在浏览器中显示大小不一致的问题

最新推荐文章于 2025-01-09 17:08:12 发布
最新推荐文章于 2025-01-09 17:08:12 发布
阅读量2.4k 收藏 4
点赞数 2
CC 4.0 BY-SA版权
分类专栏： css chrome 文章标签： css chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/rwzhang/article/details/112426453
做手机端web时，发现CSS设置相同字体大小的内容实际显示差异明显，字体大小随文本数量变动。经测试，这是Chrome字体优化所致，在CSS中加入特定代码或把display设为inline - block可解决问题。

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

在做手机端web的时候发现css中设置的同样字体大小的两块内容，实际显示的字体大小差异明显！测试后发现字体大小会随着文本块中文本内容数量的变动而变动。网上查阅资料发现是chrome对字体优化导致的，在css中加入如下代码后问题解决：

-webkit-text-size-adjust: none;
text-size-adjust: none;

PS：还有一种方式是将display设置为inline-block

 

 

rem自适应之postcss-pxtorem
weixin_38649188的博客
03-27 1197
在使用antd或者其他组件库时，有的组件也可能用到内联样式，px没有被转换成rem，导致样式不正确，需要手动修改。设计稿是1920*1080px，pxtorem我们设置rootValue是19.2，19.2px=1rem。8）exclude（String, Regexp, Function）要忽略并保留为px的文件路径。4）selectorBlackList （Array）要忽略的选择器，保留为px。3）propList （Array）可以从px更改为rem的属性。注意最好不要和umi的hd方案同时用！
android webview 字体 系统字体大小,【转】android webview设置内容的字体大小
weixin_39913422的博客
05-25 1343
Enumforspecifyingthetextsize.SMALLESTis50%SMALLERis75%NORMALis100%LARGERis150%LARGESTis200%原文：http://www.cnblogs.com/yourancao520/archive/2012/06/14/2548900.html/***webview*/WebVi...
rem字体在rem盒子里面不一样，或者不同的行解决
04-18 156
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>rem</title> <meta name="viewport" content="width=device-width, use...
动端自适应rem的设置-- 关于字体大小
Mc123455的博客
03-31 565
pc端浏览器一般默认16px 如果是iPhone5的尺寸，那么根元素字体大小就是32px； 如果是IPhone6的尺寸，那么根元素字体大小就是37.5px； 在vscode 编辑器中，想输入 px 主动转换对应rem，需要改变默认字体大小 重启 vscode 即可 否则 默认16px 直接转换是 178 X 16 = 11.125rem 到浏览器查看是 高是417.188px...
关于CSS中 用“rem" 在谷歌浏览器下的问题
qq_21830361的博客
03-23 7264
rem是css3新定义的设置字体大小属性，常用的两种字体大小设置有下面2种： 1、 px为单位 2、em为单位(百分比用法跟em类似) PX为单位 在Web页面初期制作中，我们都是使用“px”来设置我们的文本，因为他比较精确和固定。只要页面某元素设置了px字体大小，其子元素/子孙元素未设置字体大小或设置的字体大小css优先级没父元素高的话，该子元素/子孙元素会继承其父元素的
使用rem单位的问题——Google下字体很大
07-28 314
rem的看法 rem单位确实好处蛮多的，它是相对于根节点，让我们整个网站单位可以统一。还可以让我们的字体更好的自适应网站的大小。但是，你用过了就知道，它会出现一个问题： 用Chrome浏览器打开你做的网站的时候，有时候会出现字体很大的情况。但是刷新一下页面就好了。 之所以会出现这种情况，原因是因为我们为了计算方便，将原本默认1rem=16px修改1rem=10px。因此，我们在ht...
解决layer弹出层自适应页面大小的问题
10-16
2. 使用em或rem单位：这些相对单位依赖于父元素的字体大小，同样可以实现自适应，但在某些情况下可能导致布局混乱。 3. area: 'auto'：此设置可能导致弹出层的高度和宽度填充到其父容器的整个空间，对于包含滚动条...
基于移动端响应式布局的rem适配解决方案_支持多设备屏幕适配_自动计算rem基准值_提供1px边框修复功能_包含PC端重置选项_可配置设计稿宽度_支持字体大小重置_防止Androi.zip
最新发布
07-18
最后，“防止Androi”虽然在标题和描述中被截断，但考虑到上下文，这可能是指该解决方案具有防止在Android设备上出现常见布局问题的能力，如布局错位、图片显示异常等。 这个解决方案提供了一整套工具和功能，旨在...
Vue进阶（幺柒零）：前端用户体验提升（四）应用 rem em 实现字体自适应_vue em
2401_85124329的博客
06-11 567
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！计的布局。不过偶尔你会遇到真的需要使用显式的固定值，以防止缩放的元素。采用固定尺寸值的前提应该是，如果被缩放的话，它的结构会被打破。这真的不常出现，所以你想应用px单位之前，问问自己是否使用它们是绝对必要的。正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！
前端中常用的单位度量（px,rpx,rem,em,vw,vh）+图片自适应
m0_51244077的博客
01-09 1547
前端中常用的单位度量+图片自适应
rem布局，系统字体大小发生变化是，页面样式错乱的问题
悦己
02-16 4698
最近做的一个APP，昨天测试的时候，发现在大多数手机上页面用rem布局，都是可以适配的，但是在一些手机上（比如三星A8000,默认字体大小比较大）出现了混乱，看上去像是宽度不够，有些元素被挤下来，整个页面被拉伸了一些，后来打印出当前页面根元素的字体大小，我设置的100px，但在这些手机上都是比100px大，因为这些手机系统设置的字体大小，比较的大，这时候，可以让安卓的小伙伴们，在每个webview
解决rem布局，在用户调整手机字体大小/用户调整浏览器字体大小后，布局错乱问题...
weixin_30335353的博客
08-28 439
一、用户调整浏览器字体大小，影响的是从浏览器打开的web页。 (function(doc, win) { // 用原生方法获取用户设置的浏览器的字体大小(兼容ie) if(doc.documentElement.currentStyle) { var user_webset_font=doc.documentElement.c...
html 1em,html – 为什么IE10中的“font-size：1em”比Chrome更大？
weixin_28697603的博客
06-11 153
我目前正在开发一个网站,我无法弄清楚为什么文本在IE10中显示比在Chrome中更大. (我确保两个浏览器都设置为100％缩放 – 不多也不少.)我的CSS中有一个重置：body {font-size：1em; }.在Chrome(v27.0.1453.116 m)中,这会按预期显示 – 如果我将CSS中的规则更改为font-size：100％;或font-size：16px;,没有任何明显的变化...
不同字体在浏览器下的表现总结
cychai的专栏
01-21 885
不同字体在浏览器下的表现总结
关于rem移动端 html字体大小自适应设置的问题
weixin_42642664的博客
10-24 2166
rem是个单位，单位大小由它第一代祖先font-size的大小决定rem的大小。 了解字体大小的同时我们要知道像素是什么东西。 像素是屏幕的组成元素，我们看到屏幕上的内容都是由一个个小颗粒构成的，而这些小颗粒我们叫做物理颗粒。 设备的像素比（简称DPR） 它的数值体现了物理像素和逻辑像素之间的关系，用公式可以计算出该设备的DPR的大小： DPR=物理像素/逻辑像素 那么逻辑像素是什么呢...
浏览器字体大小问题
cychai的专栏
11-26 1672
Google Chrome浏览器字体为什么与IE8显示不一样
【HTML5移动端开发】[rem + 百分比布局] 加载抖动（高度不一致）解的决方法
qq_31381917的博客
11-07 6949
解决移动端rem+百分比布局加载瞬间页面错乱的方法 以下的内容和观点未经大牛级别验证，有错误的地方请大牛留言指教~！ 移动端布局有很多种，这里我最常使用到 rem+ 百分比 的布局方式（高度/字体设置rem单位，宽度设置百分比）来处理屏幕兼容，这种方法在兼容上是比较不错的，可以使得字体以及整体适应各种大小的屏幕，可以解决ipad等比较大屏幕的适应兼容。然而发现一些问题。 页面在
移动端rem布局加载瞬间的尺寸有bug 由大变小 或者有小变大，怎么解决?
weixin_42137023的博客
10-21 2451
  我是这样解决的    1  body 或者html 加个visibility：hidden;  或者用opacity：0； &lt;body style="visibility: hidden;"&gt;&lt;/body&gt; 2 使用rem  加载完成后的函数调用 body属性的visbility：visible; (function(doc, win) {     var ...
rem布局刷新页面瞬间尺寸从小变大；页面css样式错乱；跳转出现闪烁；页面渲染错乱
qq_43636471的博客
09-26 530
rem布局刷新页面瞬间尺寸从小变大；页面css样式错乱；跳转出现闪烁；页面渲染错乱。原因：rem转px的缘故，rem.js中DOMContentLoaded事件是在html构建完成即加载，css样式可能未加载生效。解决方法：body添加属性opacity:0，在未加载完之前不显示。在onload事件中将body的opacity变成1。
h5字体不跟随手机系统字体大小
04-09
对于 Android 设备上的 WebView 或 iOS 应用内的 Webview 页面，可以通过设置 CSS 中的 `-webkit-text-size-adjust` 属性为 `none` 来防止因用户调整系统字体大小而导致的文字缩放问题[^2]。 ```css body { -...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值