我有一个网站,其中我使用等宽字体。但是不同浏览器在角色宽度方面存在重大差异。 字体宽度必须保持完全相同。
我尝试过:font-weight: bold;
但这取决于浏览器,我无法使用负letter-space
值来弥补额外的宽度。
我试图在Type Light 3.2中创建我自己的新派生字体,但这很难,尤其是弯曲字符很难改变。
我试图用一个绝对div加倍文本并设置2px变化的余量,这非常好,但是这样做的缺点是你需要很多div,这使得IE7和IE8非常慢使用大文本时。
是否有另一种方法(首选自动)从ttf / eot / woff / svg字体派生粗体字体?我知道Java可以创建粗体字体,但是我能将它保存到新的字体文件中吗?任何方式都可以为我做。
答案 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>