web-dev-qa-db-fra.com

Comment utiliser css pour changer la taille de la police <pre>

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

Comment changer la taille de la police pre?

htmlcssfont-sizepre
31
user289346

Bien que la taille de la police ne puisse pas être modifiée pour le texte directement dans les balises de pré, vous pouvez toujours envelopper le texte dans un autre élément (une étendue, par exemple) et modifier la taille de la police de cet élément.

Par exemple (ceci est inline-styles, mais peut être mis en CSS si vous le souhaitez):

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

Votre problème est probablement dû au fait que Courer est utilisée comme police par défaut. Si vous définissez Courier New comme police préférée, cela devrait suffire.

Ce qui suit fonctionne très bien dans Firefox et IE

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

Jetez un coup d'oeil ici:

PRE - texte préformaté

balise HTML

Vous ne pouvez pas changer la taille de la police dans un L'élément PRE (et vous ne pouvez pas insérer d'élément PRE affecte également le texte préformaté.

8
Leniel Maccaferri

Si vous ne devez modifier la taille de la police qu'une seule fois, vous pouvez écrire

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


Hier ist der Demo

Votre panier est vide, navigateur (Chrome, FF, IE) pas cher!

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

Je pense que cela peut avoir quelque chose à voir avec les polices standard supportées par différents navigateurs. Essayez votre code dans différents navigateurs, mais souvenez-vous que IE n'est pas compatible W3.

2
MaxDataSol

Désolé d'avoir découvert un vieux problème. Après avoir cherché haut et bas "pourquoi les navigateurs (spécialement les navigateurs mobiles) rend le texte des balises <pre> trop petit et illisible", je l’ai trouvé comme suggéré ici, changer css font-size: en em aide. Mais le piège est em pour la taille des effets <pre> différemment sur le navigateur du bureau, puis sur le navigateur mobile. Une différence évidente constatée sur Android Samsung/Mozilla/Chrome augmente moins en taille de police pour la même valeur de em que les navigateurs de bureau. La solution à ce dilemme consiste à utiliser % au lieu de em. 

La règle css pre{font-size:200%;} semble agrandir le texte <pre> de manière plus cohérente (par rapport à d'autres textes) sur le navigateur mobile, comme sur le navigateur du bureau.

2
Anon Y.

Une solution pour fixer la taille de la police sur les balises pre consiste à utiliser:

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

Cela corrige la taille des polices des navigateurs mobiles, qui ne peuvent pas déterminer avec précision la largeur d'un élément pre.

Source: La taille de la police de la balise pré sur les appareils mobiles devient trop grande - un correctif

1
vallismortis

Je ne sais pas si c'est la bonne façon de le faire, mais cela a fonctionné pour moi dans Firefox:

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