javascript中一个按钮样式的两种字体类型

two font types in one button style in javascript

本文关键字：样式 两种 字体 类型 按钮 一个 javascript      更新时间：2023-09-26

我有一个问题：假设我正在编写一个java脚本计算器。我希望每个按钮都有两个信息：一个是描述，例如"add"，另一个在这种情况下是"plus sign"。我希望该描述的大小必须为12px，但我希望"plus sign"的大小为40px。综上所述：一个按钮中包含两种字体大小。有可能做到这一点吗？

是。

button {
    font-size: 12px;
}
button > span {
    font-size: 40px;
}

<button>Add<span>+</span></button>

或者使用一些CSS魔术：

button {
    font-size: 12px;
}
button:after {
    content: "++";
    font-size: 40px;
}

<button>Add</button>

随时根据您的具体需求进行修改。

您可以在<button>元素中嵌套多个<span>，并相应地设置样式：

<button>
  <span id="a">small</span>
  <span id="b">big</span>
</button>

Fiddle

如果它不一定是<input type="button">，我会使用类似的东西：

<button onclick="" class="button-style">
    <span class="font-style-1">add</span>
    <span class="font-style-2">+</span>
</button>

然后为<button>定义一个类似按钮的样式，并为您的跨度定义类似的样式：

.font-style-1 {
    font-size: 12px;
    vertical-align: middle;
}
.font-style-2 {
    font-size: 48px;
    vertical-align: middle;
}

现场观看：http://codepen.io/PhilipFeldmann/pen/qbroJP

相关文章：