Html CSS font-weight 比 900 还要厚？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3949103/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS font-weight thicker than 900?
提问by ClarkeyBoy
I have a panel which can be expanded or minimised through a vertically centred link with a < or > symbol as the link text. At font-weight: 900 this does not stand out much, even with a large grey background around it. I do not want to use an image and, at the current font size, both symbols currently take up the maximum width of the panel.
我有一个面板，可以通过垂直居中的链接将 < 或 > 符号作为链接文本来扩展或最小化。在 font-weight: 900 时，即使周围有大的灰色背景，这也不会太突出。我不想使用图像，并且在当前字体大小下，两个符号当前都占据了面板的最大宽度。
Is there any way to thicken the line on the symbols beyond 900? Or is there another alternative I could use?
有没有办法将符号上的线条加粗超过 900？或者我可以使用另一种选择吗？
Thanks in advance.
提前致谢。
Richard
理查德
采纳答案by Chris Cox
Unfortunately there's no font-weight thicker than 900, and specifying font-weight by number varies across browsers. Your best bet would be to use a thicker font - you haven't specified what you're using, but Impact is relatively thick and tall for its width while being web-safe. Otherwise you could use @font-face to load in a different font.
不幸的是，没有字体粗细超过 900，并且按数字指定字体粗细因浏览器而异。您最好的选择是使用较粗的字体 - 您尚未指定您使用的字体，但 Impact 的宽度相对较粗且较高，同时具有网络安全性。否则，您可以使用 @font-face 加载不同的字体。
回答by Gogutz
In CSS 3 there's another way to make the font size bolder:
在 CSS 3 中，还有另一种使字体更粗的方法：
color:#888888;
text-shadow: 2px 0 #888888;
letter-spacing:2px;
font-weight:bold;
EDIT:
编辑：
For some sort of weird reason this doesn't look as pretty as it did over an year ago. It only works with text-shadow of 1px (on most common fonts, other thicker fonts might still work with 2px). And with text-shadow of only 1px, there's no need for such a large letter-spacing.
出于某种奇怪的原因，这看起来不像一年多前那么漂亮。它仅适用于 1px 的文本阴影（在大多数常见字体上，其他较粗的字体可能仍适用于 2px）。而且 text-shadow 只有 1px，所以不需要这么大的字母间距。
color:#888888;
text-shadow: 1px 0 #888888;
letter-spacing:1px;
font-weight:bold;
回答by Andy Ballard
To add to Gogutz answer, you can go even bolder by stacking up the text-shadows in a grid. Comma separate each on the line:
要添加 Gogutz 答案，您可以通过在网格中堆叠文本阴影来更加大胆。逗号分开就行了：
.extra-bold {
text-shadow: 0px 1px, 1px 0px, 1px 1px;
}
回答by Smita Kagwade
You can use text-shadow instead of font-weight
您可以使用 text-shadow 而不是 font-weight
text-shadow: 0px 1px, 1px 0px, 1px 0px;
回答by Durin
This is quite thick. But works only with webkit.
这是相当厚的。但仅适用于 webkit。
font-size: -webkit-xxx-large;
font-weight: 900;
回答by Tagman
Adding to Gogutz answer. You can use the currentcolorkeyword to use the color of the text and avoid hardcoding it.
添加到 Gogutz 答案。您可以使用currentcolor关键字来使用文本的颜色并避免对其进行硬编码。
Like this:
像这样：
text-shadow: 0.5px 0 currentColor;
letter-spacing: 0.5px;
