Как использовать CSS для изменения размера шрифта <pre> - PullRequest
Новая
       22

Как использовать CSS для изменения размера шрифта <pre>

31 голосов
/ 28 марта 2010 
pre{font-family:cursive;font-style:italic;font-size:xxx-small}

Как изменить pre размер шрифта?

Ответы [ 9 ]

36 голосов
/ 29 ноября 2010

Хотя размер шрифта нельзя изменить для текста непосредственно внутри предварительных тегов, вы всегда можете заключить этот текст в другой элемент (например, в span) и изменить размер шрифта этого элемента.

Например (это встроенные стили, но вы можете поместить их в CSS, если хотите): 

<code><pre><span class="inner-pre" style="font-size: 11px">
Blah blah
Multiple lines and no br's!
Oh yeah!
</span>
9 голосов
/ 11 апреля 2012

Ваша проблема, вероятно, связана с тем, что Courer используется в качестве шрифта по умолчанию, если вы установите Courier New в качестве предпочтительного шрифта, он должен быть в порядке.

Следующее работает отлично как в Firefox, так и в IE 

pre {
   font-family: "courier new", courier, monospace;
   font-size: 11px;
}
8 голосов
/ 28 марта 2010

Взгляните сюда:

PRE - предварительно отформатированный текст

HTML-тег

Вы не можете изменить размер шрифта в пределах Элемент PRE (и вы не можете поставить PRE элемент внутри элемента FONT, для пример), но элемент BASEFONT также влияет на форматированный текст.

7 голосов
/ 17 апреля 2014

Если вам нужно всего лишь один раз изменить размер шрифта, вы можете написать 

<code><pre style="font-size: 10px">
    ...
3 голосов
/ 08 июня 2014


Вот Демо

Я не совсем уверен, почему мои браузеры (Chrome, FF, IE) неНе согласен!

Пожалуйста, дайте мне знать, если я что-то упустил.

HTML 

<code><pre>
Test

css 

pre {
    font-size: 100px;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
}

Chrome

enter image description here

Firefox

enter image description here

IE

enter image description here

2 голосов
/ 13 октября 2014

Извините, что выкопал старый вопрос. После поиска в верхнем и нижнем регистре «почему браузеры (особенно мобильные браузеры) отображают текст <pre> слишком мелким и нечитаемым», я обнаружил, как предлагается здесь, поменять css font-size: на em. Но получится em для <pre> размера эффектов в браузере настольного компьютера, а не в мобильном браузере. На Android, Samsung / Mozilla / Chrome наблюдается явное несоответствие, увеличение размера шрифта меньше при том же значении em, что и в браузерах для настольных компьютеров. Решением этой дилеммы является использование % вместо em.

Правило css pre{font-size:200%;}, кажется, увеличивает <pre> текст более последовательно (по сравнению с другими текстами) в мобильном браузере, как в настольном браузере.

2 голосов
/ 14 августа 2012

Я думаю, что это может быть связано со стандартными шрифтами, поддерживаемыми различными браузерами. Попробуйте свой код в разных браузерах, но помните, что IE не совместим с W3.

1 голос
/ 19 ноября 2016

Одним из решений для исправления размера шрифта на тегах pre является использование: 

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

Исправляет размеры шрифтов в мобильных браузерах, которые не могут точно определить ширину элемента pre.

Источник: Размер шрифта предварительного тега на мобильных устройствах становится слишком большим - исправление

0 голосов
/ 02 апреля 2018

Я не уверен, что это правильный способ, но у меня это сработало в Firefox: 

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