从现有的等宽字体创建粗体版本，同时保持宽度

Question

我有一个使用等宽字体的网站。但不同浏览器在字符宽度方面存在重大差异。 字体宽度必须完全相同。

我尝试过：font-weight: bold;，但这取决于浏览器，我无法使用负的 letter-space 值来弥补额外的宽度。

我尝试在 Type Light 3.2 中创建自己的新派生字体，但这非常困难，尤其是弯曲字符很难更改。

我尝试将文本加倍，并在其后添加一个绝对 div，并设置 2px 的边距变化，效果非常好，但这样做的缺点是您需要大量 div，这使得 IE7 和 IE8 非常慢使用大文本时。

是否有另一种方法（自动首选）从 ttf/eot/woff/svg 字体派生粗体字体？例如，我知道 Java 可以创建粗体字体，但我可以将其保存到新的字体文件中吗？任何方式都对我有用。

Answer 1

您可以使用 CSS3 text-shadow 技巧：

text-shadow: -.5px 0,  0 .5px,  .5px 0,  0 -.5px;

当然，这在旧 IE 上不起作用，但你可以使用 glow filter：

filter: glow(color:black,strength=1);

另外请注意，在我测试的所有浏览器上，当使用内置 font-family: monospace 时，粗体字重不会改变字符的宽度。所以它可能不需要否定的letter-spacing。

font-weight: bold;

div {
  font-family: monospace;
}
.ie-trick-bold {
  filter: glow(color:black,strength=1);
}
.css3-trick-bold {
  text-shadow: -.5px 0,  0 .5px,  .5px 0,  0 -.5px;
}
.normal-bold {
  font-weight: bold;   
}

<div class="css3-trick-bold">Hello World! (CSS3 trick)</div>
<div class="ie-trick-bold">Hello World! (IE trick)</div>
<div class="normal-bold">Hello World! (default bold)</div>
<div>Hello World! (normal text)</div>