Wymuszanie czcionki o stałej szerokości w stałej szerokości przy użyciu CSS

Question

Czy istnieje sposób na wymuszenie za pomocą CSS czcionki o stałej szerokości?

Mam na myśli to, że używając czcionki o stałej czcionce, możesz zmusić przeglądarkę do renderowania każdego znaku o stałej szerokości?

Answer 1

Nie, chyba że jest to faktyczna czcionka jednoprzestrzenna.

Answer 2

Nie, nie ma sposobu na wymuszenie czegokolwiek w CSS. I nie ma nawet sposobu, aby zasugerować, że czcionka o stałej szerokości jest renderowana jako czcionka o stałej szerokości.

Answer 3

Nie można tego zrobić z CSS. Nawet jeśli można, to wynik będzie wyglądać straszne:

Jeśli naprawdę trzeba to zrobić, można użyć JavaScript zawinąć każdy indywidualny charakter w elemencie (lub po prostu zrobić to ręcznie):

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

Dlaczego nie myśleć nieszablonowo i wewnątrz tabeli poniżej:

<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

Zrobiłem verry ładna rzecz czasami odliczanie:

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

Cóż, nie mówią używając tylko CSS. Można to zrobić za pomocą niewielkiej ilości Javascriptu, aby zawinąć każdą literę w span. Reszta jest w 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>

W ustępie z zwykłego tekstu, to wygląda okropnie, ale Istnieją przypadki, kiedy to ma sens. Czcionki ikon i symbole Unicode mogą korzystać z tej techniki.

Znalazłem to pytanie, próbując znaleźć rozwiązanie dla symboli Unicode, które przesuwały zwykły tekst w prawo, gdy zostały zastąpione innymi symbolami Unicode.

Answer 7

Jeśli jest to dla cyfr wyrównaniu na stołach gdzie niektóre czcionki (z tradycyjnej typografii) czynią je domyślnie o zmiennej szerokości (np Segoe UI w Windows), należy spojrzeć na właściwości CSS:

font-variant-numeric: tabular-nums;

(to wyłącza domyślną wartość proportional-nums dla wariantu z odstępami numerycznymi)

Nie wymaga się javascriptu!Jest to najczystszy sposób na wyłączenie glifów o zmiennej szerokości w tych czcionkach i zmuszenie ich do używania cyfr tabelarycznych (zazwyczaj używa się w tych samych glifach w tej samej czcionce, ale ich początkowa i końcowa luka jest zwiększona, więc 10 cyfr od 0 do 9 będzie renderować na tej samej szerokości, jednak niektóre czcionki mogą unikać odstępu interdigit ze zmiennymi wizualnymi i nieznacznie poszerzają niektóre cyfry lub mogą dodawać szeryfki dolne do stopy cyfry 1.

Należy zauważyć, że to nie wyłącza zmiennej wysokości obserwowano Segoe UI (takich jak niektóre cyfry będzie wysokość x jak tylko małymi literami, inni będą musieli wznoszącym lub zjazdowe). te tradycyjne formy cyfrowe mogą być wyłączone z CSS zbyt korzystając

font-variant-numeric: lining-nums;

(ta wyłącza domyślne "Oldstyle-Nums" value for wariancie numeryczny-cyfrowego)

Można połączyć oba:

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