如何通过CSS调整Unicode字符的大小

Question

我有下面这个 ul，它产生了一个正方形的标记，但（未经修改）比 HTML 默认的正方形标记略微大一点。

li:before {
  content: "\25a0";
  margin-right: 6px;
  color: blue;          
}

问题：

1. 我想要显著增加方形unicode生成的项目符号的大小。
2. 此外，该符号与文本底部对齐，而不是居中对齐到文本。

有什么解决办法吗？

- sleeper

---

你能创建一个 JSFiddle 吗？ - Raptor

好的，请稍等一下。 - sleeper

JSFiddle: http://jsfiddle.net/byUpB/ - sleeper

Answer 1

您需要将以下CSS属性添加到li:before中

font-size: 128px;
vertical-align: middle;

您可以将128px更改为任何您想要的大小。

演示

- Raptor

Answer 2

请注意，你的fiddle在不同的浏览器中表现完全不同！

你没有为Unicode部分指定字体族。在Fiddle中，许多Unicode字符将在Firefox、IE和Edge中显示得更大。可能在所有非webkit浏览器中都是如此。

请添加例如：

font-family: "Lucida Sans Unicode", "Arial Unicode MS";

无论您在哪里使用Unicode字符，都可以跨浏览器使用...

您可以在此处详细了解差异： https://www.smashingmagazine.com/2014/05/unicode-for-a-multi-device-world/

- sebilasse

Answer 3

在你的CSS中添加font-size:12em;。由于您正在使用Unicode字符，它在技术上是字体的一部分；因此，您可以使用font-size来更改项目符号的大小。此外，正如Raptor指出的那样，请使用vertical-align: middle将文本与以前对齐。

- Mikayla Maki