Создать версию Bold из существующего моноширинного шрифта, сохраняя при этом ширину

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, но там вы можете использовать светящийся фильтр:

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>