web-dev-qa-db-ja.com

cssを使用して<pre>フォントサイズを変更する方法

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

preフォントサイズを変更する方法

htmlcssfont-sizepre
32
user289346

Preタグ内のテキストのfont-sizeを直接変更することはできませんが、そのテキストを別の要素（たとえば、span）でいつでもラップして、その要素のフォントサイズを変更できます。

例（これはインラインスタイルですが、必要に応じてCSSに入れることもできます）：

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

おそらく、Courier Newを優先フォントとして設定した場合は問題ないはずです。

以下はFirefoxとIEの両方で正常に動作します

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

ここを見てください：

PRE-書式設定済みのテキスト

HTMLタグ

PRE要素内のフォントサイズを変更することはできません（また、たとえば、FONT要素内にPRE要素を配置することはできません）が、BASEFONT要素は書式設定済みテキストにも影響します。

8
Leniel Maccaferri

フォントサイズを一度変更するだけでよい場合は、次のように記述できます。

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


これは Demo

ブラウザー（chrome、FF、IE）が同意しない理由はよくわかりません！

何か足りない場合は教えてください。

HTML

<pre>
Test
</pre>

css

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

Chrome

enter image description here

Firefox

enter image description here

IE

enter image description here

3
4dgaurav

異なるブラウザでサポートされている標準フォントと関係があると思います。別のブラウザでコードを試してみてください。ただし、IEはW3互換ではありません。

2
MaxDataSol

古い問題を掘り下げてすみません。 「なぜブラウザー（特にモバイルブラウザー）が<pre>タグテキストを小さすぎて読めないのか」を高低で検索した後、css font-size:をemに変更すると役立ちます。ただし、デスクトップブラウザーとモバイルブラウザでは、<pre>効果サイズの違いはemです。 Android Samsung/Mozilla/Chromeのフォントサイズの増加は、emとデスクトップブラウザーの同じ値に対して小さくなります。このジレンマに対する解決策は、代わりに%を使用することです。 emの。

CSSルールpre{font-size:200%;}は、デスクトップブラウザーの場合と同様に、モバイルブラウザーで<pre>テキストをより一貫して（他のテキストと比較して）拡大するようです。

2
Anon Y.

preタグのフォントサイズを修正する1つの解決策は、次を使用することです。

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

これにより、pre要素の幅を正確に決定できないモバイルブラウザーのフォントサイズが修正されます。

ソース： モバイルデバイスのpreタグのフォントサイズが大きくなりすぎる–修正

1
vallismortis

それが正しい方法かどうかはわかりませんが、これはFirefoxでうまくいきました。

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