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

Question

我有疑问：假设我正在编写一个java脚本计算器。我希望每个按钮里面都有两个信息：一个是描述，例如“add”，另一个是“plus sign”。我希望该描述的大小为12px，但我希望“plus sign”的大小为40px。总结：一个按钮中有两种字体大小。是否有可能实现这一目标？

Answer 1

如果它不必是<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

Answer 2

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

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

Fiddle

Answer 3

是

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>

随意修改您的确切需求。