1

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

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

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

我试图用绝对 div 将文本加倍，并设置 2px 变化的边距，效果很好，但这样做的缺点是你需要很多 div，这使得 IE7 和 IE8 在使用大时非常慢文本。

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

4

1 回答 1

2

你可以使用 CSS3text-shadow技巧：

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

当然，这在旧 IE 上不起作用，但你可以使用发光滤镜：

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>

于 2013-01-01T20:25:34.670 回答