如何使用 css 更改 <pre> 字体大小答案

【问题标题】：How to use css to change <pre> font size如何使用 css 更改 <pre> 字体大小
【发布时间】：2011-02-01 16:24:40
【问题描述】：

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

如何更改pre的字体大小？

【问题讨论】：

标签： html css font-size pre

【解决方案1】：

虽然无法直接在 pre 标记内更改文本的字体大小，但您始终可以将该文本包装在另一个元素（例如跨度）中并更改该元素的字体大小。

例如（这是内联样式，但如果你愿意，可以放在 CSS 中）：

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

【讨论】：

我几乎没有尝试过这个，因为我认为它不可能工作，因为标签在 pre 标签内......但它确实有效（至少对于 Outlook html 解释器）。谢谢！
如果你使用<pre><code></code></pre>，记得设置pre code { white-space: pre; }保留换行符。
我发现这在将 powershell 文本输出通过电子邮件发送到团队频道时非常有用（需要预先格式化，这样您就不会丢失列间距 + 需要更小的字体）+1

【解决方案2】：

您的问题可能是由于 Courer 被用作默认字体，如果您将 Courier New 设置为首选字体应该没问题。

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

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

【解决方案4】：

看这里：

PRE - preformatted text

HTML tag

您不能在 PRE 元素（你不能放一个 PRE FONT 元素内的元素，对于示例），但 BASEFONT 元素也会影响预格式化的文本。

【讨论】：

第二个链接失效:(
@Jankapunkt 页面将扩展名从 .asp 更改为 .html。 :) 感谢您的提示。
最好发布实际响应（甚至是复制/粘贴），而不仅仅是外部资源的链接，因为网站和博客的寿命可能比 stackoverflow 短

【解决方案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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

抱歉挖掘了一个老问题。在高低搜索“为什么浏览器（特别是移动浏览器）呈现<pre>标签文本太小且不可读”之后，我发现按照这里的建议，将css font-size:更改为em有帮助。但问题是em <pre> 在桌面浏览器和移动浏览器上的效果大小不同。对于 em 的相同值，在 android Samsung/Mozilla/Chrome 上字体大小增加的明显差异明显小于桌面浏览器。解决这个困境的方法是使用% 而不是em。

css 规则 pre{font-size:200%;} 似乎在移动浏览器上更一致地放大 <pre> 文本（与其他文本相比），就像在桌面浏览器上一样。

【讨论】：

【解决方案8】：

在pre 标签上固定字体大小的一种解决方案是使用：

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

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

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

【讨论】：

【解决方案9】：

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

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

【讨论】：