Larghezza pixel del carattere monospace

Mi chiedo, è possibile calcolare la larghezza in pixel di un carattere in un carattere monospace? Sto usando font monospace perché ho bisogno che ogni personaggio occupi la stessa larghezza nel mio DIV, ma non sono sicuro di come ottenere in modo affidabile la larghezza effettiva del pixel. Devo correggere la larghezza per fare calcoli in JavaScript. Ecco il mio css:Larghezza pixel del carattere monospace

font-family: monospace; 
font-size: 15px;

è possibile?

fonte

2013-03-22 TGH

Ricordare, solo perché si specifica un particolare tipo di carattere e dimensione, non significa che il mio browser lo utilizzerà. –

Hai provato a utilizzare un font monospace dai caratteri @include di Google? Penserei che questo comporterebbe la stessa dimensione di carattere per tutti i browser (di supporto). Dovresti comunque misurarlo da solo, comunque. – Leaf

Il modo migliore che posso pensare di fare questo, è creare uno span fuori dallo schermo (position: absolute; top: -100px;) con un singolo carattere al suo interno. Quindi puoi misurare la larghezza dello span per ottenere la larghezza di 1 carattere nel font monospaced. Assicurarsi che padding sia impostato su 0px sullo span, tuttavia, poiché questo è incluso nella larghezza.

EDIT: Se avete solo bisogno di un'approssimazione, l'unità ex è spesso utile. 1ex è l'altezza di una "x" minuscola. Questo è spesso approssimativamente uguale alla larghezza. Ma non è esatto.

fonte

2013-03-22 15:53:45 jaypeagi

Tecnicamente, la proprietà 'offsetWidth' è probabilmente lo scatto migliore per ottenere la larghezza dell'elemento. L'unità '1ex' non ha una relazione definita con la larghezza di avanzamento dei caratteri; ad es., per Courier New in formato 16px, la larghezza di avanzamento dei caratteri è 10px ma '1ex' è 7px. –

Non sono sicuro che sia possibile essere assolutamente sicuri della larghezza, o persino dell'altezza, di una lettera, monospaziale o meno, su tutte le piattaforme. il suffisso PX su font-size non rappresenta nemmeno i pixel effettivi sullo schermo (dai un'occhiata a here per maggiori informazioni).

Sospetto che l'unico modo sarebbe utilizzare un intervallo di larghezza fissa per ciascun carattere.

Per motivi di interesse, sono curioso di sapere perché avete bisogno di lettere a larghezza fissa. Puoi condividere un JS Fiddle?

fonte

2013-03-22 15:54:18 po228

Ho praticamente funzionante approssimando una larghezza, ma mi chiedevo se c'è un modo per farlo esattamente – TGH

Larghezza pixel del carattere monospace

risposta

Problemi correlati