GitHub Pages站点字体渲染尺寸比本地版本偏小，该问题如何排查解决？

• 本地测试时使用file://文件协议直接打开HTML，和线上https协议的浏览器样式渲染逻辑存在差异
• 两个环境打开时的浏览器缩放比例不一致
• 未添加.nojekyll文件，GitHub Pages默认启用Jekyll构建注入了额外的默认样式，覆盖了你的自定义规则
• 小窗口下未触发你写在min-width: 600px媒体查询内的字体大小规则，使用了浏览器默认字体大小
• 线上环境部分CSS文件加载失败，字体相关规则未生效
• 浏览器内置的文本自动缩放功能导致渲染差异

• 分别在本地和线上页面按Ctrl+0（Windows/Linux）/Cmd+0（Mac）重置浏览器缩放后再对比尺寸差异
• 打开浏览器开发者工具「元素」面板，选中出现尺寸差异的文本，分别查看两个环境下生效的font-size属性值和规则来源，确认是否存在额外样式覆盖
• 打开开发者工具「网络」面板，筛选CSS资源，确认线上环境所有样式文件都加载成功，没有404错误
• 确认本地测试是通过本地静态服务器（如VS Code的Live Server插件）启动，而非直接打开本地HTML文件
• 检查仓库根目录是否存在空的.nojekyll文件

• 如果是协议差异导致的问题，后续本地测试统一使用本地静态服务器访问，不要直接打开HTML文件
• 如果是Jekyll注入样式导致的问题，在仓库根目录新建名为.nojekyll的空文件，推送后GitHub Pages会跳过Jekyll构建流程，直接使用你上传的静态资源
• 如果是媒体查询未触发的问题，可将字体大小规则移出媒体查询作为全局默认设置，避免窗口宽度不足时无匹配规则：

/* 全局默认字体大小，适配所有窗口尺寸 */
#title {
  font-size: 20px;
}
#input, p {
  font-size: 20px;
}
@media only screen and (min-width: 600px) {
  #main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

• 可在CSS开头添加全局文本缩放规则，避免浏览器自动调整字体大小：

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

• 如果存在其他样式覆盖你的自定义规则，可调整选择器权重，或者将自定义样式写在所有外部样式引入的末尾。

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