我有一个面板，可以通过带有 < 或 > 符号作为链接文本的垂直居中链接来扩展或最小化该面板。在 font-weight: 900 时，这并不突出，即使它周围有一个大的灰色背景。我不想使用图像，并且在当前字体大小下，两个符号当前都占用了面板的最大宽度。
有什么办法可以将符号上的线加粗超过 900？或者我可以使用另一种选择吗？
提前致谢。
理查德
问问题
42794 次
6 回答
50
在 CSS 3 中，还有另一种使字体变粗的方法：
color:#888888;
text-shadow: 2px 0 #888888;
letter-spacing:2px;
font-weight:bold;
编辑：
由于某种奇怪的原因，这看起来不像一年多前那么漂亮。它仅适用于 1px 的文本阴影（在大多数常见字体上，其他较粗的字体可能仍适用于 2px）。并且只有 1px 的文本阴影，不需要如此大的字母间距。
color:#888888;
text-shadow: 1px 0 #888888;
letter-spacing:1px;
font-weight:bold;
于 2013-01-28T11:49:19.620 回答
16
要添加到 Gogutz 答案，您可以通过在网格中堆叠文本阴影来更加大胆。逗号分隔每个就行：
.extra-bold {
text-shadow: 0px 1px, 1px 0px, 1px 1px;
}
于 2016-11-19T16:32:23.593 回答
7
您可以使用 text-shadow 代替 font-weight
text-shadow: 0px 1px, 1px 0px, 1px 0px;
于 2018-12-04T12:35:27.957 回答
6
不幸的是，没有大于 900 的字体粗细，并且按数字指定字体粗细因浏览器而异。您最好的选择是使用较粗的字体 - 您尚未指定您使用的字体，但 Impact 在其宽度上相对较厚且较高，同时是网络安全的。否则，您可以使用 @font-face 加载不同的字体。
于 2010-10-16T14:11:42.073 回答
2
添加到Gogutz的答案。您可以使用currentcolor关键字来使用文本的颜色并避免对其进行硬编码。
像这样：
text-shadow: 0.5px 0 currentColor;
letter-spacing: 0.5px;
于 2020-04-22T19:57:00.833 回答
0
这个很厚。但仅适用于 webkit。
font-size: -webkit-xxx-large;
font-weight: 900;
于 2014-05-07T14:42:25.413 回答