postcss-px-to-viewport 相同字体大小在谷歌和火狐差异很大

这可能是因为不同浏览器对于字体渲染的方式存在差异导致的。可以尝试在 CSS 中使用 `font-size-adjust` 属性来解决这个问题。这个属性可以让不同浏览器的字体大小更加一致。具体用法如下：

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-px-to-viewport` 插件自动转换字体大小，你可以通过设置插件的一些选项来控制。通常情况下，`postcss-px-to-viewport` 配置了一个名为 `unitPrecision` 的选项，它决定了当单位值小于某个阈值时是否应用 viewport 单位（如 `vw` 和 `vh`），默认是 4。

要阻止字体大小的转换，你需要将 `unitPrecision` 设置得非常高，比如设置成 `Infinity` 来确保所有尺寸都保持像素值不变。下面是一个示例配置：

module.exports = {
  plugins: [
    require('postcss-px-to-viewport')({
      unitPrecision: Infinity, // 不转换字体大小
      viewportWidth: 750, // 视口宽度，默认为设备视口宽度
      aspectRatio: 16 / 9, // 比例，可以省略
      fontUnit: 'px', // 字体单位，默认为 'rem'
      propList: ['*'], // 需要转换的CSS属性，默认为 '*' 包含所有
      exclude: ['font-size'] // 阻止转换的属性列表，这里添加 'font-size' 属性
    })
  ]
};

在这个配置中，`exclude: ['font-size']` 表明 `postcss-px-to-viewport` 将不会处理 `font-size` 属性，从而防止字体大小从像素转为视窗单位。

postcss-px-to-viewport 不转换字体大小

可以通过配置postcss.config.js文件来实现不转换字体大小。在该文件中添加exclude选项，将字体大小所在的文件路径排除在转换范围之外即可。具体操作如下：

1.在项目根目录下创建postcss.config.js文件。

2.在该文件中添加如下代码：

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 750, // 设计稿宽度
      exclude: [/node_modules/, /font/] // 排除字体大小所在的文件路径
    }
  }
}

其中，exclude选项是一个正则表达式数组，用于匹配需要排除的文件路径。上述代码中，/node_modules/用于排除node_modules目录下的文件，/font/用于排除所有包含font的文件路径。

3.保存文件后，重新运行打包命令即可。