C’è un modo per fare in modo che un carattere a larghezza variabile si comporti come un font a larghezza fissa in HTML?

C’è un modo per fare in modo che un carattere a larghezza variabile si comporti come un font a larghezza fissa in HTML?

Ad esempio, se ho la frase “La volpe grigia veloce è saltata sul cane pigro” mostrata in “Courier New”, un font a larghezza fissa, sarebbe più ampia in generale che se fosse in un font a larghezza variabile come “Arial “. Mi piacerebbe usare “Arial” invece di “Courier New” ma avere i caratteri a larghezza fissa.

Esempio di larghezza variabile:
La rapida volpe grigia saltò sul cane pigro.

Esempio di larghezza fissa:

  La rapida volpe grigia saltò sul cane pigro 

Notare quanto i caratteri siano vicini l’uno all’altro nella parola “veloce” e “grigio” in ciascun esempio.

Non solo con i CSS. Ti consigliamo di utilizzare il popolare Lettering.js (avrai bisogno di jQuery per questo) per generare tag span attorno a ciascun personaggio, quindi impostare una larghezza su tutti i personaggi.

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

Test Case

L’unica cosa che posso pensare è mettere ogni lettera in un elemento HTML, e dare uno stile a quell’elemento sulla falsariga di:

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

Non ho familiarità con Flex, ma se dovessi implementare questo approccio, metterei insieme alcuni Javascript che genererebbero tutti gli elementi per me.

Il risultato dovrebbe essere schifoso in quanto i font proporzionali non sono fatti per quello.

Ciò nonostante, puoi ottenerlo con una span individuale attorno ai caratteri: 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; } 

Ho aggiunto indizi visivi (outline) per vedere cosa sta succedendo e ho usato la min-width solo nel caso, non nella width .
Questo metodo causerà un enorme problema di accessibilità con i lettori di schermo, per le persone cieche e ipovedenti che utilizzano queste tecnologie assistive. Le lettere che span nella singola span saranno scritte / lette
o
n
e

B
y

o
n
e

w
h
io
l
e

un

n
o
r
m
un
l

p
un
r
un
g
r
un
p
h

w
o
u
l
d

B
e

r
e
un
d

un
S

un

S
e
n
t
e
n
c
e
,

un
S

u
S
u
un
l
.

P
r
e
t
t
y

un
n
n
o
y
io
n
g

e
h
?

gioco di parole

È una vecchia domanda, ma suggerirei di cercare un font a larghezza fissa adatto che possa essere usato come un webfont con le funzionalità desiderate. Ad esempio, sono un grande fan di Inconsolata.

Vorrei iniziare con Google Fonts e deselezionare tutte le categorie lasciando solo Monospace.

Potresti essere in grado di utilizzare la proprietà CSS di spaziatura delle lettere per ottenere ciò che desideri. Per definizione, i font monospace hanno la stessa ampiezza di caratteri a differenza di serif o sans-serif. Usando la spaziatura delle lettere è la tua migliore scommessa Riferimento W3C