如何为占位符、文本框和按钮应用自定义字体系列？

Question

我想使用我电脑中的自定义字体作为占位符和按钮。

我的@font-face.

@font-face {
        font-family: customfont2;
        src: url(Font/otf/segment14.regular.otf);
        }

我在做 Dec/Bin/Hex 转换器

 <div id="decimal">
 <input placeholder="Type Decimal Here">
 <button>Convert Decimal</button>
 </div>

Answer 1

对于按钮，你只需要像这样的东西：

button{ 
    font-family: customfont2;
}

对于占位符，你可以试试下面的选择器：

::-webkit-input-placeholder { /* Edge */
  font-family: customfont2;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  font-family: customfont2;
}

::placeholder {
  font-family: customfont2;
}

更多关于::placeholder选择器

Answer 2

使用输入::占位符

伪元素样式输入元素的占位符

@font-face {
    font-family: 'mycustomfont';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecmNE.woff2);
}
 
input,button{
  font-family:'mycustomfont';
}
input::placeholder{
  font-family:'mycustomfont';
  color:green;
}

<div id="decimal">
 <input placeholder="Type Decimal Here">
 <button>Convert Decimal</button>
</div>

Answer 3

谢谢大家，但我自己想出来

input[type="text"]
        {
        font-family: customfont4;
        background-color: rgb(0, 0, 0);
        color: rgb(255, 0, 0);
        }
input[type="button"]
        {
        font-family: customfont3;
        }
        
button {
font-family: customfont3;
height:28px;
font-size:12pt;
}
::placeholder {
  font-family: customfont2;
    color: rgb(255, 0, 0);
  {