React项目中select标签设置font-weight:300不生效如何解决

• React开发场景下，仅select标签及其下属option选项的font-weight: 300样式无法正常渲染，同页面普通文本输入框可正常应用该字重效果
• 经页面其他输入框效果验证，项目已正确加载font-weight:300对应的字体资源；将select字重调整为500、700等更粗数值时，样式可正常生效，仅300细字重无法展示
• 调试确认select元素的CSS规则中font-weight: 300已正确命中，无更高优先级样式覆盖，但视觉上未呈现对应细字重效果

<link href="https://fonts.googleapis.com/css?family=Raleway:300,500,700&display=swap" rel="stylesheet"/>

原生select是浏览器接管渲染的替换元素，Windows平台下Chrome、Edge等主流浏览器会给原生表单控件绑定系统级默认渲染逻辑：300这类细字重和系统默认表单字重差异很小，会被浏览器直接fallback到系统默认字重；500、700这类粗字重和系统默认值差异明显，就能正常加载自定义字体渲染。
该问题和React框架无关，是原生表单控件的通用浏览器表现，所有前端技术栈下都可能出现

• 方案1：清除select原生外观，强制继承页面字体属性
  给select添加如下CSS重置规则，清除浏览器默认的表单控件样式绑定：

  select {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  

  如果需要保留下拉箭头功能，可通过背景图自定义箭头样式，搭配右侧内边距避免选项文字和箭头重叠。
• 方案2：不修改原生外观时，明确指定字体族
  若不想清除原生select的默认外观，可针对select、option元素显式声明字体全称，强制浏览器加载对应字重的自定义字体，避免fallback到系统字体：

  select, option {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
  }
  

• 方案3：替换为自定义下拉组件
  部分旧版浏览器完全不支持修改原生option的样式属性，如果需要完全统一下拉框和选项的字重、样式效果，可放弃原生select标签，使用普通DOM元素模拟自定义下拉组件。

内容的提问来源于stack exchange，提问作者Алина k