Question

我知道如何在html中更改input和textarea的font-family。但我关心的是 - 两个textarea字段是否有可能使字体彼此不同？如果是，那怎么办？

感谢。

Answer 1

您可以使用组合选择器以不同方式设置textarea占位符的样式：

#two:-prefix-input-placeholder

例如，将使用id＆＃39; two＆＃39;来设置占位符的样式。同时包括占位符前缀。请参阅下面的示例（在chrome和IE 11上测试）：

＆＃13;

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}
/***********************/

#two::-webkit-input-placeholder {
   color: blue;
}

#two:-moz-placeholder { /* Firefox 18- */
   color: blue;  
}

#two::-moz-placeholder {  /* Firefox 19+ */
   color: blue;  
}

#two:-ms-input-placeholder {  
   color: blue;  
}

＆＃13;

<textarea placeholder="this is some text"></textarea>
<textarea placeholder="this is some text" id="two"></textarea>

＆＃13;

Answer 2

您应该在textareas上设置两个不同的CSS类。然后，您可以为CSS中的每个类选择单独的字体。

Answer 3

给你的textareas一个id

<textarea rows="4" cols="50" placeholder="Some text" id="txtFont1"></textarea>
<textarea rows="4" cols="50" placeholder="Some text" id="txtFont2"></textarea>

然后设置样式

#txtFont1{
  font-family: century gothic;
}

#txtFont2{
  font-family: times new roman;
}

Answer 4

您可以为每个输入使用不同的选择器，然后定位它们以在其中应用不同的字体。

但是，请注意，使用其他字体会增加网站页面的加载时间，因此您应该小心并平衡样式和性能。

不同占位符值的不同字体

4 个答案: