Html 如何使用 css 更改 <pre> 字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2531975/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use css to change <pre> font size
提问by user289346
pre{font-family:cursive;font-style:italic;font-size:xxx-small}
How to change prefont size?
如何更改pre字体大小？
回答by Chris R
While the font-size cannot be changed for text directly inside pre tags, you can always wrap that text in another element (a span, for example) and change the font size of that element.
虽然不能直接在 pre 标签内更改文本的字体大小，但您始终可以将该文本包装在另一个元素（例如跨度）中并更改该元素的字体大小。
For example (this is inline-styles, but could be put in CSS if you wanted):
例如（这是内联样式，但如果您愿意，可以放在 CSS 中）：
<pre><span class="inner-pre" style="font-size: 11px">
Blah blah
Multiple lines and no br's!
Oh yeah!
</span></pre>
回答by Jon Freedman
Your issue is probably due to Courer being used as the default font, if you set Courier New as the preferred font it should be fine.
您的问题可能是由于 Courier 被用作默认字体，如果您将 Courier New 设置为首选字体应该没问题。
The following works fine in both Firefox & IE
以下在 Firefox 和 IE 中都可以正常工作
pre {
font-family: "courier new", courier, monospace;
font-size: 11px;
}
回答by Leniel Maccaferri
Take a look here:
看看这里：
You cannot change font size within a PRE element (and you cannot put a PRE element inside a FONT element, for example), but the BASEFONT element affects preformatted text, too.
您不能在 PRE 元素内更改字体大小（例如，您不能将 PRE 元素放在 FONT 元素内），但 BASEFONT 元素也会影响预格式化的文本。
回答by user2914821
If you only need to change the font size once, you can write
如果你只需要改变一次字体大小，你可以写
<pre style="font-size: 10px">
...
</pre>
回答by 4dgaurav
Here is the Demo
这里是 Demo
I am not quite sure why my browsers (chrome, FF, IE) doesn't agree!
我不太确定为什么我的浏览器（chrome、FF、IE）不同意！
Please let me know if I am missing something.
如果我遗漏了什么，请告诉我。
HTML
HTML
<pre>
Test
</pre>
css
css
pre {
font-size: 100px;
font-family: "Times New Roman", Times, serif;
font-style: italic;
}
Chrome
铬合金
Firefox
火狐
IE
IE
回答by Anon Y.
Sorry for digging up an old issue. After searching high and low for "why browsers (specially mobile browsers) renders <pre>tags text too small and unreadable", I found as suggested here, changing css font-size:to emhelps. But the gotcha is emfor <pre>effects size differently on desktop browser then on mobile brower. A clear discrepancy noticeable on android Samsung/Mozilla/Chrome increase in font-size less for the same value of emthen desktop browsers. The solution to this dilemma is to use %instead of em.
很抱歉挖掘了一个旧问题。在高低搜索“为什么浏览器（特别是移动浏览器）呈现<pre>标签文本太小且不可读”之后，我发现按照此处的建议，将 css 更改font-size:为em帮助。但疑难杂症是em用于<pre>对桌面浏览器的大小不同，然后在移动布劳尔。对于与em桌面浏览器相同的值，Android Samsung/Mozilla/Chrome 上字体大小增加的明显差异较小。解决这个困境的方法是使用%而不是em.
The css rule pre{font-size:200%;}seems to enlarge <pre>text more consistently (compare to other texts) on mobile browser as it does on desktop browser.
css 规则pre{font-size:200%;}似乎<pre>在移动浏览器上更一致地放大文本（与其他文本相比），就像在桌面浏览器上一样。
回答by MaxDataSol
I think it can have something to do with the standard fonts supported by different browsers. Try your code in different browsers but remember IE is not W3 compatible.
我认为这可能与不同浏览器支持的标准字体有关。在不同的浏览器中尝试您的代码，但请记住 IE 与 W3 不兼容。
回答by vallismortis
One solution to fixing font size on pretags is to use:
修复pre标签字体大小的一种解决方案是使用：
pre
{
white-space: pre-wrap !important;
}
This fixes font sizes on mobile browsers, which cannot accurately determine the width of a preelement.
这修复了无法准确确定pre元素宽度的移动浏览器上的字体大小。
Source: Font size of pre tag on mobile devices gets too big – a fix
回答by Greg M
I'm not sure if it's the right way to do it, but this worked for me in Firefox:
我不确定这是否是正确的方法，但这在 Firefox 中对我有用：
font: normal 11px Verdana, Arial, sans-serif;
