如何使用css更改<pre> font size</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和＆amp; IE

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

Answer 3

看看这里：

PRE - preformatted text

HTML tag

  

您无法更改a中的字体大小   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>标记文字设置得太小而且不可读＆＃34;，我发现这里建议将css font-size:更改为{{1帮助。但问题是em，em效果在桌面浏览器上的大小与移动浏览器不同。 Android三星/ Mozilla / Chrome上明显的差异显着增加了字体大小，与<pre>相同的桌面浏览器相同。解决这一难题的方法是使用em代替%。

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

Answer 8

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

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

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

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

Answer 9

我不确定这是否是正确的方法，但这在Firefox中适用于我：

<input type='hidden' name='input_name' value="<?php echo htmlentities(serialize($array_name)); ?>" />

$passed_array = unserialize($_POST['input_name']);