设为1rem的Bariol Regular字体切换屏幕分辨率时字号异常如何修复？

以下是按优先级排列的可落地解决步骤：

• 第一步：添加全局文本渲染规则，覆盖Bootstrap默认配置
  在全局CSS文件中加入如下规则，强制统一不同分辨率下的字体渲染逻辑：

  * {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
  }
  

  optimizeLegibility属性会禁用浏览器为了性能自动调整单个字形大小的优化逻辑，优先保证字体显示的一致性。

• 第二步：补全@font-face声明的限制属性
  检查你引入Bariol Regular的字体声明，补全字重、样式等限制字段，避免浏览器自动匹配错误的字体变体：

  @font-face {
    font-family: 'Bariol Regular';
    src: url('替换为你的本地woff文件路径') format('woff');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    font-synthesis: none;
    font-display: swap;
  }
  

  显式指定font-weight:400对应Regular字重，避免和Bootstrap默认的字重规则冲突。

• 第三步：禁用浏览器自动文本缩放
  低分辨率/移动端场景下部分浏览器会自动放大文本保证可读性，容易出现单个字母变形问题，添加如下规则禁用该特性：

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  

• 第四步：检查rem根字号计算逻辑
  如果你项目中使用了动态根字号适配响应式布局，确保计算出的html元素font-size为整数，小数根字号会导致部分浏览器渲染矢量字体时出现缩放误差，引发单个字母大小异常。

• 第五步：替换字体文件格式
  如果上述配置都无效，大概率是现有woff格式的Bariol Regular字体文件本身存在字形信息损坏，你可以重新生成woff2格式的字体文件替换现有资源，woff2的字形兼容性和渲染稳定性都优于woff格式，目前主流浏览器均已支持。

内容的提问来源于stack exchange，提问作者ToPe