attribute - title html

¿Hay alguna manera de hacer que una fuente de ancho variable actúe como una fuente de ancho fijo en HTML?

Question

Esta pregunta ya tiene una respuesta aquí:

• Forzar fuentes no monoespaciadas en ancho fijo con respuestas de CSS 8

¿Hay alguna manera de hacer que una fuente de ancho variable actúe como una fuente de ancho fijo en HTML?

Por ejemplo, si tengo la frase "El zorro gris rápido saltó sobre el perro perezoso" que se muestra en "Courier New", una fuente de ancho fijo, sería más ancho en general que si estuviera en una fuente de ancho variable como, "Arial ". Me gustaría usar "Arial" en lugar de "Courier New" pero tengo los caracteres de ancho fijo.

Ejemplo de ancho variable:
El rápido zorro gris saltó sobre el perezoso perro.

Ejemplo de ancho fijo:

The quick grey fox jumped over the lazy dog

Observe qué tan cerca están los caracteres entre sí en las palabras "rápido" y "gris" en cada ejemplo.

Answer 1

El resultado debe ser horrible ya que las fuentes proporcionales no están hechas para eso.

No obstante, puede lograr eso con un span individual de caracteres: http://jsfiddle.net/rvYES/

body {
  font: normal 100%/1.5 Arial;
}

span {
  outline: 1px dotted darkred;
}
span:nth-of-type(even) {
  outline-color: blue;
}

.w-fixed span {
  display: inline-block;
  min-width: 1em;
}

Agregué pistas visuales (esquema) para ver lo que está pasando y usé min-width solo por si acaso, no width .
Este método causará un gran problema de accesibilidad con los lectores de pantalla, para las personas ciegas y con discapacidad visual que utilizan estas tecnologías de asistencia. Se escribirán / leerán las letras que estén en el span individual.
o
norte
mi

segundo
y

o
norte
mi

w
h
yo
l
mi

una

norte
o
r
metro
una
l

pag
una
r
una
sol
r
una
pag
h

w
o
tu
l
re

segundo
mi

r
mi
una
re

una
s

una

s
mi
norte
t
mi
norte
do
mi
,

una
s

tu
s
tu
una
l
.

PAG
r
mi
t
t
y

una
norte
norte
o
y
yo
norte
sol

mi
h
?

juego de palabras

Answer 2

Es posible que pueda utilizar la propiedad CSS con espaciado de letras para obtener lo que desea. Por definición, las fuentes monoespaciadas tienen el mismo ancho de caracteres, a diferencia de serif o sans-serif. Usar el espaciado entre letras es su mejor apuesta Referencia de W3C

Answer 3

Es una pregunta antigua, pero sugeriría buscar una fuente de ancho fijo adecuada que se pueda usar como fuente de web que tenga las características que desea. Soy un gran fan de Inconsolata, por ejemplo.

Comenzaría con Google Fonts y deseleccionaría todas las categorías dejando solo Monospace.

Answer 4

Lo único en lo que puedo pensar es poner cada letra en un elemento HTML, y darle estilo a ese elemento en la siguiente línea:

width: 8px;         /* Whatever fixed width you want here */
display: block;     /* Force the width to be respected. See also: inline-block */
float: left;        /* So it won''t be 1-per-line. Not needed for inline-block */
text-align: center; /* So the character appears in the middle of the block */

No estoy familiarizado con Flex, pero si tuviera que implementar este enfoque, armaría un Javascript que generaría todos los elementos para mí.

Answer 5

No solo con CSS. Te recomendaría que uses el popular Lettering.js (necesitarás jQuery para ello) para generar etiquetas de span alrededor de cada carácter y luego establecer un ancho entre todos los caracteres.

.monospace > span {
  display: inline-block; /* Enable widths */
  width: 1em;            /* Set width across all characters */
  text-align: center;    /* Even out spacing */
}

Caso de prueba