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" />

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

Answer 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;
}

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

2 个答案: