input标签无font-size属性，必须用css设置；size属性仅控制显示字符数，不影响字体大小；推荐用rem适配缩放，配合padding和line-height确保垂直居中。
input 标签本身不提供 font-size 属性
直接在 <input> 标签里写 font-size="16px" 是无效的——HTML 规范里没有这个属性，浏览器会忽略它。所有字体大小控制必须走 CSS 路线。
常见错误是误以为 size 属性能调字体，其实它只管「能显示几个等宽字符」，和字体大小无关。比如 size="10" 在 12px 字体下显示宽度 ≈ 10 个英文字符宽，在 24px 下就变宽了，但它自己并不改字体。
- 想改字体大小，必须用
font-sizeCSS 属性 - 可作用于单个 input：
<input style="font-size: 16px;"> - 也可用 class 或 id 统一管理：
.form-input { font-size: 14px; } - 别漏掉
line-height配合调整，否则文字可能上下贴边
用 rem / em 还是 px？关键看是否需要响应式
如果你的页面要适配不同屏幕或支持用户缩放（比如视力障碍用户调大系统字体），px 就不合适：它强制固定像素值，会切断浏览器的缩放链路。
rem 是更稳妥的选择，尤其适合全局统一控制。只要在 上设好基准，比如 font-size: 16px，那 input { font-size: 0.875rem; } 就稳定等于 14px，且随根字体缩放而变化。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 移动端表单建议用
rem，避免 Safari 缩放后文字被截断 -
em容易因父元素字体变化而意外缩放，除非你明确要继承父级比例 - 纯后台管理页、无缩放需求时，
px可用，但需注意高 DPI 屏幕下可能显得偏小 - 别用
<font size="3"></font>—— 该标签已废弃多年，现代浏览器虽兼容但不推荐
input 内文字垂直居中常被忽略的细节
只设 font-size 不够，input 默认 box-sizing: border-box，但 padding 和 height 不匹配时，文字会顶着上边或下沉。
典型表现：16px 字体设了 height: 40px，结果文字离顶部空太多。根本原因是 input 的行内盒模型默认对齐 baseline，不是 middle。
- 加
padding: 10px 12px比硬设height更可靠 - 显式设
line-height: normal或与height接近的值（如height: 40px; line-height: 40px）能改善，但仅对单行有效 - 如果用了自定义字体（如
font-family: "PingFang SC"），某些字体的 ascent/descent 值会导致视觉偏移，此时微调padding-top比较实际 - 移动端 iOS Safari 对
input的line-height支持不稳定，优先靠padding控制垂直空间
动态调整 input 字体大小的边界情况
真有场景需要随内容长度缩放字体（比如搜索框输入超长关键词时缩小字号），不能只靠 CSS，得用 JS 监听 input 事件。
但要注意：input 元素的 value 长度 ≠ 渲染宽度，中文、emoji、全角符号占位远大于 ASCII 字符。直接按字符数判断容易误判。
- 简单方案：
input.addEventListener('input', () => { this.style.fontSize = this.value.length > 20 ? '12px' : '16px'; }); - 进阶做法：用
getBoundingClientRect()测量文字实际宽度，再决定是否缩放（但性能开销大，慎用） - 避免在每次输入都重排样式，把字体大小变化封装成 class 切换更高效
- 别忘了处理初始值：
<input value="很长的默认文本">，JS 需在 DOM 加载后立即检查并应用尺寸
padding、line-height、font-family、设备缩放、甚至输入法候选框共存时的隐性冲突。最保险的做法，是把 input 的字体、行高、内边距打包成一个 class，而不是零散写 style。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
