pre{font-family:cursive;font-style:italic;font-size:xxx-small}
Как изменить размер шрифта pre?
В то время как размер шрифта не может быть изменен для текста непосредственно внутри pre-тегов, вы всегда можете перенести этот текст в другой элемент (например, span) и изменить размер шрифта этого элемента.
Например (это встроенные стили, но можно поместить в CSS, если хотите):
<pre><span class="inner-pre" style="font-size: 11px">
Blah blah
Multiple lines and no br's!
Oh yeah!
</span></pre>
Ваша проблема, вероятно, связана с тем, что Courer используется в качестве шрифта по умолчанию, если вы установите Courier New в качестве предпочтительного шрифта, это должно быть хорошо.
Следующее прекрасно работает как в Firefox, так и в IE
pre {
font-family: "courier new", courier, monospace;
font-size: 11px;
}
Взгляните сюда:
PRE - предварительно отформатированный текст
Вы не можете изменить размер шрифта в пределах Элемент PRE (и вы не можете поставить PRE элемент внутри элемента FONT, для пример), но элемент BASEFONT также влияет на предварительно отформатированный текст.
Если вам нужно только один раз изменить размер шрифта, вы можете написать
<pre style="font-size: 10px">
...
</pre>
Вот Демо
Я не совсем уверен, почему мои браузеры (хром, FF, IE) не согласны!
Пожалуйста, дайте мне знать, если я что-то упустил.
HTML
<pre>
Test
</pre>
CSS
pre {
font-size: 100px;
font-family: "Times New Roman", Times, serif;
font-style: italic;
}
Хром
Firefox
IE
Я думаю, что это может иметь какое-то отношение к стандартным шрифтам, поддерживаемым разными браузерами. Попробуйте использовать свой код в разных браузерах, но помните, что IE не совместим с W3.
Извините, что выкопал старую проблему. После поиска высоких и низких значений "почему браузеры (особенно мобильные браузеры) отображают текст тега <pre> слишком маленький и нечитабельный", я нашел здесь предложение, изменив css font-size: на em. Но getcha em для <pre> имеет размер эффектов по-разному в настольном браузере, а затем на мобильном браустере. Четкое несоответствие, заметное на Android-телефоне Samsung/Mozilla/Chrome, увеличивает размер шрифта меньше для того же значения em, а затем для настольных браузеров. Решением этой дилеммы является использование % вместо em.
Правило css pre{font-size:200%;}, по-видимому, увеличивает текст <pre> более последовательно (по сравнению с другими текстами) в мобильном браузере, как это делается на рабочем столе браузера.
Одним из решений для фиксации размера шрифта в тегах pre является использование:
pre
{
white-space: pre-wrap !important;
}
Это фиксирует размеры шрифтов в мобильных браузерах, которые не могут точно определить ширину элемента pre.