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

huangapple
go评论94阅读模式
英文:

How do you apply a custom font family for placeholder, textbox & button?

问题

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

我的 @font-face。

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

我正在做一个十进制/二进制/十六进制转换器。

  1. <div id="decimal">
  2.     <input placeholder="在此输入十进制">
  3.     <button>转换为十进制</button>
  4. </div>
英文:

I want to use a custom font from my computer for placeholder and button.

My @font-face.

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

I was doing a Dec/Bin/Hex converter

  1.  &lt;div id=&quot;decimal&quot;&gt;
  2.  &lt;input placeholder=&quot;Type Decimal Here&quot;&gt;
  3.  &lt;button&gt;Convert Decimal&lt;/button&gt;
  4.  &lt;/div&gt;

答案1

得分: 0

For button, you just need something like:

  1. button{ 
  2.     font-family: customfont2;
  3. }

For placeholders, you can try the selectors below:

  1. ::-webkit-input-placeholder { /* Edge */
  2.   font-family: customfont2;
  3. }
  5. :-ms-input-placeholder { /* Internet Explorer 10-11 */
  6.   font-family: customfont2;
  7. }
  9. ::placeholder {
  10.   font-family: customfont2;
  11. }

更多关于 ::placeholder 选择器的信息

英文:

For button, you just need something like:

  1. button{ 
  2.     font-family: customfont2;
  3. }

For placeholders, you can try the selectors below:

  1. ::-webkit-input-placeholder { /* Edge */
  2.   font-family: customfont2;
  3. }
  5. :-ms-input-placeholder { /* Internet Explorer 10-11 */
  6.   font-family: customfont2;
  7. }
  9. ::placeholder {
  10.   font-family: customfont2;
  11. }

More about the ::placeholder selector

答案2

得分: 0

使用 input::placeholder

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

  1. @font-face {
  2.     font-family: 'mycustomfont';
  3.     font-style: normal;
  4.     font-weight: 400;
  5.     font-display: swap;
  6.     src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecmNE.woff2);
  7. }
  9. input, button {
  10.     font-family: 'mycustomfont';
  11. }
  13. input::placeholder {
  14.     font-family: 'mycustomfont';
  15.     color: green;
  16. }
  1. <div id="decimal">
  2.     <input placeholder="输入十进制数">
  3.     <button>转换为十进制</button>
  4. </div>
英文:

use input::placeholder

pseudo element to style placeholder of input element

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. @font-face {
  2.     font-family: &#39;mycustomfont&#39;;
  3.     font-style: normal;
  4.     font-weight: 400;
  5.     font-display: swap;
  6.     src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecmNE.woff2);
  7. }
  8.  
  9. input,button{
  10.   font-family:&#39;mycustomfont&#39;;
  11. }
  12. input::placeholder{
  13.   font-family:&#39;mycustomfont&#39;;
  14.   color:green;
  15. }

<!-- language: lang-html -->

  1. &lt;div id=&quot;decimal&quot;&gt;
  2.  &lt;input placeholder=&quot;Type Decimal Here&quot;&gt;
  3.  &lt;button&gt;Convert Decimal&lt;/button&gt;
  4. &lt;/div&gt;

<!-- end snippet -->

答案3

得分: 0

谢谢各位，但我自己已经搞定了

  1. input[type="text"] {
  2.     font-family: customfont4;
  3.     background-color: rgb(0, 0, 0);
  4.     color: rgb(255, 0, 0);
  5. }
  7. input[type="button"] {
  8.     font-family: customfont3;
  9. }
  11. button {
  12.     font-family: customfont3;
  13.     height: 28px;
  14.     font-size: 12pt;
  15. }
  17. ::placeholder {
  18.     font-family: customfont2;
  19.     color: rgb(255, 0, 0);
  20. }
英文:

Thanks guys, but I figured on my own

  1. input[type=&quot;text&quot;]
  2. 		{
  3. 		font-family: customfont4;
  4.         background-color: rgb(0, 0, 0);
  5.         color: rgb(255, 0, 0);
  6. 		}
  7. input[type=&quot;button&quot;]
  8. 		{
  9. 		font-family: customfont3;
  10. 		}
  11. 		
  12. button {
  13. font-family: customfont3;
  14. height:28px;
  15. font-size:12pt;
  16. }
  17. ::placeholder {
  18.   font-family: customfont2;
  19.     color: rgb(255, 0, 0);
  20.   {

huangapple
  • 本文由 发表于 2023年5月15日 12:59:17
  • 转载请务必保留本文链接：https://go.coder-hub.com/76250973.html
  • button
  • css
  • font-face
  • html
  • placeholder
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定