CSS font-weight 比 900 还要厚？

Question

我有一个面板，可以通过垂直居中的链接将 < 或 > 符号作为链接文本来扩展或最小化。 在 font-weight: 900 时，即使周围有大的灰色背景，这也不会太突出。 我不想使用图像，并且在当前字体大小下，两个符号当前都占据了面板的最大宽度。

有没有办法将符号上的线条加粗超过 900？ 或者我可以使用另一种选择吗？

提前致谢。

理查德

Answer 1

在 CSS 3 中，还有另一种使字体更粗的方法：

color:#888888;    
text-shadow: 2px 0 #888888;
letter-spacing:2px;
font-weight:bold;

编辑：

出于某种奇怪的原因，这看起来不像一年多前那么漂亮。 它仅适用于 1px 的文本阴影（在大多数常见字体上，其他较粗的字体可能仍适用于 2px）。 而且 text-shadow 只有 1px，所以不需要这么大的字母间距。

color:#888888;    
text-shadow: 1px 0 #888888;
letter-spacing:1px;
font-weight:bold;

Answer 2

要添加到 Gogutz 答案中，您可以通过在网格中堆叠文本阴影来更加大胆。 逗号分开就行了：

.extra-bold {
  text-shadow: 0px 1px, 1px 0px, 1px 1px;
}

Answer 3

您可以使用 text-shadow 而不是 font-weight

text-shadow: 0px 1px, 1px 0px, 1px 0px;

Answer 4

不幸的是，没有字体粗细超过 900，并且按数字指定字体粗细因浏览器而异。 您最好的选择是使用较粗的字体 - 您尚未指定您使用的字体，但 Impact 的宽度相对较粗且较高，同时具有网络安全性。 否则，您可以使用 @font-face 加载不同的字体。

Answer 5

添加到 Gogutz 答案。 您可以使用currentcolor关键字来使用文本的颜色并避免对其进行硬编码。

像这样：

text-shadow: 0.5px 0 currentColor;
letter-spacing: 0.5px;

Answer 6

这是相当厚的。 但仅适用于 webkit。

font-size: -webkit-xxx-large;
font-weight: 900;