2014-09-17 20 views
6

come faccio a convertire l'attributo dimensione del tag font:Converti tag font (attributo size) per css

<font size="3">Example</font> 

a CSS? per esempio

.example{ 
font-size: ?px; 
} 

In altre parole, il numero di pixel non la dimensione attributo riferisce?

risposta

7

Questa non è una domanda facile, e la vera risposta è DIPENDE.

Vedere, le dimensioni HTML non sono una dimensione reale, ma una dimensione in qualche modo casuale. L'attributo SIZE ti consente di impostare il carattere su una dimensione astratta compresa tra 1 e 7.La dimensione esatta del tipo corrispondente a ciascuno di questi valori è lasciata al tuo browser. Non puoi essere sicuro, ad esempio, che SIZE = 4 ti darà un carattere tipografico di 12 punti; sai solo che SIZE = 4 sarà più grande di SIZE = 3.

Quindi, quello che vedi a 12px in un browser sarà 13px o 14 px in un altro browser. C'è una molto interesting test made by SO user Eugene Yokota dove si può vedere il rendering dei font approssimativa tradotti per em:

<font size=1>- font size 1</font><br> 
<span style="font-size:0.63em">- font size: 0.63em</span><br> 

<font size=2>- font size 2</font><br> 
<span style="font-size: 0.82em">- font size: 0.82em</span><br> 

<font size=3>- font size 3</font><br> 
<span style="font-size: 1.0em">- font size: 1.0em</span><br> 

<font size=4>- font size 4</font><br> 
<span style="font-size: 1.13em">- font size: 1.13em</span><br> 

<font size=5>- font size 5</font><br> 
<span style="font-size: 1.5em">- font size: 1.5em</span><br> 

<font size=6>- font size 6</font><br> 
<span style="font-size: 2em">- font size: 2em</span><br> 

<font size=7>- font size 7</font><br> 
<span style="font-size: 3em">- font size: 3em</span><br> 

ma questo è ancora in qualche modo soggettivo e, naturalmente, non risponde alla (pixel) domanda fissa. Tuttavia, è possibile utilizzare la tabella qui sopra per tradurre in pixel come guida:

Font=1: 10px 
Font=2: 13px 
Font=3: 16px 
Font=4: 18px 
Font=5: 24px 
Font=6: 32px 
Font=7: 48px 

Ora, il fatto è che una volta che hai i tuoi pixel, in linea, davvero non c'è bisogno di preoccuparsi, così finché si definisce qualcosa come "font-size:12px" tutti i browser sarà (dovrebbe) il rendering di un tipo di carattere con altezza 12px

Se siete interessati a differenze tra Dimensione carattere resa tag tra i browser, yu può dare un'occhiata a questo link with may examples

+1

Risposta molto migliore della mia! ;) +1 –

+0

ah, non ho visto il tuo fino a quando non l'hai menzionato e stavo per svenderlo e non potevo perché era già cancellato. E 'stato bello, peccato che tu l'abbia cancellato perché per quello che ho visto aveva alcune informazioni aggiuntive su un problema che sembra piuttosto superficiale, ma che non ha ancora una risposta definitiva – Devin

-1

HTML

<p class="example">Paragraph Text</p> 

CSS

p.example{ 
    font-size: 12px; 
} 

Detto questo, si dovrebbe leggere in più scalabile CSS in modo che non prendono di mira un singolo paragrafo.

+0

Perché ti pensa che il "3" come valore dell'attributo 'size' del tag' font' (obsoleto) sia necessariamente uguale a '12px', che è cosa stava chiedendo l'OP? –

+0

Fornisce semplicemente un esempio da cui l'OP potrebbe funzionare. –

0

"3" è "predefinito", quindi l'equivalente più vicino sarebbe quello di omettere qualsiasi specifica font-size o utilizzare font-size: 1 rem.

Un'ipotesi ragionevole è che '2' corrisponde a 'minore', '4' a 'maggiore', ecc

0

non è possibile convertire <font> a font dimensioni in pixel, come la dimensione del carattere del carattere il tag varia tra la dimensione del carattere di base.
Può essere fatto in em, come pubblicato in questa domanda SO, How to convert <font size="10"> to px?.
Il grafico qui sotto è venuto dalla risposta di @ EugeneYokota lì:

- la dimensione del testo 1
- la dimensione del testo: 0.63em

- la dimensione del testo 2
- la dimensione del carattere: 0.82em

- dimensione 3
- dimensioni font: 1.0em

- dimensione del carattere 4
- grandezza del carattere: 1.13em

- dimensione carattere 5
- dimensione font: 1.5em

- dimensione carattere 6
- dimensione carattere: 2em

- font size 7
- dimensioni carattere: 3em

This font-size converter might be helpful I tag dei caratteri, le dimensioni dei caratteri sono relativi, nel senso che cambiano in base alla dimensione del carattere di base.
This article explains it in more detail