Nicht-Monospace-Schrift in feste Breite mit CSS erzwingen

Question

Gibt es eine Möglichkeit, eine Schriftart mit CSS über CSS-Abstand zu erzwingen?

Damit meine ich, mit einer Nicht-Monospace-Schriftart, können Sie den Browser zwingen, jedes Zeichen mit einer festen Breite zu rendern?

Answer 1

Nein, es sei denn, es handelt sich um eine mono-getrennte Schrift.

Answer 2

Nein, es gibt keine Möglichkeit, irgendetwas in CSS zu erzwingen. Und es gibt nicht einmal eine Möglichkeit, eine Nicht-Monospace-Schriftart als Monospace-Schriftart darzustellen.

Answer 3

Sie können dies nicht mit CSS tun. Auch wenn Sie könnten, wird das Ergebnis schrecklich aussehen:

Wenn Sie das wirklich tun müssen, um zu tun, Sie JavaScript verwenden könnte jedes einzelne Zeichen in einem Element zu wickeln (oder tun Sie es einfach mit der Hand):

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>

Answer 4

Warum denken nicht über den Tellerrand hinaus und in einer Tabelle für diese:

<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> 

Answer 5

ich für Countdowns manchmal ein verry hübsches Ding gemacht haben:

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> 

SCSS:

$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;} 
} 

Answer 6

Nun, Sie verwenden nicht sagen nur CSS. Es ist möglich, dies mit nur ein wenig Javascript zu tun, um jeden Buchstaben in eine span zu wickeln. Der Rest ist in 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>

In einem Absatz mit normalen Text, es sieht schrecklich aus, aber es gibt Fälle, in denen dies sinnvoll ist. Symbolschriftarten und Unicode-Symbole könnten beide diese Technik verwenden.

Ich fand diese Frage beim Versuch, eine Lösung für Unicode-Symbole zu finden, die regulären Text nach rechts verschoben, wenn sie durch andere Unicode-Symbole ersetzt wurden.

Answer 7

Wenn dies zum Ausrichten Stellen in Tabellen, in denen einige Schriftarten (mit traditioneller Typografie), um sie mit variabler Breite standardmäßig machen (zB Segoe UI unter Windows), sollten Sie schauen in CSS-Eigenschaften für:

font-variant-numeric: tabular-nums;

(dies deaktiviert den proportional-nums Standardwert für die numerische Abstandsvariante)

Kein Javascript erforderlich!Es ist der sauberste Weg, die Glyphen mit variabler Breite in diesen Fonts zu deaktivieren und sie zur Verwendung von Tabellenziffern zu zwingen (dies wird im Allgemeinen in den gleichen Glyphen in der gleichen Schriftart verwendet, aber ihre führende und nachgestellte Lücke wird so vergrößert, dass die 10 Ziffern von 0 bis 9 wird auf der gleichen Breite rendern, aber einige Schriftart kann die visuelle Variable Interdigit Abstand vermeiden und einige Ziffern leicht abweichen, oder könnte untere Serifs auf den Fuß der Ziffer 1 hinzufügen.

Beachten Sie, dass dies deaktiviert nicht die variable Höhe mit Segoe UI beobachtet (wie einige Stellen werden x-Höhe wie Kleinbuchstaben nur sein, andere Oberlängen oder Unterlängen haben). können Sie die traditionellen einstelligen Formen mit CSS auch deaktiviert werden, indem

font-variant-numeric: lining-nums;

Sie beide (dies den Standard „Oldstyle-nums“ Wert für numerische stelligen Variante deaktiviert) kombinieren können:

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