Question

我正在尝试构建一个代码，该代码以几种不同的字体显示名称，为什么我的代码不显示在框中输入的名称？

<html>
<head>
<style>
display_name {
font-family: "Adobe Arabic";
}
</style>
</head>
<body>

<h1>Your name in Adobe Arabic font</h1>
<input id="word_input" type="text" spellcheck="false" value="Your Name"></input>
<p class="display_name" style="font-family:'Adobe Arabic': "></p>

</body>
</html>

Answer 1

您需要使用正确的CSS选择器

使用.display_name

EIDT：

你目前有

<style>
display_name {
font-family: "Adobe Arabic";
}
</style>

使用

<style>
.display_name {
font-family: "Adobe Arabic";
}
</style>

你忘记了。用作类选择器。没有。造型不会影响任何东西。

编辑2：使用此选项包含wordinput

<style>
#word_input, .display_name {
font-family: "Adobe Arabic";
}
</style>

请在此处查看工作小提琴https://jsfiddle.net/y1g6j2g6/3/

下次，请在第一篇文章中解释您的问题以及您想要完成的工作。

Answer 2

要引用某个类（与段落标记一样），您必须使用.即：.display_name{}

如果您希望使用本地.otf字体，那么您应该使用@font-face

＆＃13;

function bindFunction () {
  var input = document.getElementById('word_input').value;
  document.getElementsByClassName('display_name')[0].innerHTML = input;
}

＆＃13;

@font-face {
  font-family: "Adobe Arabic";
  font-weight: bold;
  src: url("<path_to_font>font.otf") format("opentype");
}

.display_name {
  font-family: "Adobe Arabic";
}

＆＃13;

<!DOCTYPE html>
<html>
<body>

  <h1>Your name in Adobe Arabic font</h1>
  <input id="word_input" type="text" spellcheck="false" placeholder="Your Name" onkeyup="bindFunction()">
  <p class="display_name"></p>

</body>
</html>

＆＃13;

包含字体的指南： https://css-tricks.com/snippets/css/using-font-face/

运行字体预览

2 个答案: