postcss-px-to-viewport 相同字体大小在谷歌和火狐差异很大
时间: 2023-10-13 08:21:32 浏览: 42
这可能是因为不同浏览器对于字体渲染的方式存在差异导致的。可以尝试在 CSS 中使用 `font-size-adjust` 属性来解决这个问题。这个属性可以让不同浏览器的字体大小更加一致。具体用法如下:
```css
body {
font-family: Arial, sans-serif;
font-size: 16px;
font-size-adjust: 0.5;
}
```
其中,`font-size-adjust` 的值可以根据需要进行调整,通常情况下应该在 0.5 到 1 之间。该属性是一个比例值,它调整了字体的 x-height(字母 x 的高度),从而保持了字体在不同浏览器中的一致性。
相关问题
postcss-px-to-viewport 不转换字体大小
可以通过配置postcss.config.js文件来实现不转换字体大小。在该文件中添加exclude选项,将字体大小所在的文件路径排除在转换范围之外即可。具体操作如下:
1.在项目根目录下创建postcss.config.js文件。
2.在该文件中添加如下代码:
```javascript
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 750, // 设计稿宽度
exclude: [/node_modules/, /font/] // 排除字体大小所在的文件路径
}
}
}
```
其中,exclude选项是一个正则表达式数组,用于匹配需要排除的文件路径。上述代码中,/node_modules/用于排除node_modules目录下的文件,/font/用于排除所有包含font的文件路径。
3.保存文件后,重新运行打包命令即可。
postcss-px-to-viewport可以实现全局字体大小设置吗
`postcss-px-to-viewport` 可以实现将 `px` 单位转换为视口单位(`vw`、`vh`、`vmin` 或 `vmax`),但是它并不能直接实现全局字体大小设置。
如果你想要设置全局字体大小,可以考虑使用 `rem` 单位。你可以在根元素上设置一个基准字体大小,然后在其他元素中使用相对于基准字体大小的 `rem` 单位来设置字体大小。这样可以实现全局字体大小的一次性设置。
如果你使用 `postcss-px-to-viewport` 转换 `px` 单位为视口单位,也可以利用 `viewport` 的大小来计算出一个基准字体大小,然后使用 `rem` 单位来设置字体大小。具体的计算方法可以参考 `postcss-px-to-viewport` 的文档。