Chrome审计：Web字体加载时文本不可见问题排查与修复

Hey there, let's break down exactly what's happening here and how to fix both issues cleanly:

Why You're Seeing These Problems #

1. font-display: auto triggers hidden text behavior #

When you set font-display: auto, you're letting the browser decide how to handle font loading. Chrome's default behavior here is to hide text completely until your custom font finishes loading (this is called FOIT, or Flash of Invisible Text) — that's exactly what the audit is warning you about. It wants you to explicitly control this behavior to keep text visible for users while fonts load.

2. Missing semicolon breaks CSS parsing #

Your src line is missing a trailing semicolon. CSS parsers stop processing valid declarations once they hit an unclosed statement, which is why your font-style and font-weight properties are highlighted in red in the Sources panel. The font-display property comes before this syntax error, so it gets parsed correctly (hence it shows up as black).

How to Fix It #

Step 1: Replace font-display: auto with a user-friendly value #

Use font-display: swap (the most widely recommended choice) — this tells the browser to show a system fallback font immediately, then swap in your custom font as soon as it finishes loading. This eliminates invisible text entirely and keeps your content accessible right away.

If you want a balance between speed and layout stability, you could also use font-display: fallback (shows fallback text for a short window before hiding, then swaps once loaded), but swap is the go-to for accessibility and user experience.

Step 2: Fix the missing semicolon #

Add a semicolon at the end of your src line to ensure all subsequent CSS properties are parsed correctly by the browser.

Corrected CSS Code #

@font-face {
  font-family: "basis-grotesque-pro";
  font-display: swap; /* Updated from auto to swap */
  src: url('/url/medium-pro.eot?#iefix') format('embedded-opentype'); /* Added missing semicolon */
  font-style: normal;
  font-weight: bold;
}

Quick Post-Fix Checks #

• Refresh your page and re-run the Chrome audit — the "invisible text" warning should disappear.
• Check the Sources panel again; the font-style and font-weight properties should no longer be red, as the syntax error is resolved.

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