如何让HTML Select下拉选项正确加载Google Fonts字体？

我想要制作一个字体选择下拉框（HTML select元素），让下拉弹窗的每一行都显示对应的字体。当使用客户端操作系统已安装的字体时，为option标签设置样式指定字体的方式可正常生效，但引入的Google Fonts字体无法通过链接加载，导致下拉选项中无法显示对应的字体样式。

附上代码示例：

function onFontSelectChange(font) {
  document.getElementById("fontSelect").style.fontFamily = font.value;
}

<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Splash&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sedgwick+Ave&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Julee&family=Amatic+SC&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Handlee&display=swap" rel="stylesheet">


<select id="fontSelect" class="form-select art_font_inkfree" name="param_Font" onchange="onFontSelectChange (this)">
  <option value="Julee" selected style="font-family:Julee">
    Julee
  </option>
  <option value="Amatic SC" style="font-family:Amatic">
    Amatic SC
  </option>
  <option value="Courgette" style="font-family:Courgette">
    Courgette
  </option>
  <option value="Handlee" style="font-family:Handlee">
    Handlee
  </option>
</select>

从截图可见，仅本地系统已安装的字体能正常显示，未安装的Google Fonts字体无法在下拉选项中生效，求解决方法。

1. 预加载字体强制浏览器下载 #

浏览器只会在页面中有实际使用该字体的可见元素时，才会触发Google Fonts的加载。而原生<option>的渲染受浏览器控件限制，通常不会触发字体下载请求。可以添加一个隐藏元素，提前引用所有需要的字体，强制浏览器加载：

<!-- 隐藏元素，用于预加载所有Google Fonts -->
<div style="visibility:hidden; position:absolute; height:0;">
  <span style="font-family:Julee">Julee</span>
  <span style="font-family:'Amatic SC'">Amatic SC</span>
  <span style="font-family:Courgette">Courgette</span>
  <span style="font-family:Handlee">Handlee</span>
</div>

2. 修正字体名称的拼写与格式错误 #

你的代码中Amatic SC的option样式写的是font-family:Amatic，正确的字体名称应该是'Amatic SC'（名称含空格时需加引号），修改后：

<option value="Amatic SC" style="font-family:'Amatic SC'">
  Amatic SC
</option>

3. 替换原生select为自定义下拉组件 #

原生<select>和<option>的样式兼容性极差，不同浏览器对option的字体样式支持不一致。如果上面的方法无效，建议用HTML/CSS/JS模拟自定义下拉框，完全控制选项样式：

<link href="https://fonts.googleapis.com/css2?family=Julee&family=Amatic+SC&family=Courgette&family=Handlee&display=swap" rel="stylesheet">

<!-- 自定义下拉容器 -->
<div class="custom-select">
  <div class="select-selected" style="font-family:Julee">Julee</div>
  <div class="select-items">
    <div class="select-option" data-value="Julee" style="font-family:Julee">Julee</div>
    <div class="select-option" data-value="Amatic SC" style="font-family:'Amatic SC'">Amatic SC</div>
    <div class="select-option" data-value="Courgette" style="font-family:Courgette">Courgette</div>
    <div class="select-option" data-value="Handlee" style="font-family:Handlee">Handlee</div>
  </div>
</div>

<style>
.custom-select {
  position: relative;
  width: 220px;
}

.select-selected {
  padding: 8px 16px;
  border: 1px solid #ddd;
  cursor: pointer;
  border-radius: 4px;
  background-color: #fff;
}

.select-items {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: none;
  z-index: 99;
  background-color: #fff;
}

.select-option {
  padding: 8px 16px;
  cursor: pointer;
}

.select-option:hover {
  background-color: #f5f5f5;
}

.custom-select.open .select-items {
  display: block;
}
</style>

<script>
const customSelect = document.querySelector('.custom-select');
const selected = customSelect.querySelector('.select-selected');
const options = customSelect.querySelectorAll('.select-option');

// 切换下拉框显示/隐藏
selected.addEventListener('click', () => {
  customSelect.classList.toggle('open');
});

// 选择字体逻辑
options.forEach(option => {
  option.addEventListener('click', () => {
    const fontValue = option.dataset.value;
    selected.textContent = option.textContent;
    selected.style.fontFamily = fontValue;
    customSelect.classList.remove('open');
    // 这里可添加原逻辑，比如设置页面其他元素字体
    // document.getElementById('target-element').style.fontFamily = fontValue;
  });
});

// 点击外部关闭下拉框
document.addEventListener('click', (e) => {
  if (!customSelect.contains(e.target)) {
    customSelect.classList.remove('open');
  }
});
</script>

4. 监听字体加载完成后更新样式 #

使用原生API监听字体加载状态，确保字体加载完成后再更新option样式：

document.fonts.ready.then(() => {
  const options = document.querySelectorAll('#fontSelect option');
  options.forEach(opt => {
    opt.style.fontFamily = opt.value.includes(' ') ? `'${opt.value}'` : opt.value;
  });
});

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