如何更改使用javascript输入的每个字母的字体粗细
要更改使用JavaScript输入的每个字母的字体粗细，可以通过CSS的font-weight属性来实现。以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
#text {
font-weight: normal; /* 默认字体粗细为正常 */
}
</style>
</head>
<body>
<input type="text" id="input" oninput="changeFontWeight()">
<p id="text">这是一个示例文本</p>
<script>
function changeFontWeight() {
var input = document.getElementById("input").value;
var text = document.getElementById("text");
// 根据输入的内容设置字体粗细
if (input === "bold") {
text.style.fontWeight = "bold"; // 设置为粗体
} else if (input === "normal") {
text.style.fontWeight = "normal"; // 设置为正常
} else {
text.style.fontWeight = "normal"; // 默认设置为正常
}
}
</script>
</body>
</html>在上述代码中，我们通过监听输入框的oninput事件，在每次输入改变时调用changeFontWeight()函数。该函数获取输入框的值，并根据输入的内容设置文本的字体粗细。如果输入的内容是"bold"，则将字体粗细设置为粗体；如果输入的内容是"normal"，则将字体粗细设置为正常；其他情况下，默认将字体粗细设置为正常。
这样，当用户在输入框中输入"bold"或"normal"时，文本的字体粗细会相应地改变。你可以根据实际需求修改代码，实现更多样式的字体粗细变化。
注意：本回答中没有提及任何特定的云计算品牌商，如需了解相关产品和服务，请自行搜索相关信息。
相关·内容
我有一个我自己制作的可变字体，我想在一个网站上实现它，当用户键入时，每个字母的字体粗细都会增加。我现在有这段代码，它会随着输入的整个文本而增长，但所有内容都会发生变化，而不是每个字母(所以我需要的代码是，对于每个按键事件，字体粗细都会改变，但不是整个文本，所以第一个键入的字母将具有较小
浏览 24提问于2020-07-16得票数 0
1回答
我有一个我自己制作的可变字体，我想在一个网站上实现它，当用户键入时，每个字母的字体粗细都会增加。我现在有这段代码，它会随着输入的整个文本而增长，但所有内容都会发生变化，而不是每个字母(所以我需要的代码是，对于每个按键事件，字体粗细都会改变，但不是整个文本，所以第一个键入的字母将具有较小
浏览 24提问于2020-07-14得票数 0
我有一个我自己制作的可变字体，我想在一个网站上实现它，当用户输入每个字母的字体粗细时，它就会增长。我现在有这段代码，它会随着输入的整个文本而增长，但所有内容都会发生变化，而不是每个字母(所以我需要的代码是，每次按下键盘时，字体粗细都会改变，但不是整个文本，所以第一个键入的字母将具有较小
浏览 12提问于2020-07-14得票数 1
我有一个我自己制作的可变字体，我想在一个网站上实现它，当用户键入时，每个字母的字体粗细都会增加。我现在有这个代码，它会随着输入的整个文本而增长，但所有内容都会发生变化，而不是每个字母。我们的目标是让字体的粗细在每次改变时都会增加(所以每个输入的字母都会增加)
浏览 23提问于2020-07-16得票数 0
我希望能够控制字体-粗细的文本，如果括号内的p标记使用JavaScript。这方面的任何帮助都是很好的。
浏览 0提问于2012-12-19得票数 7
1回答
我做了一个可变字体，将字体粗细从101改为900，并希望在一个网站上实现它，当用户键入时，字体会随着每个字母的键入而改变其粗细 我现在有这段代码，但它只是直接将其更改为字体粗细900，而且执行起来并不慢谢谢你的帮助！！
浏览 16提问于2020-07-14得票数 1
我做了一个可变字体，将字体粗细从101改为900，并希望在网站上实现它，当用户键入时，字体会随着每个字母的键入而改变其粗细 我现在有这段代码，但它只是直接将其更改为字体粗细900，而且执行起来并不慢。我真的是新手，所以我不知道还有什么可以尝试的，谢谢你的帮助！
浏览 23提问于2020-07-14得票数 0
回答已采纳
我试图在用户输入时格式化日期，但当我添加value字段(value={this.state.dob})时，样式会更改为更粗体的字体粗细(有时也会在输入过程中更改为正确的字体粗细)。它似乎真的来自value字段，我试着将它添加到这个页面的其他输入中，它也做了同样的事情。this.setState({
浏览 32提问于2021-10-08得票数 0
回答已采纳
4回答
我想我在移动(iOS 8) Safari中发现了一个谷歌字体的网页渲染错误。在我看来，Mobile Safari在使用Google字体的所有文本中添加了少量的字母间距，或者它使用了另一种字体。我尝试使用哪种Google字体(Open Sans)并不重要。它可以在所有现代浏览器上正确呈现。已测试Android、FF、Chrome、Safari。
尝试在iOS设备上加载此页面，以了解我的</em
浏览 0提问于2015-03-03得票数 30
1回答
我需要创建一个具有自动完成功能的输入框。因此，当用户输入"ja“时，前两个字符将以粗体显示，而"vascript”将以灰色显示。由于某些原因，我不能使用jquery自动完成功能。由于用户可以输入的单词不是很多，所以我创建了一个数组，并为每个缩写指定了匹配的单词。words= [{abbv:"J", word="JAVA"}, {abbv:"JA", word:"<
浏览 0提问于2013-09-10得票数 0
2回答
我有一个动态检索的文件列表，它们使用javascript附加了单选按钮。我有一个选项来检查该文件，然后单击一个按钮，例如Activate。我想要更改指示文件已激活的选中按钮的字体粗细。我如何使用javascript来做这件事呢？下面是我写的javascript： var table = do
浏览 0提问于2016-04-18得票数 0
1回答
我一直在为我创建的可变字体编写此代码，其中的目标是输入的每个字母都会增加字体粗细，因此文本会慢慢变得越来越不可读。有没有可能在输入文本时这样做，因为现在它只是奇怪地在输入中添加相同的字母，其中一个是它应该逐步执行的，而另一个只是正常地执行。提前感谢您的帮助！
浏览 2提问于2020-12-05得票数 1
3回答
在iOS 7中，当使用新的从屏幕边缘滑动手势向后导航时，后退按钮(“艺术家”)的标题将从粉色(在下面的示例中)和常规字体粗细褪色为黑色和粗体粗细。
在我看来，动画使用了两个不同的标签来实现这种效果；一个淡出，另一个淡入。然而，苹果以某种方式调整了字体，使常规标签完美地覆盖了粗体标签，从而创造了一种单一标签在两种不同的粗细和颜色之间变形的错觉。他们是否简单地调整了常规
浏览 1提问于2014-01-15得票数 38
回答已采纳
1回答
我正在寻找一种合适的算法，可以识别出与已知字母图像略有不同的图像是否匹配。
我该如何检测类似字体(字体系列、大小和粗细)的字母s的另一个图像是同一个字母？
浏览 0提问于2012-03-19得票数 2
2回答
我想知道有没有人有聪明的js或css技巧，让小字体变得更粗体一点。有没有人知道让小字体变得更粗体的窍门？我当前的CSS： font-family: "Courier New",C
浏览 2提问于2012-06-14得票数 4
回答已采纳
我对每个字母都有一个跨度(lettering.js)。我使用的字体是可变字体。每次我悬停跨度时，“重量”(字体粗细)必须在20-500个重量之间随机变化。我猜是因为“字体变化设置：\‘重量\’”的原因，我怎么才能解决这个问题？提前谢谢。:)
浏览 2提问于2018-04-21得票数 0
1回答
我正在为我的网站使用外部字体类型，我有3个ttf文件，正常，粗体和斜体样式。我想知道是否可以更改字体粗细，因为我已经尝试使用font-weight CSS属性，但它似乎只适用于普通粗细或粗体粗细，所以我不能使用介于两者之间的任何粗细。
有没有办法对我的字体使用其他粗细？我需要包含任何额外的文件
浏览 1提问于2016-01-08得票数 1
2回答
我正尝试在网站上使用androids roboto字体，它工作得很好，直到我在文本中看到一个德国字母，然后它看起来字体粗细发生了变化。它是这样导入的：font-family: 'RobotoLight';src: url('Roboto-Light-webfont.eot这是因为字体错误还是因为css设置？有什么建议
浏览 0提问于2013-01-21得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
