将两种不同的字体添加到同一个按钮

Question

我有一个按钮，我想在上面添加两个字体和大小不同的文本标签。我还希望每个文本标签都显示在自己的行中。例如，如果我的标签是 ABCD 和 example，我希望它们在按钮上的显示方式如下：

ABCD
^例子

这是我试过的。是否可以对 value 属性的不同部分应用不同的样式？

<input style="width:170px; height:100px; font-size:90%; type="button" value="ABCD example">

Answer 1

你不能这样做，你想在字符串的一部分上应用样式，没有简单的方法可以做到这一点，你应该改用图像。这是纯粹的设计目的。只要搜索在线按钮图像制作器，你就会找到很多。

Answer 2

尝试 <button> 元素：

<button><span style="font-size:110%">ABCD</span> example</button>

它的工作原理与 <input type="button">

大致相同

Answer 3

您可以使用 button 而不是 input 并在内部使用两个 span 标签。例如：

<button class="btn btn-primary" type="button">
    <span style="font-size:14px;">ABCD</span>
    <span style="font-size:10px;">example</span>
</button>

现场示例位于：http://jsfiddle.net/h6jq7ep2/

为了简单起见，我使用了内联样式，但显然您可以将 class 和适当的 CSS 分配给每个 span.

将两种不同的字体添加到同一个按钮

Add two different fonts to the same button

html

css

fonts