Come convertire una dimensione del carattere CSS
Inserisci la dimensione numerica nota, scegli px, em, pt o % e imposta il riferimento in pixel. Scegli poi Converti dimensione del carattere. Il risultato mostra la stessa dimensione calcolata in tutte e quattro le unità supportate. Ogni riga ha un pulsante di copia per incollare valori come 1.5em o 18pt direttamente in un foglio di stile.
Il riferimento conta per conversioni em e percentuali. È la dimensione in pixel che questa pagina considera 1em e 100%. Se un genitore ha font-size: 20px, usa 20 come riferimento per convertire il font-size di un figlio espresso in em o %. Se il progetto usa un'altra dimensione del genitore, cambia il riferimento e riconverti. La relazione px-pt non cambia con il riferimento.
Cosa calcola il convertitore
Ogni valore viene prima risolto in pixel. Un dato px è già risolto. Un dato em viene moltiplicato per il riferimento. Una percentuale viene moltiplicata per il riferimento e divisa per 100. I punti usano la relazione delle unità assolute CSS: 1in equivale a 96px e 72pt, quindi 1pt equivale a 96 ÷ 72px. Il valore in pixel viene poi espresso in ogni unità di destinazione.
Le formule sono px = em × riferimento, px = % × riferimento ÷ 100 e px = pt × 96 ÷ 72. Le inverse dividono per gli stessi fattori. I calcoli mantengono la precisione interna, mentre valori visualizzati e copiati usano una forma arrotondata pratica, senza residui di virgola mobile come 0.30000000000000004. Valori non nulli molto piccoli restano visibili anziché diventare zero.
Due esempi di conversione verificati
Esempio 1: inserisci 24, scegli px e lascia il riferimento a 16px. I risultati sono 24px, 1.5em, 18pt e 150%. Gli em derivano da 24 ÷ 16, i punti da 24 × 72 ÷ 96 e la percentuale da 24 ÷ 16 × 100. Convertire 1.5em con lo stesso riferimento di 16px restituisce 24px.
Esempio 2: inserisci 125, scegli % e imposta il riferimento a 20px. Il risultato è 25px, 1.25em, 18.75pt e 125%. Cambia solo il riferimento a 16px e riconverti: lo stesso 125% diventa 20px, 1.25em e 15pt. Questo mostra perché un valore relativo non può essere convertito accuratamente senza dichiararne il contesto di font-size.
Quando è utile lo strumento
Usa il convertitore per trasformare misure di un progetto in pixel in CSS relativo, controllare un valore tipografico rispetto al carattere del genitore o convertire punti da stampa per uno stile web. È utile anche per esaminare CSS ereditato: inserisci la dimensione calcolata del genitore per vedere a cosa corrispondono em o percentuali.
Lo strumento mantiene volutamente visibile il contesto anziché presumere che ogni progetto usi 16px. Sedici pixel sono un punto di partenza comune nei browser, ma autori e utenti possono cambiare i caratteri. Registra il riferimento insieme al valore convertito se un altro sviluppatore deve riprodurre il calcolo.
Limiti ed errori comuni
È un convertitore di font-size, non un parser CSS generale. Non legge calc(), clamp(), variabili, fogli di stile, rem, unità della viewport, unità del contenitore o stili DOM ereditati. Per em, il riferimento dipende da come lo definisce la proprietà CSS; questa pagina usa il riferimento esplicito in pixel fornito da te. Non analizza il genitore effettivo.
Anche le percentuali dipendono dalla proprietà. La pagina interpreta % solo come percentuale di font-size, dove 100% equivale al riferimento dichiarato. Non usare il risultato percentuale per larghezza, altezza, trasformazioni o proprietà con un diverso blocco contenitore. Dimensioni negative e riferimento zero vengono rifiutati perché qui non rappresentano una conversione valida.
La conversione dei punti segue le unità CSS, non le dimensioni del testo in pixel in un editor di immagini o i pixel del dispositivo di stampa. L'altezza visibile di un glifo dipende anche da metriche del carattere, line-height e rendering. Valori font-size calcolati uguali non promettono quindi lettere dall'aspetto identico tra caratteri diversi.
Usare il risultato copiato
Copia l'unità adatta alla strategia del foglio di stile, poi provala nel componente reale e con testo ingrandito nel browser. Le unità relative possono supportare una tipografia scalabile, ma la sola conversione non garantisce contrasto accessibile, lunghezza delle righe, ritorni a capo o comportamento dello zoom. Conserva il valore originale o il token di progetto per controllare un valore CSS arrotondato.
Tutti i calcoli avvengono in questo browser. Non serve un account e i valori inseriti non vengono inviati come parametri di analisi. Gli appunti bloccati non fanno perdere il risultato: seleziona il valore visibile e copialo con il comando del browser o della tastiera.
Tutte le direzioni di conversione delle unità dei caratteri CSS supportate
| Direzione della conversione | Formula con riferimento di 16px | Esempio |
|---|---|---|
| Pixel a Em (px a em) | em = px × 0.0625 | 1px = 0.0625em |
| Pixel a Punti (px a pt) | pt = px × 0.75 | 1px = 0.75pt |
| Pixel a Percentuale (px a %) | % = px × 6.25 | 1px = 6.25% |
| Em a Pixel (em a px) | px = em × 16 | 1em = 16px |
| Em a Punti (em a pt) | pt = em × 12 | 1em = 12pt |
| Em a Percentuale (em a %) | % = em × 100 | 1em = 100% |
| Punti a Pixel (pt a px) | px ≈ pt × 1.333333333 | 1pt ≈ 1.333333333px |
| Punti a Em (pt a em) | em ≈ pt × 0.08333333333 | 1pt ≈ 0.08333333333em |
| Punti a Percentuale (pt a %) | % ≈ pt × 8.333333333 | 1pt ≈ 8.333333333% |
| Percentuale a Pixel (% a px) | px = % × 0.16 | 1% = 0.16px |
| Percentuale a Em (% a em) | em = % × 0.01 | 1% = 0.01em |
| Percentuale a Punti (% a pt) | pt ≈ % × 0.12 | 1% ≈ 0.12pt |
Domande sul convertitore di unità dei caratteri CSS
16px equivale sempre a 1em?
Solo quando il riferimento pertinente è 16px. Se è 20px, 1em corrisponde a 20px. Inserisci il riferimento effettivo dell'elemento su cui lavori.
Perché il riferimento influisce su em e % ma non su pt?
Em e percentuali di font-size sono relativi a un contesto tipografico. Px e pt CSS usano un rapporto assoluto fisso, quindi restano 96px = 72pt indipendentemente dal campo di riferimento.
Posso usare il risultato % per la larghezza?
No. Il convertitore definisce % come percentuale di font-size. Le percentuali di larghezza si riferiscono a un blocco contenitore e richiedono riferimento e contesto d'impaginazione diversi.
Perché il valore copiato può essere arrotondato?
L'interfaccia segue la regola pratica di visualizzazione del sito e rimuove decimali superflui. Il convertitore calcola dal valore non arrotondato; prova il valore copiato nel componente di destinazione se è essenziale una scala tipografica particolarmente fine.
Converte anche rem?
No. La pagina è volutamente limitata a px, em, pt e % di font-size. Un valore rem usa la dimensione calcolata dell'elemento radice, mentre em può usare un altro contesto.