it-swarm.com.de

Verwendung von css zum Ändern der Schriftgröße von <pre>

pre{font-family:cursive;font-style:italic;font-size:xxx-small}

Wie pre Schriftgröße ändern?

31
user289346

Während die Schriftgröße nicht direkt für Text in Pre-Tags geändert werden kann, können Sie diesen Text immer in ein anderes Element (z. B. einen Bereich) einschließen und die Schriftgröße dieses Elements ändern.

Zum Beispiel (dies sind Inline-Stile, könnten aber in CSS eingefügt werden, wenn Sie möchten):

<pre><span class="inner-pre" style="font-size: 11px">
Blah blah
Multiple lines and no br's!
Oh yeah!
</span></pre>
35
Chris R

Ihr Problem liegt wahrscheinlich an der Verwendung von Courer als Standardschriftart. Wenn Sie Courier New als bevorzugte Schriftart festlegen, sollte dies in Ordnung sein.

Folgendes funktioniert gut in Firefox und IE

pre {
   font-family: "courier new", courier, monospace;
   font-size: 11px;
}
9
Jon Freedman

Schauen Sie hier:

PRE - vorformatierter Text

HTML-Tag

Sie können die Schriftgröße nicht in einem .__ ändern. PRE-Element (und Sie können ein PRE -Element nicht in ein FONT-Element einfügen, zum Beispiel ), Aber das BASEFONT-Element wirkt sich auch auf vorformatierten Text aus.

8

Wenn Sie die Schriftgröße nur einmal ändern müssen, können Sie schreiben

<pre style="font-size: 10px">
    ...
</pre>
7
user2914821


Hier ist der Demo

Ich bin mir nicht ganz sicher, warum meine Browser (Chrome, FF, IE) nicht einverstanden sind!

Bitte lassen Sie mich wissen, wenn ich etwas vermisse.

HTML

<pre>
Test
</pre>

cSS

pre {
    font-size: 100px;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
}

Chrom

enter image description here

Feuerfuchs

enter image description here

IE

enter image description here

3
4dgaurav

Ich denke, es kann etwas mit den Standardschriftarten zu tun haben, die von verschiedenen Browsern unterstützt werden. Versuchen Sie Ihren Code in verschiedenen Browsern. Denken Sie jedoch daran, dass IE nicht W3-kompatibel ist.

2
MaxDataSol

Tut mir leid, dass Sie eine alte Ausgabe gefunden haben. Nach der Suche nach "warum Browser (speziell mobile Browser) <pre>-Tags zu klein und unleserlich machen", fand ich, wie hier vorgeschlagen, die Änderung von css font-size: in em. Die gotcha ist jedoch em für <pre>-Effekte auf dem Desktop-Browser anders als auf dem mobilen Browser. Eine deutliche Diskrepanz, die auf Android Samsung/Mozilla/Chrome spürbar ist, erhöht die Schriftgröße um den gleichen Wert von em weniger als bei Desktop-Browsern. Die Lösung für dieses Dilemma ist die Verwendung von % anstelle von em

Die css-Regel pre{font-size:200%;} scheint <pre>-Text im mobilen Browser einheitlicher (vergleiche mit anderen Texten) zu vergrößern als im Desktop-Browser.

2
Anon Y.

Eine Lösung zum Festlegen der Schriftgröße für pre-Tags ist die Verwendung von:

pre
{
    white-space: pre-wrap !important;
}

Dadurch werden Schriftgrößen in mobilen Browsern korrigiert, die die Breite eines pre-Elements nicht genau bestimmen können.

Quelle: Schriftgröße des Pre-Tags auf mobilen Geräten wird zu groß - ein Fix

1
vallismortis

Ich bin nicht sicher, ob es der richtige Weg ist, aber das hat für mich in Firefox funktioniert:

font: normal 11px Verdana, Arial, sans-serif;
0
Simone M