如何修改HTML符号（↑、↓）的宽度与高度？

问题本质 #

↑、↓这类HTML实体属于文本字符，不是可自由拉伸的盒状元素：

• 直接设置width/height无效，因为文本尺寸由字体大小和字体本身决定；
• font-weight不生效是因为多数系统字体的箭头字符没有不同字重的变体，无法通过CSS强制改变粗细。

可行解决方案 #

1. 用font-size控制箭头大小（最简单）

既然是文本，直接调整字体大小来改变箭头尺寸，配合行高对齐：

.stats_arrow {
  font-size: 1.5rem; /* 放大字体即可增大箭头 */
  line-height: 1; /* 避免行高干扰对齐 */
  color: #1abcb0;
}

2. 改用CSS伪元素生成箭头（完全可控）

用伪元素生成箭头，或者用border绘制箭头，能自由控制尺寸、粗细：

方法A：Unicode字符配合伪元素

.stats_arrow::before {
  content: "\2191"; /* 对应↑的Unicode编码 */
  font-size: 1.2rem;
  font-weight: bold; /* 若字体支持粗体箭头则生效，可换支持的字体 */
  color: #1abcb0;
  display: inline-block;
  width: 1.2rem;
  text-align: center;
}

方法B：border绘制箭头（不受字体限制）

.stats_arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid #1abcb0; /* 向上箭头，调整border宽度控制大小 */
  margin-right: 4px;
}

对应HTML可简化：

<span class="percentages up"><span class="stats_arrow"></span> 21.87%</span>

3. 使用SVG箭头（最灵活）

内嵌SVG箭头，可直接修改宽高、颜色、粗细：

<span class="percentages up">
  <svg class="stats_arrow" width="16" height="14" viewBox="0 0 24 24" fill="none" stroke="#1abcb0" stroke-width="2">
    <path d="M18 15L12 9L6 15"/>
  </svg>
  21.87%
</span>

CSS直接控制属性：

.stats_arrow {
  width: 1.2rem;
  height: 1.1rem;
  stroke-width: 3; /* 调整箭头粗细 */
}

内容的提问来源于stack exchange，提问作者Tanvi Sharma