如何在html中添加小字体大小的*

Question

我有文字

Coupon*

字体大小为30px。但是我想让*不是30px而是更小。我怎样才能做到这一点？

http://jsfiddle.net/LkLGE/

由于

Answer 1

要使星号在顶部对齐，您可以将字符放在<sup> tag中并减小其字体大小：

<div class="text">Coupon<sup>*</sup></div>

---

.text {
    font-size: 30px;
}

.text sup {
    font-size: .5em;
}

JSFiddle example

Answer 2

优惠券<span style="font-size:any size that you want"> * </span>

Answer 3

如有疑问，请将其放入范围 - FIDDLE

#myspan {
   font-size: 10px;
}

这FIDDLE有点 reductio ad absurdum ，但很有趣！

Answer 4

作为基于<span>的答案的替代<sup或<sub>或<small>，从语义角度来看可能是一个更好的起点。

<sup>是上标，将提升 ^* 。

<sub>是下标，将降低 _* 。

<small>可能需要添加一些css *，但不应该有位置更改。见http://www.w3.org/TR/html5/text-level-semantics.html#the-small-element

小提琴显示它的实际效果：http://jsfiddle.net/6jmKT/

Answer 5

我不确定你的情况，但有时你想在很多地方这样做。有时，你会有一个“新”或“特殊”项目，你将添加一个带有javascript的类来表示这一点。

考虑一下你是否必须在某个地方进行更改，以及编辑此范围可能需要多少个地方。当然，您可以找到并替换，但请尝试THIS FIDDLE，看看您的想法。对于像这样的东西，CSS内容（）非常棒。

HTML

<div class="thing special">
    <!-- where special might be added by javascript -->
    Coupon
</div>

CSS

.thing {
    font-size: 30px;
    color: blue;
}

.special:after {

    display: inline-block;
    /* so you can use "block" like stuff on it - (margin-top etc) */

    /* this way you wouldn't have to change it in the html in a ton of places. just one - here. */
    content: "*"; 
    font-size: 15px;
    color: red;

    /* just for specific positioning */
    vertical-align: top;
    margin-left: -8px;
    margin-top: 5px;
}

OR

sup也很酷 - 我想......

HTML

<p>Coupon<sup class="star">*</sup></p>

CSS

p {
    font-size: 30px;
}

p .star {
    font-size: 15px;
    color: red;
}

Answer 6

您可以使用span，并且可以使用＆lt; sup＆gt;标记：

示例

<div class="text">Coupon<span class="star"><sup>*</sup></span></div>

.text {
    font-size: 30px;
}

.star {
    font-size: 12px;
}

http://jsfiddle.net/LkLGE/4/

Answer 7

最强大的方法是使用small元素。如果您希望将其效果调整为某些特定尺寸缩小，最好在其上使用class属性。例如：

<style>
.ast { font-size: 70% }
</style>
...
Coupon<small class=ast>*</small>

但是，许多字体中的星号“*”相当小，因此尺寸缩小很容易使其太小。如果您认为需要缩小其大小，则可能需要使用不同的字体。