Come rendere la dimensione del font indipendente dalla risoluzione dello schermo e dalle dimensioni del monitor?

Question

Sto lavorando su un'applicazione in cui voglio rendere la dimensione del font che è indipendente dalla risoluzione dello schermo e dalle dimensioni dello schermo. La dimensione del carattere deve essere uguale in tutte le risoluzioni e tutte le dimensioni dello schermo. Come si fa con javascript e css?

Penso che Pixel per punto sia correlato all'hardware quindi non sono sicuro che javascript e css possano accedervi.

Ho provato molte alternative ma non ho trovato la soluzione esatta.

Answer 1

Non c'è buona soluzione, universale. Secondo me, dovresti solo considerare che non è possibile. This article è stato pubblicato di recente e suggerisce una soluzione (a lungo termine) a tale problema. È a lungo termine perché dipende da più giocatori (produttori di hardware e software).

Per citare l'autore:

E 'ridicolo che siamo in grado di inviare i robot su Marte eppure è ancora praticamente impossibile rendere un glifo su una pagina web e dire con fiducia: “Se si misura il glifo sul tuo schermo con un righello, sarà largo esattamente 10 millimetri. "

Answer 2

Old fashioned points dovrebbe funzionare.

Esempio:

<style> 
p 
{ 
    font:15pt; 
} 
</style> 

Answer 3

html {font-size: 14px /* in example */} 

ciò ogni elemento di pari livello di html invia una dimensione relativa, il che significa

body { font-size: 100% } /* is 14px now */ 

così

div { font-size: 1em } /* should be 14px also */ 

sua possibile cambia la dimensione del font in html con javscript e a Le dimensioni relative dovrebbero funzionare come previsto. con jQuery è possibile accedere alle dimensioni del carattere del corpo e impostarlo su alcune dimensioni calcolate dalla schermata. anche lavorando sarebbe @media() { your css here } regole per qualsiasi tipo di applicazione in diversi dispositivi.

var fontsize=14+'px'; 
jQuery('body').css('font-size',fontsize); 

Answer 4

Non si può fare questo perché non si può essere sicuro di quello che la vera dimensione del monitor utenti è, a meno che non si ha il controllo dei computer in uso.

È possibile che un utente abbia 2 monitor collegati contemporaneamente e sia impostato in modo che gli stessi elementi dello schermo appaiano su diverse dimensioni su ciascuno di essi.

Answer 5

È possibile utilizzare i punti (pt), che sono basati su 1/72 di pollice. Questa è un'unità che tradizionalmente viene dalla stampa. Ora, dipende dal fatto che il dispositivo sia configurato correttamente, indipendentemente dal fatto che questa dimensione sia la stessa da monitor a monitor. Spesso non lo è, ma alcuni dispositivi sono consapevoli delle dimensioni fisiche dello schermo. È anche possibile utilizzare i pollici in, i centimetri cm e i millimetri mm.

Utilizzare questa dimensione, in combinazione con ems, che sono dimensioni relative. In questo modo, l'intero sito può salire e scendere se necessario.

body { 
    font-size: 12pt; 
} 
h1 { 
    font-size: 2em; 
} 
p { 
    font-size: 1.1em; 
} 

Answer 6

Si potrebbe utilizzare cm e mm:

<span style="font-size: 2cm;">i am big</span> 
<span style="font-size: 2mm;">i am tiny</span> 

Answer 7

Come altri hanno affermato, non è possibile rendere la dimensione del carattere completamente indipendente dalla risoluzione dello schermo. Quello che puoi fare è utilizzare le query multimediali per scegliere come target diverse dimensioni dello schermo e ridimensionare il tuo carattere di conseguenza.

body { font-size: 16px; } 
@media screen and (min-width: 600px) { 
    body { font-size: 112.5%; } 
} 
@media screen and (min-width: 800px) { 
    body { font-size: 125%; } 
} 
@media screen and (min-width: 1000px) { 
    body { font-size: 137.5%; } 
} 
@media screen and (min-width: 1200px) { 
    body { font-size: 150%; } 
} 

Questi sono solo valori di esempio: dovrai sperimentare la tua app in vari formati e vedere quale è l'aspetto migliore. Trent Walton's sito è un buon esempio di questo - ridimensionare la finestra del browser e vedere cosa succede alle dimensioni del testo.

Se si dimensionano tutti i font utilizzando le unità em o rem, è sufficiente regolare la dimensione del carattere del corpo e il resto dei valori verrà ridimensionato proporzionalmente.