如何使用CSS更改<pre>字体大小

Question

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

如何更改pre标签的字体大小？

- user289346

Answer 1

虽然无法直接更改

标签内的文本的字体大小，但您总是可以将该文本包装在另一个元素中（例如），并更改该元素的字体大小。


例如（这是内联样式，但如果需要，可以放入CSS中）：
<pre><span class="inner-pre" style="font-size: 11px">
Blah blah
Multiple lines and no br's!
Oh yeah!
</span></pre>

- Chris R

---

因为标签在 pre 标签里面，所以我几乎不想尝试它，因为我认为这不可能会奏效...但它确实有效（至少在 Outlook HTML 解释器中）。谢谢！ - kimon

如果您正在使用<pre><code></code></pre>，请记得设置pre code { white-space: pre; }以保留换行符。 - Jack

我发现这对将PowerShell文本输出发送到团队频道的电子邮件非常有帮助（需要预格式化以保留列间距+需要较小的字体）+1。 - Smock

Answer 2

你的问题可能是由于默认字体使用了 Courier，如果将 Courier New 设置为首选字体，则应该可以解决问题。

以下内容在 Firefox 和 IE 中都可以正常工作。

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

- Jon Freedman

Answer 3

如果您只需要更改一次字体大小，可以写

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

- user2914821

---

在 Chrome 中，它确实更改了字体大小，但是在行之间“添加”（？）了大量间距，或多或少地抵消了效果。 - robbpriestley

Answer 4

请看这里：

PRE - 预格式化文本

HTML 标签

你不能在 PRE 元素内更改字体大小（例如，你不能将 PRE 元素放置在 FONT 元素内），但是 BASEFONT 元素也会影响预格式化文本。

- Leniel Maccaferri

---

第二个链接已经失效了 :( - Jankapunkt

@Jankapunkt，该页面的扩展名已从.asp更改为.html。 :) 感谢您的提示。 - Leniel Maccaferri

最好发布实际的回复（甚至是复制/粘贴），而不仅仅是外部资源的链接，因为网站和博客的寿命可能比stackoverflow短。 - drigoangelo

Answer 5

一种解决在 pre 标签上修复字体大小的方法是使用：

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

这个修复了移动浏览器上的字体大小问题。由于移动浏览器无法准确确定 pre 元素的宽度。

来源：Font size of pre tag on mobile devices gets too big – a fix

- Parker

Answer 6

这里是演示

我不太确定为什么我的浏览器（Chrome，FF，IE）不一致！

如果我漏掉了什么，请告诉我。

HTML

<pre>
Test
</pre>

css

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

Chrome Firefox IE

- 4dgaurav

Answer 7

抱歉挖出一个旧问题。在搜索了许多关于“为什么浏览器（特别是移动浏览器）呈现<pre>标签文本太小和难以阅读”的信息后，我发现像这里建议的那样，将css font-size:更改为em有所帮助。但是问题在于，在桌面浏览器和移动浏览器上，<pre>的em效果不同。在安卓Samsung / Mozilla / Chrome上，相同值的em字体大小增加的比桌面浏览器少。解决这个问题的方法是使用%而不是em。

css规则pre { font-size：200％; } 似乎在移动浏览器和桌面浏览器上更一致地扩大<pre>文本（与其他文本进行比较）。

- Anon Y.

Answer 8

我认为这可能与不同浏览器支持的标准字体有关。尝试在不同的浏览器中运行您的代码，但请记住IE不兼容W3。

- MaxDataSol

Answer 9

我不确定这是否是正确的方法，但在Firefox中对我有效：

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

- Greg M