HTML下拉框与文本框中天城文（Devanagari）显示异常求助

问题根源 #

Linux桌面环境下的Firefox、Chrome对原生表单控件（<select>、<input>）的渲染逻辑和普通元素（如<div>）存在差异：

• 普通元素完全遵循网页CSS指定的字体设置，你的Mustard UI字体支持天城文，因此<div>显示正常。
• 原生表单控件会优先调用系统级原生控件渲染，默认使用系统字体栈。如果Ubuntu系统默认字体栈中没有对天城文字符提供完整支持的字体，就会出现字符无法正常显示的问题。

解决方法 #

方法1：为表单控件显式指定支持天城文的字体栈 #

直接给<select>和<input>指定包含天城文支持的字体，Ubuntu系统通常预装Noto Sans Devanagari，可以将其加入字体栈：

/* 在<head>中添加<style>标签，或者写入外部CSS文件 */
select, input[type="text"] {
    font-family: 'Noto Sans Devanagari', sans-serif;
}

也可以扩展字体栈，兼容更多场景：

select, input[type="text"] {
    font-family: 'Noto Sans Devanagari', 'Arial Unicode MS', 'Segoe UI', sans-serif;
}

方法2：强制表单控件使用网页渲染（需自定义样式） #

通过CSS禁用原生控件外观，让控件继承网页字体设置，但会丢失原生样式，需要自行美化：

select, input[type="text"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: inherit; /* 继承父元素的Mustard UI字体 */
    /* 可选：添加自定义下拉箭头，避免select失去原生箭头 */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23666' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5em center;
    background-size: 0.8em;
    padding-right: 1.5em;
}

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