圆圈中的数字如何调整字体大小

Question

我有一个圆圈，显示其中的数字，我无法处理字体大小。

这是我的代码：

  span.blue {
        background: #5EA226;
        border-radius: 0.8em;
        -moz-border-radius: 0.8em;
        -webkit-border-radius: 0.8em;
        color: #ffffff;
        display: inline-block;
        font-weight: bolder;
        line-height: 4em;
        text-align: center;
        width: 4em;
        font-size: 250%;
        font-size: initial;

和HTML代码：

<span class="blue">5 </span>

我希望获得更大的字体大小，但无论我尝试什么，字体大小相同，所以我如何玩字体大小？

样品：

Answer 1

删除font-size: initial;，它会覆盖您的font-size: 250%;。

Answer 2

所有内容都基于示例中跨度的字体大小，因为您使用的是em值。

因此，如果不增加其他所有内容的大小，就无法增加文本大小。

解决方案（好吧，我想到的第一个就是添加一个内部跨度。

span.green {
  background: #5EA226;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #ffffff;
  display: inline-block;
  font-weight: bolder;
  text-align: center;
  line-height: 4em;
  width: 4em;
  font-size: 2.5em;
}
span.green > span {
  font-size: 250%;
  line-height: .625;
}

<span class="green">5</span>

<span class="green"><span>5</span></span>

但是，这也会略微扭曲效果，所以你应该尝试调整行高来补偿。

备选选项 - 使用定义的高度而不是line-height和display: table-cell;。这样可以避免任何行高调整。

JSfiddle Demo

Answer 3

不要将％用于属性font-size：24px / pt / e.m

Answer 4

使用此风格

   span.blue {
    background: #5EA226;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bolder;
    line-height:250px;
    text-align: center;
    width: 250px;
    font-size: 150px;
   }

这可能会解决您的问题。