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

【问题标题】：Why is my font not working in form text field?为什么我的字体在表单文本字段中不起作用？
【发布时间】：2020-09-29 12:25:50
【问题描述】：

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

对解决方案的任何帮助都会有所帮助。谢谢美味

<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>

【问题讨论】：

也许按 F12 并查看网络选项卡以查看是否找到它。我建议文件名中不要有空格
您的样式标签不正确。它是一个带有 href 的 LINK 标签

标签： html css forms fonts field

【解决方案1】：

您可以查看此代码

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>

【讨论】：

使用第三方服务加载完全不同的字体并不能真正解决问题。
但是 css 中没有像 vag 这样的内置字体系列。我用这些字体只是为了给你看
这就是他们使用@font-face的原因！
感谢所有建议，所以我想它不可能在我的页面中链接/使用自定义字体？
不！有可能，但我认为该网址无法访问