为什么我的字体在表单文本字段中不起作用？

编程问答 2022-06-11

问题描述

我正在尝试在表单中添加vag字体。我将“ VAG Rounded Std-Black.otf”字体放在名称“ fonts”之外的文件夹中以进行链接。但我仍然无法在表单文本字段中使用它？

该解决方案的任何帮助将是有帮助的。 thx yummi 

<style type="text/css" href="/fonts">
    
   @font-face {
   font-family: vag;
   src: url(fonts/VAG Rounded Std-Black.otf);
}   
    body {
    background-color: dimgrey;
    font-family: Arial;
    color: white;
    font-size: 20px;
    margin: 50px;
}   
    /*... input message ...*/
    
    input[type=text] {
    width: 300px;
    height: 40px;
    border: none;
    outline: none;
    padding-left: 37px;
    font-family: vag;
    font-size: 14px;
    color: white;
    font-weight: bold;
    letter-spacing: .5px;
    background-color:grey;
}
<!-- input message -->
<form><input style="color:white;font-family: vag;" type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>

解决方法

您可以检查此代码

I've Used Google fonts 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <form><input style="color:black; font-family: 'M PLUS Rounded 1c',sans-serif;" type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
</body>
</html>

fieldfontsformshtml