首页导航与子页面导航显示不一致（Kerning异常）求助

首页与子页面导航字距（Kerning）不一致，但二者使用的HTML和CSS代码完全一致，以下是具体排查方向和解决步骤：

先修复HTML结构错误 #

你提供的HTML存在嵌套错误：第一个<li class="active">未闭合，直接包含了后续的<li>标签。这种无效HTML在不同页面可能被浏览器以不同方式修复，进而影响布局和文字渲染。修正后的代码如下：

<header>
    <div class="container"> 
        <nav class="navbar">
            <div class="logo"><img src="logo/logo_white.svg" alt="vic logo"/></div>
            <ul class="nav_links">
                <li class="active"> 
                    <a href="index.html" class="nav_link">home</a>
                </li> <!-- 补上闭合标签 -->
                <li>
                    <a href="stills.html" class="nav_link">stills</a>
                </li>
                <li>
                    <a href="designs.html" class="nav_link">designs</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

排查字体加载相关问题 #

1. 检查字体文件加载状态：打开浏览器开发者工具（F12）的「网络」面板，对比两个页面的neue-haas-grotesk-display字体文件是否都成功加载，且文件版本、大小一致。可尝试强制刷新（Ctrl+F5）页面，清除缓存后重新加载。
2. 强制启用字距属性：在.nav_link类中添加明确的字体渲染规则，覆盖可能的继承样式：

.nav_link {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-feature-settings: "kern" 1; /* 强制开启字距调整 */
    text-rendering: optimizeLegibility;
    letter-spacing: normal; /* 明确设置默认字距，避免继承异常值 */
}

排查全局样式与父容器影响 #

1. 对比计算样式差异：在开发者工具的「元素」面板中，选中导航的<a>标签，查看「计算样式」标签页，对比两个页面的letter-spacing、font-feature-settings、text-rendering等与字距相关的属性是否存在差异。若有差异，追踪对应的CSS规则来源，确认是否被页面其他全局样式覆盖。
2. 检查父容器渲染属性：查看header、navbar、nav_links等父元素是否带有transform、filter、perspective等属性——这些属性会触发GPU加速，可能导致字体渲染方式变化。

排除外部干扰 #

临时禁用所有浏览器扩展，刷新两个页面后观察字距是否恢复一致，排除扩展对页面样式的修改影响。

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