我正在使用自定义字体(@ 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;
}
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;
}
将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" />
占位符是样式化的,但文本不是。