应显式设置 input 的 font-size 和 color 以避免浏览器 UA 样式差异；推荐用 px 或 rem，确保对比度≥4.5:1；需同步设置 textarea、select 等控件，并注意 Safari 的 color 特性、iOS 自动缩放及动态调整边界。
直接用 CSS 的 font-size 和 color 控制 input 文字样式
input 元素默认继承父级字体，但浏览器有各自 UA 样式（比如 Chrome 给 input 设了 13.333px），所以不显式设置就容易出现跨浏览器显示不一致。最稳妥的做法是明确写死或用相对单位覆盖。
-
font-size推荐用px或rem：前者精确可控，后者便于响应式缩放；避免只用em，因为input的em基准可能受父元素font-size干扰 -
color必须配足够对比度（至少 4.5:1），尤其深色背景上浅色文字容易看不清；别依赖系统默认灰（如#666） - 别漏掉
textarea和select：它们也需单独设样式，否则在 Safari 或 Firefox 中可能回退到原生控件样式
input 字体样式被忽略？检查是否被 user-agent 样式覆盖
常见现象：写了 font-size: 16px 却没生效，或者颜色在 Chrome 正常、Safari 变浅。根本原因是浏览器内置样式优先级高于部分简写规则，或某些属性被重置逻辑吞掉。
- 加
!important是临时解法，但更推荐用更具体的选择器，比如input[type="text"]或带 class 的.form-input - 确保没有全局重置（如
input { font: inherit; }）意外清掉了字体设置 - Safari 对
input的color有特殊处理：如果没设background-color，它可能强制用系统高对比模式下的颜色，此时加上background-color: #fff反而能解锁自定义color
统一控制多个表单控件的字体：用通配选择器还是逐个声明？
想让 input、textarea、select、button 字体一致，不能只写 input { ... } —— 这会漏掉其他控件，且不同控件默认行高、内边距差异大，光改字体大小可能造成视觉割裂。
- 推荐组合声明：
input, textarea, select, button { font-size: 16px; color: #333; }，再按需微调各控件的padding和line-height - 注意
textarea默认是等宽字体（monospace），若要和input一致，得额外加font-family: inherit - 移动端键盘弹出时，iOS Safari 有时会放大
input字体（触发“自动缩放”），加font-size: 16px通常能抑制，但前提是页面有正确的<meta name="viewport" content="width=device-width, initial-scale=1">
动态调整 input 字体大小的边界情况
真需要根据内容长度或屏幕尺寸动态调字体（比如搜索框满屏时字号变大），得小心几个坑：
立即学习“前端免费学习笔记（深入）”；
- 用 JS 监听
resize时，别直接改style.fontSize，先判断是否已存在内联样式，否则会和 CSS 规则冲突；更稳的方式是切换 class - 不要对
input用vw单位做主字体（如font-size: 4vw），小屏下可能缩到 10px 以下，可读性崩溃；可用clamp(14px, 4vw, 18px)限定范围 - 用户缩放页面（Ctrl + / Cmd +）时，
px单位不会响应，rem会，但前提是根元素font-size没被 JS 锁死——这点常被忽略
