Pre html font size

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

В то время как размер шрифта не может быть изменен для текста непосредственно внутри pre-тегов, вы всегда можете перенести этот текст в другой элемент (например, span) и изменить размер шрифта этого элемента. Например (это встроенные стили, но можно поместить в CSS, если хотите):

Blah blah Multiple lines and no br's! Oh yeah!

Я почти не пробовал это, потому что я не думал, что это может сработать, так как тег находится внутри тега pre . но он работает (по крайней мере, с интерпретатором html outlook). Спасибо!

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

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

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

всегда лучше публиковать реальный ответ (даже копировать / вставить), а не просто ссылку на внешние ресурсы, потому что веб-сайты и блоги могут иметь более короткий срок службы, чем stackoverflow

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

В Chrome он изменил размер шрифта, но «добавил» (?) Значительный интервал между строками, более или менее сведя на нет эффект.

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

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

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

Правило css pre , по-видимому, увеличивает текст более последовательно (по сравнению с другими текстами) в мобильном браузере, как это делается на рабочем столе браузера.

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

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

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

Содержание

Ещё вопросы
Синтаксис
Пример
Результат
Пример
Результат
Атрибуты
Как добавить стиль к тегу ?
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :
Стили форматирования текста для тега :
CSS стили тега pre
HTML-код
CSS для отображения на экране
CSS для печати

Ещё вопросы

1 Объявление массива байтов в качестве открытого члена
0 PHP submit обновляет страницу и принимает идентификатор отправки в качестве параметра
1 Springdata: mongodb находит запрос с необязательными «критериями»
0 Подменю на заказ JQuery
1 Virtuoso Jena Provider Construct Query Error
0 Не удалось найти код для ответа на этот запрос.
1 Каков наилучший способ аутентификации двух типов пользователей (ученик и водитель) в моем приложении для Android с использованием Firebase
1 Как навсегда отключить автомобильный режим?
1 Как найти изображение плоскости дикома
1 Подписки PayPal только на стороне клиента
1 Обработка событий для переключения видимости родственного элемента SVG?
0 сообщение об успехе или неудаче при отправке формы
0 Как создать кликабельный список div с подпунктами, используя JavaScript
1 В облачных функциях Firebase отказано в доступе
0 Фильтровать и сортировать многомерный массив в PHP
1 Где разместить SwingUtilities.invokeLater в отдельном Java-приложении с поддержкой Spring?
1 Отделение сервиса ServiceStack от бизнес-логики
0 нажмите следующую страницу [Выбрать форму]
1 проверка индекса вне диапазона с массивом
0 Отличная условная блокировка в 2-х функциях
0 Скопировать конструкцию и оператор присваивания в производном классе
1 Разобрать строку составного запроса в Python
1 Как решить «ошибка: не удается найти символьную переменную new_location» в Android Studio?
0 Выражение с участием модульных возведения в степень в C ++
1 Рекурсивное чтение древовидной структуры XML в списке
0 Создание редактируемого выпадающего списка
1 Можем ли мы использовать базу данных Realm бесплатно как альтернативу Sqlite и CoreData?
0 Самые длинные запросы MySQL для тестирования в худшем случае
0 остановка css при перемещении всех остальных блоков
0 Mysql запрос со свойствами родителей
0 Включить кнопку обзора Jquery.
0 Как получить значение и идентификатор из текстовой области, которая использует строку базы данных в качестве идентификатора
1 Подсчет и список подключений в SignalR
0 Аналоговый div для использования в C # (сервер)
1 Распечатайте упаковочный лист «Адрес не указан» через REST API C #
1 Назначение и вызов свойств объекта внутри другого объекта
1 Массив для сортировки рекордов
1 Постоянные функции над глобальными переменными?
0 получение локального хранилища и использование для ng-repeat
1 Динамическое центрирование поисковой панели на основе размеров изображения
1 Разбор XML и сохранение результатов в строке
1 улучшения в коде
0 Как я могу ограничить группировку и перетаскивание внутри TreeView Kendo UI
1 Как отправить ObjectViewModel из представления в контроллер в ASP.NET MVC C #?
0 Свернуть все последующие элементы до определенного тега
1 Качели и Явафкс
0 Холст (Three.js) сценарий с Angular
1 Для чего используется метод queue.dequeue_up_to () в tenorflow.data_flow_ops?
1 Как получить секунды с эпохи без связи со временем устройства? [Дубликат]
1 Проблема с установкой релиза Apk

Источник

HTML тег

Содержимое тега отображается в браузере моноширинным шрифтом (шрифт, в котором все знаки имеют одинаковую ширину).

В тег можно вкладывать любые элементы за исключением тегов , , , , и .

Также не допускается использовать блочные элементы, так как они создают дополнительные отступы, изменяя расстояния между строчками.

Синтаксис

Тег

парный, содержимое пишется между открывающим (

) и закрывающим (

) тегами.

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> pre>Крошка сын к отцу пришёл, и спросила кроха: — Что такое хорошо и что такое плохо? — pre> body> html>

Результат

Если вам необходимо вставить в HTML документ блок с кодом, используйте для этого тег , вложенный в элемент. В этом случае поисковые роботы, программы, читающие с экрана сразу поймут, что они имеют дело с программным кодом.

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> pre> code> body < color:orange; >code> pre> body> html>

Результат

Атрибуты

Атрибут	Значение	Описание
width	number	Задает максимальное количество символов в строке. Не поддерживается в HTML5.

Тег поддерживает также глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
CSS свойство font-size задает размер щрифта.
CSS свойство font-weight устанавливает насыщенность шрифта.
CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Стили форматирования текста для тега :

CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
CSS свойство word-break указывает перенос строки.

CSS свойство text-shadow добавляет тень к тексту.
CSS свойство text-align-last выравнивает последнюю строку текста.
CSS свойство line-height устанавливает межстрочный интервал.
CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Источник

CSS стили тега pre

Мне нравится писать о тегах pre . В этой статье я расскажу о стилях CSS , которые помогут стилизовать теги pre , как для экранных, так и для печатных медиа.

HTML-код

Это нормально использовать теги сами по себе, но если вы применяете теги , например, так ( обратите внимание, что угловые скобки заменены квадратными, чтобы подсветить синтаксис ):

. здесь включено содержимое pre .

. это обеспечивает больше гибкости в плане определения стилей с помощью CSS . Рассмотрим некоторые примеры.

CSS для отображения на экране

Одно замечание в отношении тегов pre в HTML - они сохраняют пустое пространство ( пробелы и разрывы строк ) для любого содержимого, которое в них включено. Поэтому идеально подходят для отображения фрагментов кода. Вот некоторые основные стили, которые обеспечивают, чтобы теги отлично смотрелись при отображении на веб-странице:

Приведенный выше CSS-код задает стили для всех тегов таким образом, что:

Содержимое тегов pre занимает 100% ширины;
Горизонтальная полоса прокрутки отображается, если ширина содержимого превышает ширину блока элемента ;
Вертикальная полоса прокрутки не отображается ( блок будет автоматически установлен на всю высоту его содержимого );
Цвет фона будет отображаться как светло-серый;
В блоке появится тонкая рамка;
Код будет включать повторяющиеся / чередующиеся полосы ( смотрите примечание );
Вокруг содержимого тегов будет отступ в 10 пикселей.

Примечание : Приведенный выше код использует свойство background для отображения повторяющегося изображения. Фоновое изображение должно быть несколько пикселей в ширину и 40 пикселей в высоту ( равное двойной высоте строки ). Верхние 20 пикселей должны быть более темного сплошного цвета, а нижние 20 пикселей - светлого прозрачного. Это создаст эффект полосатого фона, который улучшит читаемость содержимого тега . Можно удалить свойство background , если предпочитаете использовать сплошной однотонный фон.

Также обратите внимание, что мы задаем отступы и цвет через тег . Чтобы сделать это проще, можно добавить в селектор тега pre в HTML box-sizing: border-box; , а затем объединить все таким образом:

Это лишь основные стили, которые помогут выбрать правильное направление. Вы обязательно должны настроить CSS в соответствии с вашими предпочтениями и дизайном веб-страниц.

CSS для печати

В данный момент ваши теги стилизованы под отображение на экране ( веб-странице ). Но как сделать так, чтобы они хорошо выглядели на распечатанной странице? Вот некоторые CSS-стили , которые можно использовать, чтобы сделать содержимое тега pre отлично читаемым на печатной странице:

Мы используем запрос @media только для печати. Поэтому, когда кто-то захочет распечатать страницу, содержимое тега будет автоматически помещено в контейнер таким образом, чтобы поместиться на лист бумаги. Кроме этого оно будет отображаться темным текстом на белом фоне для лучшей читаемости.

Помните, что это лишь основные стили. Настоятельно рекомендую экспериментировать и настроить CSS в соответствии с вашими потребностями.

Источник