如何使用css更改<pre>字體大小

Question

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

如何更改pre字體大小？

Answer 1

雖然無法直接在預標記內更改文本的字體大小，但您始終可以將該文本包裝在另一個元素（例如跨度）中，並更改該元素的字體大小。

例如（這是內聯樣式，但如果你願意，可以放在CSS中）：

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

Answer 2

您的問題可能是由於Courer被用作默認字體，如果您將Courier New設置為首選字體應該沒問題。

以下在Fi​​refox和IE中都可以正常工作

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

Answer 3

看看這里：

預先格式化的文本

HTML標記

您不能在PRE元素中更改字體大小（例如，您不能將PRE元素放在FONT元素中），但BASEFONT元素也會影響預格式化的文本。

Answer 4

如果您只需要更改一次字體大小，就可以編寫

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

Answer 5

這是Demo

我不太清楚為什么我的瀏覽器（chrome，FF，IE）不同意！

如果我錯過了什么，請告訴我。

HTML

<pre>
Test
</pre>

CSS

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

鉻

火狐

IE

Answer 6

我認為它可能與不同瀏覽器支持的標准字體有關。 在不同的瀏覽器中嘗試您的代碼，但請記住IE不兼容W3。

Answer 7

很抱歉挖掘舊問題。 在搜索高低之后“為什么瀏覽器（特別是移動瀏覽器）呈現<pre>標簽文本太小而且不可讀”，我發現這里建議，將css font-size:更改為em幫助。 但疑難雜症是em為<pre>影響大小不同的桌面瀏覽器，然后在移動布勞爾。 一個明顯的差異在Android三星/ Mozilla瀏覽器/鍍鉻增加字體大小相同的值不太明顯em然后桌面瀏覽器。 這種困境的解決方案是使用%而不是em 。

css規則pre{font-size:200%;}似乎在移動瀏覽器上比在桌面瀏覽器上更加一致地放大<pre>文本（與其他文本相比）。

Answer 8

在pre標簽上修復字體大小的一種解決方案是使用：

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

這修復了移動瀏覽器上的字體大小，這無法准確確定pre元素的寬度。

來源： 移動設備上預標記的字體大小太大 - 修復

Answer 9

我不確定這是否是正確的方法，但這在Firefox中對我有用：

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