使用 css 创建真正粗体的文本

Question

有什么方法可以让我的字体比下面的示例更粗吗？我尝试将

font-weight

从 900 增加到 1500，但我没有看到任何差异。

#step-1 div {
    font-weight: bolder;
    font-weight: 900;
}

Answer 1

使用

text-shadow

使其看起来更大胆。

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

body {
  font-family: Arial;
  font-weight: 900;
  font-size: 40px;
}

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

<div class="normal">SAMPLE TEXT</div>
<div class="really-bold">SAMPLE TEXT</div>

Answer 2

您只能使用以下属性中的一个：

font-weight: normal
font-weight: bold

font-weight: lighter
font-weight: bolder

font-weight: 100
font-weight: 200
font-weight: 300
font-weight: 400
font-weight: 500
font-weight: 600
font-weight: 700
font-weight: 800
font-weight: 900

font-weight: inherit

Answer 3

不。

font-weight: 900

是最大值。您可以使用其他字体。

Answer 4

设置

font-weight

意味着要求给定权重的 typeface。预计不会使浏览器人为地使用粗体字符，尽管当粗体字体不可用时，font-weight: bold可能会发生这种情况。 所以使用比粗体更粗的方法就是找到一种适合字体的字体并使用它。这实际上意味着您需要使用可下载的字体（网络字体，

@font-face

），因为人们计算机中常见的字体没有此类字体。

特别是对于 Arial，有 Arial Black，但许多浏览器将其视为单独的字体系列，而不是 Arial 系列的重型字体。因此，获得它的最佳机会是声明

font-family: Arial Black; font-weight: normal

。

将

text-shadow

与文本颜色或其他技巧一起使用永远不会使字体变得更粗；它只会造成一种大胆的错觉，而且在排版上也是禁忌。