Forzar fuente no monoespacial en ancho fijo mediante CSS

Question

¿Hay alguna manera de forzar una fuente para que se monoespacio con CSS?

Con esto quiero decir, utilizando una fuente no monoespacial, ¿puede forzar al navegador a representar cada carácter con un ancho fijo?

Answer 1

No, a menos que sea una fuente real de espaciado único.

Answer 2

No, no hay forma de forzar nada en CSS. Y ni siquiera hay una manera de sugerir que una fuente no monoespacial se represente como una fuente monoespaciada.

Answer 3

No se puede hacer esto con CSS. Incluso si se pudiera, el resultado será verse horrible:

Si realmente no necesita hacer esto, se podía usar JavaScript para envolver cada carácter individual en un elemento (o simplemente hacerlo a mano):

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

por qué no pensar fuera de la caja y dentro de una tabla para esto:

<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

que he hecho una cosa bastante mucho encanto, a veces durante la cuenta atrás:

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

Bueno, usted no dijo usando solamente CSS. Es posible hacer esto con solo un poco de Javascript para envolver cada letra en un span. El resto está en 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>

En un párrafo con el texto normal, se ve terrible, pero hay casos en los que esto tiene sentido. Las fuentes de iconos y los símbolos Unicode podrían usar esta técnica.

Encontré esta pregunta al intentar encontrar una solución para los símbolos Unicode que estaban desplazando el texto normal a la derecha cuando fueron reemplazados por otros símbolos Unicode.

Answer 7

Si esto es para los dígitos de alineación en mesas donde algunas fuentes (con la tipografía tradicional) las hacen por defecto con ancho variable (por ejemplo Segoe UI en Windows), usted debe buscar en las propiedades CSS para:

font-variant-numeric: tabular-nums;

(esto desactiva el valor proportional-nums predeterminado para la variante numérica espacio)

No se necesita Javascript!Es la forma más limpia de deshabilitar los glifos de ancho variable en estas fuentes y obligarlos a usar dígitos tabulares (esto generalmente usa los mismos glifos en la misma fuente, pero su brecha inicial y final aumenta, así que los 10 dígitos de 0 a 9 se renderizará con el mismo ancho, sin embargo, algunos tipos de letra pueden evitar el espaciado interdigital de la variable visual y ligeramente algunos dígitos, o pueden agregar signos inferiores al pie del dígito 1.

Tenga en cuenta que esto no desactiva la altura variable observado con Segoe interfaz de usuario (como algunos dígitos será altura x solamente como letras minúsculas, otros tendrán ascendentes o los descendentes). Estas formas tradicionales de dígitos puede ser desactivada con CSS también, usando

font-variant-numeric: lining-nums;

(Esto desactiva el valor de numérico-figura variante por defecto "de estilo antiguo-nums")

Se pueden combinar los dos:

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