如何增加包含的文本的大小？

Question

对于显示的以下设计，我想增加其中包含的文本的大小。我无法这样做。

<span class="my-icon">
   Club Members
</span>

CSS：

.my-icon {
    position: relative;
    display: inline-block;
    width: 10em;
    height: 6em;
    border: .5em solid blue;
    top: 2em;
    text-align: center;
    padding-top: 1em;
    font-family: sans-serif;
    text-transform: uppercase;
    z-index: 5;
    background-color: #fff;
}
.my-icon::before {
    position: absolute;
    border: 2em solid #fff;
    border-bottom: none;
    border-top-right-radius: 2em;
    border-top-left-radius: 2em;
    left: 3em;
    top: -2em;
    content:'';
    z-index: 3;
}
.my-icon::after {
    position: absolute;
    border: 2.5em solid blue;
    border-bottom: none;
    border-top-right-radius: 2.5em;
    border-top-left-radius: 2.5em;
    left: 2.5em;
    top: -2.5em;
    content:'';
    z-index: 1;
}

这是输出：

这里是上面html的jsfiddle。

如何增加里面文字的大小？当我将字体大小增加font-weight时，整个容器的大小会增加。我该怎么办？

Answer 1

您正在使用em作为宽度和高度属性。 em是一个相对测量值，它将基于字体的当前值/大小。

由于您使用的相对测量值，您的形状将根据字体大小重新调整大小。将字体设置为粗体会略微增加字体大小，从而增加em的值。

如果您的字体大小是10px，那么1em = 10px;如果将字体大小更改为15px，则将1em = 15px;

将属性值调整为非相对值的内容，例如像素，或者将.my-icon范围内的文本换成另一个跨度标记，例如Dan已经使用他的解决方案。

Answer 2

您可以执行以下操作：

<span class="my-icon">
    <div>Club Members</div>
</span>

使用CSS：

span div{
    font-size:40px;
}

它应该增加文本的大小，而不是跨度my-icon。

Answer 3

与@ JSG的答案类似，但我会避免为您网站上的所有span div创建CSS规则。

最好创建一个单独的类，并使用<span>代替<div>。

<强> HTML：

<span class="my-icon">
    <span class="large">Club Members</span>
</span>

<强> CSS：

.large {
    font-size: 30px;
}

JS Fiddle Demo