::placeholder是独立伪元素，不继承input的font-family等样式，必须显式声明font-family、font-size、font-weight等属性，并写全input::-webkit-input-placeholder、input::-moz-placeholder、input:-ms-input-placeholder、input::placeholder四套规则才能跨浏览器生效。
::placeholder 不是普通子元素，它不参与常规继承链
你给 input 设置了 font-family: "PingFang SC", sans-serif;，但 ::placeholder 里的文字依然用默认字体——这不是 bug，是规范行为。CSS 继承只作用于真实 DOM 子节点，而 ::placeholder 是浏览器渲染层生成的伪元素，它的样式计算完全独立，不会自动拿父元素的 font-family、font-size 或 line-height。
哪些字体相关属性能被 ::placeholder 控制？
可以显式设置，但必须单独写在伪元素规则里：
-
font-family：支持，但中文字体名必须加英文引号，比如"Microsoft YaHei" -
font-size：支持，建议不低于14px，否则 iOS Safari 可能触发自动缩放 -
font-weight：支持，但font简写属性会重置所有值，慎用 -
line-height：不推荐设具体数值（尤其在 Safari），改用line-height: normal配合input元素本身的height和padding
为什么写了 font-family 还是没生效？
常见失效原因不是语法错，而是被覆盖或加载失败：
- 父级
input上用了font: 16px "Arial"这类简写，它会把font-family设为Arial并清空其他字体声明，导致伪元素无法继承任何有效值 -
@font-face中定义的字体名和::placeholder里写的不一致（大小写、空格、引号缺一不可） - 字体文件 404 或 CORS 报错，Network 面板里能看到
.woff2请求失败 - 全局 CSS 里有
* { font-family: system-ui; }这类通配符规则，它不作用于伪元素，但可能让你误判“继承”路径
Safari 下字体对齐偏上，光调 font-size 没用
Safari（尤其是 16.3 及更早）对 ::-webkit-input-placeholder 的基线计算异常，单纯调大 font-size 或设 line-height: 2 会让文字视觉上浮，甚至切掉下半部分。
- 必须在
input元素上设line-height: normal，而不是写在伪元素里 - 配合
height和上下padding控制整体高度，让浏览器按真实字体度量自动居中 - 四个前缀选择器一个都不能少：
input::-webkit-input-placeholder、input::-moz-placeholder、input:-ms-input-placeholder、input::placeholder，顺序错了 Safari 就认不出
真正难的不是写对四行 CSS，而是意识到 ::placeholder 从来就不该靠“继承”来驱动样式——它是一组需要独立声明、逐个调试的渲染通道，每个浏览器都握着自己的一套开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
