为何GitHub Pages页面与本地显示不一致？字体大小异常求助

• 检查浏览器缩放一致性
  本地和线上页面的浏览器缩放比例可能不同，比如误将线上页面缩放调至110%以上。按下Ctrl+0（Windows）或Cmd+0（Mac）重置浏览器缩放至默认100%，再对比显示效果。

• 固定CSS基准字体单位
  如果使用rem、em等相对单位，可能受浏览器默认根字体大小或系统设置影响。给html元素设置固定基准字体，确保渲染一致：

  html {
    font-size: 16px;
  }
  

  若需临时排查，可改用px绝对单位验证是否是相对单位导致的差异。

• 排查额外注入的样式
  部分静态站点生成器（如Jekyll）在GitHub Pages部署时会加载默认主题样式，可能覆盖自定义CSS。打开浏览器开发者工具（F12），在Elements面板查看字体样式的来源，确认是否有第三方CSS规则干扰。
  解决方式：提升自定义CSS选择器的优先级（如增加父元素选择器），或在必要时使用!important（谨慎使用），同时检查站点配置文件（如_config.yml）是否禁用了默认主题。

• 强制清除浏览器缓存
  线上页面可能缓存了旧的CSS文件，导致修改后的字体设置未生效。按下Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，清除缓存后重新加载。

• 统一系统显示缩放设置
  访问设备的系统显示缩放比例不同也会导致字体渲染差异，比如Windows“显示设置”或Mac“显示器”中的分辨率缩放调整。确保本地和线上访问设备的系统缩放比例一致，或通过媒体查询适配不同缩放场景：

  @media (min-resolution: 120dpi) {
    body {
      font-size: 14px;
    }
  }
  

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