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

Question

我正在使用自定义字体 (@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;
}

Answer 1

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

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

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

body
{
  font-family: Impact, Haettenschweiler;
}

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

<input type="text" placeholder="hello" />

占位符有样式，但文本没有。