HTML select组件使用Icon font多数浏览器不兼容问题求助

问题根源 #

原生<select>的下拉选项属于浏览器原生控件，不同浏览器对<option>的样式支持存在差异：Chrome会自动将<select>的字体设置继承到下拉选项，但Firefox、移动端Chrome不会完成这个继承，导致下拉时无法加载RemixIcon字体，仅选中状态（由<select>本身渲染）能正常显示图标。

可行解决方案（无需自定义下拉组件） #

1. 强化字体加载与样式优先级 #

首先确保RemixIcon的@font-face定义完整覆盖主流格式，再强制将字体应用到下拉选项上：

/* 先完善@font-face字体定义 */
@font-face {
  font-family: 'remixicon';
  src: url('path/to/remixicon.woff2') format('woff2'),
       url('path/to/remixicon.woff') format('woff'),
       url('path/to/remixicon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block; /* 强制加载字体，避免无字体状态闪烁 */
}

/* 给select和下拉option统一指定字体 */
.customize-icon-select {
  font-family: 'remixicon', sans-serif;
}

.customize-icon-select option {
  font-family: 'remixicon', sans-serif !important; /* 强制覆盖浏览器默认样式 */
}

/* 非图标选项恢复默认字体 */
.option-no-icon {
  font-family: sans-serif !important;
}

修改后的HTML代码：

<select class="form-control customize-icon-select" name="myselect">
  <option class="option-no-icon" value="">- no icon -</option>                
  <option value="ri-phone-fill">&#xEFE9;</option>
</select>

2. 使用原生Unicode字符替代HTML实体 #

部分浏览器对HTML实体的解析在下拉选项中存在兼容性问题，直接使用Unicode字符本身（而非）更可靠：

通过String.fromCharCode(0xEFE9)在控制台获取对应字符，直接写入<option>：

<option value="ri-phone-fill">📞</option> <!-- 替换为RemixIcon对应实际字符 -->

3. 针对移动端Chrome和Firefox的渲染优化 #

添加字体渲染属性，确保移动端字体显示正常：

.customize-icon-select,
.customize-icon-select option {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

4. 验证字体跨域访问（若使用CDN托管字体） #

如果RemixIcon字体放在CDN或其他域名下，需在服务器端配置CORS允许跨域访问，否则Firefox和移动端Chrome可能无法加载字体文件。

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