字体优先级异常问题：如何仅在Verdun未找到时启用Arial？

问题根源 #

你遇到的情况是浏览器的默认字体加载行为导致的：当你在font属性里同时指定Verdun和Arial这类 fallback 字体时，如果Verdun是需要下载的Web字体，浏览器会在等待它加载的过程中先显示Arial（避免页面长时间空白），等Verdun加载完成后再切换过去。而只指定Verdun时，要么它是你本地已安装的字体（所以直接显示），要么浏览器会等待它加载完成再渲染文本（没有fallback可选，自然不会出现切换）。

你的核心需求是：只有当Verdun完全无法被找到/加载失败时，才使用Arial作为替代，而不是加载过程中先用Arial过渡。

解决方案 #

方案1：用font-display: block控制Web字体加载（推荐） #

如果Verdun是你引入的Web字体，直接在@font-face规则里添加font-display: block，就能让浏览器等待Verdun加载完成后再显示文本，只有加载失败时才会启用Arial fallback。

示例代码：

/* 先定义Web字体 */
@font-face {
  font-family: 'Verdun';
  src: url('verdun.woff2') format('woff2'),
       url('verdun.woff') format('woff');
  font-weight: 700;
  font-display: block; /* 关键：等待字体加载，失败才用fallback */
}

/* 应用到目标元素 */
.your-target-element {
  font: 700 0.8rem Verdun, Arial, Helvetica, sans-serif;
}

font-display: block会让浏览器在字体加载期间暂时隐藏文本（最多约3秒），如果超时还没加载成功，才会显示Arial。这样就完全避免了先显示Arial再切换的情况。

方案2：检测本地字体是否存在（针对本地字体场景） #

如果Verdun是用户本地可能安装的字体，你可以用JS检测该字体是否存在，只有检测失败时才给元素替换成Arial系列字体。

示例代码：

// 检测字体是否存在的工具函数
function checkFontExists(fontName) {
  const testSpan = document.createElement('span');
  // 设置测试文本和样式，避免影响页面
  testSpan.style.fontFamily = `'${fontName}'`;
  testSpan.style.position = 'absolute';
  testSpan.style.visibility = 'hidden';
  testSpan.textContent = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  document.body.appendChild(testSpan);

  // 对比目标字体和 monospace 的宽度差异
  const targetWidth = testSpan.offsetWidth;
  testSpan.style.fontFamily = 'monospace';
  const monoWidth = testSpan.offsetWidth;

  document.body.removeChild(testSpan);
  // 宽度不同说明字体存在
  return targetWidth !== monoWidth;
}

// 页面加载后执行检测
window.addEventListener('load', () => {
  const element = document.querySelector('.your-target-element');
  if (!checkFontExists('Verdun')) {
    element.style.fontFamily = 'Arial, Helvetica, sans-serif';
  }
});

对应的基础CSS：

.your-target-element {
  font: 700 0.8rem Verdun;
}

这样如果用户本地有Verdun字体，就直接使用；如果没有，就自动切换到Arial。

补充小知识 #

font-display还有其他几个常用取值：

• swap：就是你现在遇到的情况——先显示fallback，加载完Web字体再切换
• fallback：短时间隐藏文本，超时后显示fallback，之后加载完成再切换
• optional：类似fallback，但浏览器可能会根据网络情况直接跳过Web字体加载

而block正是完全匹配你需求的取值：优先等待目标字体加载，失败才用fallback。

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