如何在输入占位符上使用自定义字体？答案

【问题标题】：How to use custom fonts on a input placeholder?如何在输入占位符上使用自定义字体？
【发布时间】：2019-07-27 13:08:06
【问题描述】：

我正在使用自定义字体 (@font-face)，它们正确显示在我的整个应用程序中，除了输入 占位符。

字体未显示，占位符为空白。

输入字体（当我输入内容时）工作正常。此外，如果我将占位符字体更改为系统字体（Arial、Tahoma...），它也可以工作。

如何为占位符使用自定义字体？

输入：

<input placeholder="Search character" type="text" class="search-character">

CSS：

body { font-family: 'DIN', sans-serif; }
.search-character::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-family: 'DIN', sans-serif;
}
.search-character::-moz-placeholder { /* Firefox 19+ */
  font-family: 'DIN', sans-serif;
}
.search-character:-ms-input-placeholder { /* IE 10+ */
  font-family: 'DIN', sans-serif;
}
.search-character:-moz-placeholder { /* Firefox 18- */
  font-family: 'DIN', sans-serif;
}
.search-character::placeholder {
  font-family: 'DIN', sans-serif;
}

【问题讨论】：

标签： html css font-face placeholder

【解决方案1】：

将font-family 属性应用于::placeholder pseudo-class。

input::placeholder
{
    font-family: Helvetica;
}

另外，请注意，由于用户代理样式表，input 默认不会继承 font-family；看看这个sn-p：

body
{
  font-family: Impact, Haettenschweiler;
}

input::placeholder
{
  font-family: Impact, Haettenschweiler;
}

&lt;input type="text" placeholder="hello" /&gt;

占位符已设置样式，但文本未设置样式。

【讨论】：

@ArturHaddad 我可以看看你的代码吗？另外，您使用的是哪种浏览器？
@ArturHaddad 你用的是哪个浏览器？
铬。在 Firefox 中它可以工作，并且 font-family 是从 body 继承的。
@ArturHaddad 我写的 sn-p 在 Chrome 72 中为我工作。你使用的是旧版本吗？
让我们continue this discussion in chat。

【解决方案2】：

input::placeholder { 
 font-family: Arial;
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  font-family: Arial;
}

input::-ms-input-placeholder { /* Microsoft Edge */
  font-family: Arial;
}

【讨论】：