滑块内标题自定义字体仅在元素进入视口后生效的原因排查

以下是导致该现象的常见原因及对应排查、解决方向：

• 字体加载时机延迟
  若自定义字体采用异步加载、懒加载脚本，或未做预加载处理，浏览器可能仅在元素进入视口才触发字体文件的加载与解析。此外，font-display: swap 虽能提升首屏性能，但会先显示 fallback 字体，直到自定义字体加载完成后才替换，若滑块非活动幻灯片的字体未提前加载，就会出现切换时才替换的情况。
  解决：使用 <link rel="preload" as="font" href="your-font-file.woff2" type="font/woff2" crossorigin> 预加载字体文件；调整 @font-face 中的 font-display 属性（如设为 block 或 fallback）；移除字体懒加载脚本。

• 滑块组件的懒渲染/延迟初始化
  多数滑块插件（如 Swiper、Owl Carousel）默认对未进入视口的幻灯片做优化：要么不渲染完整 DOM，要么给元素添加隐藏类（如 display: none），直到切换为当前幻灯片时才初始化或移除隐藏状态。此时字体样式可能因元素未被渲染/不可见，无法提前应用。
  解决：查看滑块插件配置，关闭懒渲染/延迟初始化选项；若无法关闭，可修改插件逻辑，让所有幻灯片的 DOM 提前渲染完成；或用 opacity: 0、transform: translateX(100%) 等视觉隐藏方式替代 display: none，保留元素的渲染状态。

• CSS 选择器的条件限制
  若自定义字体的 CSS 规则仅绑定到滑块的「活动幻灯片」类（如 .slider-slide.active h2），只有当幻灯片切换为当前状态（进入视口）时，该类才会被添加，字体样式才会生效。
  解决：修改 CSS 选择器，将字体族样式直接应用到所有滑块标题元素，比如 .slider-slide h2，而非仅活动状态下的标题。

• 浏览器字体加载策略
  浏览器会优先加载可见元素所需的资源，若非活动幻灯片被设置为 display: none 或 visibility: hidden，浏览器可能会推迟加载这些元素关联的字体文件，直到元素变为可见时才启动加载，进而导致样式延迟应用。
  解决：调整非活动幻灯片的隐藏方式，避免使用会让浏览器跳过资源加载的属性；确保 @font-face 定义在全局样式中，而非仅在特定元素的可见状态下触发。

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