CSS字重是否可以比900更粗？

Question

我有一个面板，可以通过一个竖直居中的链接展开或最小化，链接文本为<或>符号。在font-weight: 900的情况下，即使周围有一个大的灰色背景，它也不是很突出。我不想使用图片，在当前的字体大小下，两个符号占据了面板的最大宽度。

有没有办法将符号上的线条加粗超过900？或者我能用另一种替代方法吗？

提前致谢。

Richard

- ClarkeyBoy

Answer 1

CSS 3 提供了另一种使字体加粗的方法：

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

编辑：

因为某种奇怪的原因，这看起来不如一年前那么美丽。它只适用于文本阴影1像素（对于大多数常用字体，其他更粗的字体可能仍然可以使用2像素）。而且，只有在文本阴影为1像素时，才不需要如此大的字母间距。

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

- Gogutz

---

完美的解决方案！谢谢！ - Egor

这是一种使字体变得更加粗的巧妙方法。 - MaxZoom

Answer 2

补充Gogutz的答案，您甚至可以通过在网格中堆叠文本阴影来变得更加大胆。在每行上以逗号分隔每个阴影：

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

- Andy Ballard

---

你也可以尝试这个： text-shadow: -1px 1px, 1px 1px, 1px 1px; - agni10

这是一个很好的解决方案，所以感谢@andy-ballard的帖子。我为高分辨率手机/显示器做了一个小变化，使用text-shadow: 0 0.01em, 0.01em 0, 0.01em 0.01em;，并建议尝试最左边（不叠加）的text-shadow: 0 0.01em;，以获得微妙的加粗效果，然后根据需要从左到右堆叠。 - gdibble

Answer 3

您可以使用text-shadow代替font-weight。

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

- Smita Kagwade

Answer 4

很遗憾，没有比900更粗的字重，而通过数字指定字重在不同的浏览器中会有所不同。你最好使用更粗的字体 - 你没有说明你正在使用什么字体，但是Impact相对而言比较宽高比例大，同时也是Web安全字体。否则，你可以使用@font-face加载不同的字体。

- Chris Cox

---

我正在使用font-family: Verdana, Arial, Helvetica, sans-serif。我可以给那些链接添加一个类，将字体设置为impact...这样就可以了。这不会在风格上产生太大的不同，只是在字体的粗细上有所区别。感谢你的建议。 - ClarkeyBoy

Answer 5

除了Gogutz的回答之外，你可以使用 currentcolor 关键字来使用文本的颜色并且避免硬编码。

像这样：

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

- Tagman

Answer 6

这个有点厚重。但只能在Webkit上运行。

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

- Durin