全球主机交流论坛

标题: 为什么CSS里同字号，Firefox显示出来比Chrome小? [打印本页]

作者: 电光 时间: 2021-12-3 09:56
标题: 为什么CSS里同字号，Firefox显示出来比Chrome小?
本帖最后由电光于 2021-12-3 10:02 编辑

CSS是这样写的：

:root {
--bs-body-font-size:0.875rem;
}
font-size: var(--bs-body-font-size)

复制代码

控制台里看，Firefox和Chrome解析出来都是 14px，

可是实际显示效果Firefox的比chrome要小，如果Chrome显示的是14px的话，Firefox显示的也就是Chrome中的12PX

效果如下图

Chrome

(, 下载次数: 0)

Firefox

(, 下载次数: 0)

作者: pulpfunction 时间: 2021-12-3 09:57
缩放了是不

作者: v233 时间: 2021-12-3 10:02
缩放或者是尺寸问题吧，既然Firefox和Chrome渲染出的都是一样的，你可以试试换一种写法再试试？或者你弄个页面就单纯写font-size: 14px; ，看看两个浏览器是不是一样的大小？我没用过Firefox，一直用的都是Chrome

作者: CMBCHINA 时间: 2021-12-3 10:03
Chrome最小只支持12px，其他浏览器支持更小
想要Chrome支持小于12像素只能用css的镜像缩放比如22的50% 就是11px了

作者: 电光 时间: 2021-12-3 21:40
本帖最后由电光于 2021-12-3 21:45 编辑

CMBCHINA 发表于 2021-12-3 10:03
Chrome最小只支持12px，其他浏览器支持更小
想要Chrome支持小于12像素只能用css的镜像缩放比如22的50% ...

@v233 发表于 2021-12-3 10:02
缩放或者是尺寸问题吧，既然Firefox和Chrome渲染出的都是一样的，你可以试试换一种写法再试试？或者你弄个 ...

破案了，是因为bootstrap默认font-family的原因，chrome和firefox对这个字体集的英文字体渲染结果不一样。渲染出来的英文的在firefox下面就小一号，中文的大小不受影响。

把foundation的字体集抄过来替换上就好了。

bootstrap官方网站也存在这个问题，因为也是用bootstrap搭建的。

作者: v233 时间: 2021-12-3 22:39

电光发表于 2021-12-3 21:40
破案了，是因为bootstrap默认font-family的原因，chrome和firefox对这个字体集的英文字体渲染结果不一 ...

恭喜恭喜，bootstrap现在用的少了，zui这个新儿子发现倒挺不错的

欢迎光临全球主机交流论坛 (https://sunk.eu.org/)