2014-09-17 11 views
6

Wie würde ich die Größe Attribut des font-Tag umwandeln:Convert font-Tag (Größe Attribut) zu css

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

zu css? zum Beispiel

.example{ 
font-size: ?px; 
} 

Mit anderen Worten, auf wie viele Pixel bezieht sich das Größenattribut?

Antwort

7

ist keine einfache Frage, und die wirkliche Antwort ist IT HÄNGT.

Siehe, die HTML-Größen sind keine echte Größe, aber eine irgendwie zufällige Größe. Mit dem SIZE-Attribut können Sie Ihre Schriftart auf eine abstrakte Größe von 1 bis 7 setzen.Die genaue Schriftgröße für jeden dieser Werte bleibt Ihrem Browser überlassen. Sie können beispielsweise nicht sicher sein, dass SIZE = 4 Ihnen eine 12-Punkt-Schriftart gibt; Sie wissen nur, dass SIZE = 4 größer als SIZE = 3 ist.

Also, was Sie bei 12px in einem Browser sehen, wird 13px oder 14 px in einem anderen Browser sein. Es gibt ein sehr interesting test made by SO user Eugene Yokota wo Sie die ungefähre Darstellung von Schriften zu em übersetzt sehen:

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

Aber das ist immer noch irgendwie subjektiv und natürlich keine Antwort auf die Fest (Pixel) Frage. Allerdings können Sie die Tabelle oben verwenden, um Pixel als Leitfaden zu übersetzen:

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

Nun, die Sache ist, dass, sobald Sie Ihre Pixel in Zeile haben, die Sie wirklich brauchen keine Sorgen zu, so lange, wie Sie definieren so etwas wie "font-size:12px" allen Browsern (sollten), um eine Schriftart mit 12px Höhe machen

Wenn Sie Unterschiede zwischen Schriftgröße Tag Rendering zwischen den Browsern interessiert sind, yu einen Blick auf dieses link with may examples

+1

Viel besser als meine Antwort! ;) +1 –

+0

ah, habe deine nicht gesehen, bis du es erwähnt hast und ich wollte es upvoten und ich konnte es nicht, weil es bereits gelöscht wurde. Es war auch gut, Schade, dass du es gelöscht hast, denn für das, was ich gesehen habe, gab es einige zusätzliche Informationen zu einem Thema, das ziemlich flach aussieht, aber immer noch keine definitive Antwort hat – Devin

-1

HTML

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

CSS

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

das gesagt ist, sollten Sie in skalierbarer CSS lesen, damit Sie nicht einen einzigen Absatz Targeting sind.

+0

Warum Sie tun nehmen denke, dass die "3" als der Wert des Attributs "Größe" des (veralteten) "Schriftart" -Tags notwendigerweise gleich "12px" sein würde, was ist Was fragte das OP? –

+0

Lediglich ein Beispiel, von dem das OP aus arbeiten könnte. –

0

"3" ist "Standard", so dass die nächste font-size Spezifikation am nächsten wäre, oder verwenden Sie font-size: 1 rem.

Eine vernünftige Annahme ist, dass ‚2‘ entspricht ‚kleine‘, ‚4‘ ‚größer‘ usw.

0

Sie können nicht <font> konvertieren in Pixel Font-Größe, wie die Schriftgröße der Schrift Das Tag variiert zwischen der Basisschriftgröße.
Es kann in em getan werden, wie in dieser SO Frage, How to convert <font size="10"> to px?.
Die Grafik kam unten von @ Antwort EugeneYokota ist da:

- Schriftgröße 1
- Schriftgröße: 0.63em

- Schriftgröße 2
- Schriftgröße: 0.82em

- Schriftgröße 3
- Schriftgröße: 1.0em

- Schriftgröße 4
- Schriftgröße: 1.13em

- Schriftgröße 5
- Schriftgröße: 1.5em

- Schriftgröße 6
- Schriftgröße: 2em

- Schriftgröße 7
- Schriftgröße: 3em

This font-size converter might be helpful Die Schriftart-Tags, Schriftgrößen sind relativ, was bedeutet, dass sie sich abhängig von der Basisschriftgröße ändern. Diese
This article explains it in more detail