占位符字体不变

Question

我试图更改我的占位符字体以匹配我的其余输入字段，但它似乎不起作用，但是当我通过我的 phone 查看我的网站时，字体都是一样。

相关占位符可在此处查看。未更改的字体是消息字段，它是 textarea。我不确定这是否是导致此问题的原因，如果是，如何解决。

我有这个代码：

textarea {
font-family: Helvectica;
font-size: 18px;
}
::-webkit-input-placeholder {
   font-style: Helvetica;
}

:-moz-placeholder { /* Firefox 18- */
   font-style: Helvetica; 
}

::-moz-placeholder {  /* Firefox 19+ */
   font-style: Helvetica; 
}

:-ms-input-placeholder {  
   font-style: Helvetica;
}
.inputbarmessage {
display: block;
width: 400px;
margin: 10px auto;
font-size: 18px;
padding: 10px;
-webkit-transition: all 0.40s ease-in-out;
-moz-transition: all 0.40s ease-in-out;
-ms-transition: all 0.40s ease-in-out;
-o-transition: all 0.40s ease-in-out;
outline: none;
border: 1px solid #DDDDDD;
}

HTML

<form action="" method="post" id="mycontactform" >
    <input type="text" class="inputbar" name="name" placeholder="Full Name" required>
    <input type="email" class="inputbaremail" name="email" placeholder="Email" required>
    <textarea rows="4" cols="50" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
    <label for="contactButton">
        <input type="button" class="contactButton" value="Send Message" id="submit">
    </label>
</form>

有没有人看出我做错了什么？

Answer 1

您想使用 font-family，而不是 font-style 属性，像这样：

::-webkit-input-placeholder {
    font-family: Helvetica;
}
:-moz-placeholder {
    font-family: Helvetica;
}
::-moz-placeholder {
    font-family: Helvetica;
}
:-ms-input-placeholder {
    font-family: Helvetica;
}

占位符字体不变

Placeholder font not changing

html

css

fonts

placeholder