::placeholder中font-family多值不生效是因旧版webkit等浏览器对字体回退更保守，遇未知字体名会忽略整条声明；应优先使用安全字体链如-apple-system, blinkmacsystemfont, "segoe ui", roboto, sans-serif，并同时定义input和textarea的::placeholder规则。
为什么::placeholder里写多个font-family值没生效
不是浏览器不认，而是::placeholder对字体回退（fallback）的处理比普通文本更保守。某些旧版WebKit（如iOS 15之前Safari）或Android WebView会直接忽略整个font-family声明，只要其中包含它不认识的字体名，哪怕后面跟着sans-serif。你看到“提示词变默认宋体”或“完全不显示”，大概率是这个原因。
font-family列表中哪些字体能安全使用
移动端尤其要注意：系统字体链必须从最可靠、最广泛支持的开始排，不能把自定义字体或冷门字体放前面。以下组合经实测在Chrome 120+、Firefox 125+、Safari 17+、Edge 122+中稳定：
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;—— 全平台安全，iOS/macOS优先用San Francisco，安卓用Roboto，Windows用Segoe UI -
font-family: system-ui, -apple-system, sans-serif;—— 更简洁，system-ui是CSS标准字体族，现代浏览器都支持，但IE和旧Edge不识别，若已放弃兼容可优先用 - 避免：
font-family: "PingFang SC", "Helvetica Neue", sans-serif;——PingFang SC在非苹果设备上无效，且部分Android WebView会因识别失败而跳过整条声明
如何让深色模式下::placeholder自动换字体
@media (prefers-color-scheme: dark)本身不能直接控制font-family切换，因为字体选择与颜色无关；但你可以借CSS变量间接实现：
:root {
--placeholder-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
:root {
--placeholder-font: "SF Pro Display", -apple-system, system-ui, sans-serif;
}
}
input::placeholder {
font-family: var(--placeholder-font);
}
注意：变量必须定义在:root或全局作用域，组件内scoped样式或CSS Modules中无法穿透生效。
textarea和input的font-family必须分开写吗
不用。两者可以共用同一组规则，但需显式列出：
input::placeholder,
textarea::placeholder {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: #999;
}
遗漏textarea::placeholder是常见疏漏——很多设计只给了input的占位符样式，结果用户在多行输入框里看到的是系统默认字体，跟整体UI割裂。另外，textarea默认行高更大，如果加了line-height，记得同步给::placeholder设相同值，否则文字会垂直偏移。
真正难搞的不是写法，而是验证：打开DevTools，选中input元素，在Styles面板里找::placeholder规则，看是否被划掉；如果被划掉，八成是font-family里混进了不支持的字体名，或者权重被更高优先级的全局样式覆盖了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
