pre{font-family:cursive;font-style:italic;font-size:xxx-small}
如何更改pre
标签的字体大小?
虽然无法直接更改
标签内的文本的字体大小,但您总是可以将该文本包装在另一个元素中(例如),并更改该元素的字体大小。
例如(这是内联样式,但如果需要,可以放入CSS中):
<pre><span class="inner-pre" style="font-size: 11px">
Blah blah
Multiple lines and no br's!
Oh yeah!
</span></pre>
你的问题可能是由于默认字体使用了 Courier,如果将 Courier New 设置为首选字体,则应该可以解决问题。
以下内容在 Firefox 和 IE 中都可以正常工作。
pre {
font-family: "courier new", courier, monospace;
font-size: 11px;
}
如果您只需要更改一次字体大小,可以写
<pre style="font-size: 10px">
...
</pre>
pre
标签上修复字体大小的方法是使用:pre
{
white-space: pre-wrap !important;
}
这个修复了移动浏览器上的字体大小问题。由于移动浏览器无法准确确定 pre
元素的宽度。
来源:Font size of pre tag on mobile devices gets too big – a fix
这里是演示
我不太确定为什么我的浏览器(Chrome,FF,IE)不一致!
如果我漏掉了什么,请告诉我。
HTML
<pre>
Test
</pre>
css
pre {
font-size: 100px;
font-family: "Times New Roman", Times, serif;
font-style: italic;
}
<pre>
标签文本太小和难以阅读”的信息后,我发现像这里建议的那样,将css font-size:
更改为em
有所帮助。但是问题在于,在桌面浏览器和移动浏览器上,<pre>
的em
效果不同。在安卓Samsung / Mozilla / Chrome上,相同值的em
字体大小增加的比桌面浏览器少。解决这个问题的方法是使用%
而不是em
。
css规则pre { font-size:200%; }
似乎在移动浏览器和桌面浏览器上更一致地扩大<pre>
文本(与其他文本进行比较)。
我认为这可能与不同浏览器支持的标准字体有关。尝试在不同的浏览器中运行您的代码,但请记住IE不兼容W3。
我不确定这是否是正确的方法,但在Firefox中对我有效:
font: normal 11px Verdana, Arial, sans-serif;
<pre><code></code></pre>
,请记得设置pre code { white-space: pre; }
以保留换行符。 - Jack