修复了文本超过 html5 视频时顶部导航栏更改字体粗细的问题 - Chrome 中的问题答案

【问题标题】：Fixed top nav bar changes font weight when text is over html5 video - Issue in Chrome修复了文本超过 html5 视频时顶部导航栏更改字体粗细的问题 - Chrome 中的问题
【发布时间】：2026-01-27 11:40:02
【问题描述】：

我有一个正在本地工作的网站，其中包含一个固定的导航栏和一个高度为 500 像素的 html5 视频元素。导航栏中的菜单项看起来像是字体重量减少或某种 -webkit-font-smoothing: 问题，但只有当视频滚动到导航栏后，字体才会恢复到正确的重量.

这仅发生在 chrome 中，它也发生在 Safari 中，但设法使用 font:100%; 解决了这个问题。

任何帮助或建议将不胜感激，因为我整天都在寻找答案。非常感谢。

【问题讨论】：

标签： google-chrome fonts html5-video

【解决方案1】：

当您同时在页面上发生很多事情时，Webkit 有时会出现实时渲染元素的问题 - 特别是在您的 JS 中。将此添加到 CSS 中“粘性”导航的父元素：

/* Change this to your selector */
.someStickyNavParent {
    -webkit-backface-visibility: hidden;
}

如果您仍然遇到该元素的子元素的问题，您可以随时使用通用选择器。

/* Change this to your selector */
.someStickyNavParent * {
    -webkit-backface-visibility: hidden;
}

【讨论】：

【解决方案2】：

我也遇到了同样的问题，没有任何解决办法。

已尝试更改字体，但如果覆盖视频元素，我测试的所有内容都会呈现不同的效果。使用 webkit css 属性（例如 -webkit-font-smoothing 或 -webkit-text-stroke）的解决方法我都没有成功。

我进行了一些搜索后发现，这似乎是关于 Google Chrome 的一个已知问题。

http://code.google.com/p/chromium/issues/detail?id=74674

http://code.google.com/p/chromium/issues/detail?id=100666

【讨论】：