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

时间:2012-11-21 19:40:21

标签: fonts bold monospace

我有一个网站,其中我使用等宽字体。但是不同浏览器在角色宽度方面存在重大差异。 字体宽度必须保持完全相同。

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

我试图在Type Light 3.2中创建我自己的新派生字体,但这很难,尤其是弯曲字符很难改变。

我试图用一个绝对div加倍文本并设置2px变化的余量,这非常好,但是这样做的缺点是你需要很多div,这使得IE7和IE8非常慢使用大文本时。

是否有另一种方法(首选自动)从ttf / eot / woff / svg字体派生粗体字体?我知道Java可以创建粗体字体,但是我能将它保存到新的字体文件中吗?任何方式都可以为我做。

1 个答案:

答案 0 :(得分:2)

您可以使用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>