CSS字体重量超过900？

Question

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

有没有办法在900以上的符号上加粗线？或者我可以使用另一种替代方案吗？

提前致谢.

理查德

Answer 1

在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;

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

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

像这样：

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