Силовой немонопольный шрифт в фиксированную ширину с использованием CSS

Ответ 1

Вы не можете сделать это с помощью CSS. Даже если бы вы могли, результат выглядел бы ужасно:

Если вам действительно нужно это сделать, вы можете использовать JavaScript для обертывания каждого отдельного символа в элементе (или просто сделать это вручную):

function wrap_letters($element) {
    for (var i = 0; i < $element.childNodes.length; i++) {
        var $child = $element.childNodes[i];

        if ($child.nodeType === Node.TEXT_NODE) {
            var $wrapper = document.createDocumentFragment();

            for (var i = 0; i < $child.nodeValue.length; i++) {
                var $char = document.createElement('span');
                $char.className = 'char';
                $char.textContent = $child.nodeValue.charAt(i);

                $wrapper.appendChild($char);
            }

            $element.replaceChild($wrapper, $child);
        } else if ($child.nodeType === Node.ELEMENT_NODE) {
            wrap_letters($child);
        }
    }
}

wrap_letters(document.querySelectorAll('.boxes')[0]);
wrap_letters(document.querySelectorAll('.boxes')[1]);

.char {
    outline: 1px solid rgba(255, 0, 0, 0.5);
}

.monospace .char {
    display: inline-block;
    width: 15px;
    text-align: center;
}

<h2 class="boxes">This is a title</h2>
<h2 class="boxes monospace">This is a title</h2>

Ответ 2

Почему бы не подумать за пределами коробки и внутри таблицы для этого:

<table cellpadding="0" cellspacing="0">
<tr><td>T</td><td>h</td><td>e</td><td></td><td>r</td><td>a</td><td>i</td><td>n</td><td></td><td>i</td><td>n</td><td></td><td>S</td><td>p</td><td>a</td><td>i</td><td>n</td><td></td><td>s</td><td>t</td><td>a</td><td>y</td><td>s</td></tr>
<tr><td>m</td><td>a</td><td>i</td><td>n</td><td>l</td><td>y</td><td></td><td>i</td><td>n</td><td></td><td>t</td><td>h</td><td>e</td><td></td><td>p</td><td>l</td><td>a</td><td>i</td><td>n</td><td>s</td><td>.</td></tr>
</table>

Ответ 3

Нет, нет никакого способа заставить что-либо в CSS. И даже не существует способа предположить, что шрифт немоношины будет отображаться как моноширинный шрифт.

Ответ 4

Ну, вы не сказали, используя только CSS. Это можно сделать с помощью всего лишь немного Javascript, чтобы обернуть каждую букву в span. Остальное в CSS...

window.onload = function() {
  const secondP = document.getElementById('fixed');
  const text = secondP.innerText;
  const newText = text.split('').map(c => {
    const span = `<span>${c}</span>`;
    return span;
  }).join('');
  secondP.innerHTML = newText;
}

p {
  position: relative;
  border: 1px solid black;
  border-radius: 1em;
  padding: 1em;
  margin: 3em 1em;
}

p::after {
  content: attr(name);
  display: block;
  background-color: white;
  color: green;
  padding: 0 0.5em;
  position: absolute;
  top: -0.6em;
  left: 0.5em;
}

#fixed span {
  display: inline-block;
  width: 1em;
  text-align: center;
}

<p id="variable" name="Variable Width">It might not look nice, but with a little Javascript, I can force a variable width font to act like a fixed-width font.</p>
<p id="fixed" name="Fixed Width">It might not look nice, but with a little Javascript, I can force a variable width font to act like a fixed-width font.</p>

Ответ 5

Я иногда делал верную вещь для обратного отсчета:

HTML:

<div class="counter">
    <span class="counter-digit counter-digit-0">2</span>
    <span class="counter-digit counter-digit-1">4</span>
    <span class="counter-digit counter-digit-divider">/</span>
    <span class="counter-digit counter-digit-2">5</span>
    <span class="counter-digit counter-digit-3">7</span>
</div>

СКС:

$digit-width: 18px;
.counter {

    text-align: center;
    font-size: $digit-width;

    position: relative;

    width : $digit-width * 4.5;
    margin: 0 auto;
    height: 48px;
}
.counter-digit {

    position: absolute;
    top: 0;
    width: $digit-width;
    height: 48px;
    line-height: 48px;
    padding: 0 1px;

    &:nth-child(1) { left: 0; text-align: right; }
    &:nth-child(2) { left: $digit-width * 1; text-align: left;}
    &:nth-child(3) { left: $digit-width * 2; text-align: center; width: $digit-width / 2} // the divider (/)
    &:nth-child(4) { left: $digit-width * 2.5; text-align: right;}
    &:nth-child(5) { left: $digit-width * 3.5; text-align: left;}
}

Ответ 6

Если это для выравнивания цифр в таблицах, где некоторые шрифты (с традиционной типографикой) отображают их по умолчанию с переменной шириной (например, Segoe UI в Windows), вы должны изучить свойства CSS для:

font-variant-numeric: tabular-nums;

(это отключает значение proportional-nums по умолчанию для варианта с числовым интервалом)

Нет необходимости в javascript! Это самый чистый способ отключить глифы переменной ширины в этих шрифтах и ​​заставить их использовать табличные цифры (это обычно используется в одних и тех же глифах одного шрифта, но их главный и задний зазор увеличивается, поэтому 10 цифр от 0 до 9 будет отображаться с одинаковой шириной, однако какой-то шрифт может избежать интервала между визуальными переменными и немного помассировать некоторые цифры или добавить нижние засечки к ноге цифры 1.

Обратите внимание, что это не отключает высоту переменной, наблюдаемую с помощью пользовательского интерфейса Segoe (например, некоторые цифры будут иметь высоту x только как строчные буквы, другие будут иметь восходящие линии или ограничители). Эти традиционные формы цифр также могут быть отключены с помощью CSS, используя

font-variant-numeric: lining-nums;

(это отключает значение по умолчанию "oldstyle-nums" для варианта с числовым рисунком)

Вы можете комбинировать оба:

font-variant-numeric: tabular-nums lining-nums;

Ответ 7

Нет, если это не фактический шрифт с монослоем.