Как уменьшить текст на странице

Как менять размер текста при изменении размера окна?

Для изменения размера текста веб-страницы совместно с окном браузера есть несколько методов. Рассмотрим наиболее популярные.

Использование единиц vw

Размер текста задаётся с помощью свойства font-size, в качестве значения можно указывать разные единицы — пиксели, пункты, миллиметры и др. Единица vw (от англ. viewport width — ширина области просмотра) соответствует 1% от ширины окна браузера, таким образом, при изменении этой ширины будет меняться и размер текста (пример 1).

Пример 1. Использование vw

Результат данного примера показан на рис. 1.

Рис. 1. а — текст на широком окне; б — текст на узком окне

У единицы vw есть несколько недостатков — главное, что текст уменьшается пропорционально вместе с окном и в какой-то момент становится нечитаемым. Это будет особенно заметно на смартфонах, где ширина экрана меньше ширины мониторов. Чтобы установить минимальный размер текста можно воспользоваться функцией calc(), как показано в примере 2.

Пример 2. Использование calc()

Здесь мы смешиваем разные единицы — для заголовка rem и vw, для основного текста пиксели и vw. Использование calc() гарантирует, что текст не станет меньше указанного значения (для заголовка, к примеру, это 1rem).

Использование медиа-запросов

Поскольку единицы vw завязаны на ширину области просмотра, то при увеличении размера окна увеличивается и размер текста. Иногда требуется сделать наоборот — на маленьких экранах показывать большой текст, а на больших экранах, соответственно, маленький текст. Для этого применяются медиа-запросы, они меняют стиль элементов при определённой ширине окна браузера.

Сперва определяем стиль для больших экранов, затем с помощью конструкции @media screen and (max-width: 1024px) задаём стиль для экранов с шириной до 1024 пикселей. Внутри @media пишется размер текста под этот размер. При желании ниже добавляем ещё несколько @media с разными значениями max-width (пример 3).

Пример 3. Использование @media

Размер текста в данном случае будет меняться не плавно, а ступенчато — при достижении указанной ширины окна размер текста уменьшается или увеличивается.

См. также

• @media
• calc()
• clamp()
• font-size
• Единицы размера в CSS
• Медиа-запросы
• Отзывчивый веб-дизайн
• Размер текста
• Свойства шрифта в CSS

Изменение размера шрифта или масштаба веб-страниц в Safari

В Safari 10 в ОС macOS Sierra можно настроить размер шрифта или масштаб, чтобы лучше видеть страницы.

Изменение размера шрифта

• Чтобы увеличить размер шрифта, нажмите клавиши Option-Command-Плюс (+)
• Чтобы уменьшить размер шрифта, нажмите клавиши Option-Command-Минус (-)

Или можно открыть меню «Вид» и, удерживая клавишу Option, выбрать «Увеличить текст» или «Уменьшить текст».

Изменение масштаба

Можно увеличить или уменьшить масштаб страниц (текста и изображений), просматриваемых в Safari в ОС macOS Sierra. Safari будет помнить настройки, пока не будет очищена история.

• Чтобы увеличить масштаб, нажмите клавиши Command-Плюс (+)
• Чтобы уменьшить масштаб, нажмите клавиши Command-Минус (-)

Или откройте меню «Вид» и выберите «Увеличить» или «Уменьшить».

Очистка истории с сброс размера шрифта и масштаба

Если очистить историю Safari, для веб-сайтов восстановится размер шрифтов или масштаб по умолчанию.

В меню «История» выберите «Очистить историю». Затем еще раз щелкните «Очистить историю».

Информация о продуктах, произведенных не компанией Apple, или о независимых веб-сайтах, неподконтрольных и не тестируемых компанией Apple, не носит рекомендательного или одобрительного характера. Компания Apple не несет никакой ответственности за выбор, функциональность и использование веб-сайтов или продукции сторонних производителей. Компания Apple также не несет ответственности за точность или достоверность данных, размещенных на веб-сайтах сторонних производителей. Обратитесь к поставщику за дополнительной информацией.

Сокращение текста

Если у вас короткий документ, в который на последней странице всего лишь небольшое количество текста, можно уменьшить его, чтобы напечатать только на одной странице, и не печатать лишние страницы.

Для этого воспользуйтесь командой Сократить на страницу. Приложение Word сократит документ на одну страницу, уменьшив размер шрифта и значения интервалов в тексте. Например, документ из примера выше будет сокращен до 1 страницы, а документ, состоящий из 3 страниц, можно сократить до 2.

Совет: Перед использованием этой команды создайте копию документа. Для сокращения Word уменьшит размер каждого использованного в документе шрифта. Отменить команду можно нажатием сочетания клавиш CONTROL + Z. Обратите внимание, что после сохранения и закрытия документа быстро восстановить исходный размер шрифта невозможно.

Команда Сократить на страницу не является часто используемой командой, поэтому кнопка по умолчанию не отображается. Однако вы можете быстро добавить его. Самый быстрый способ добавить кнопку — добавить ее на панель быстрого доступа.

1. На панели быстрого доступа в верхней части окна Word нажмите Настроить панель быстрого доступа (маленькая стрелка вниз) и выберите пункт Другие команды.
2. В списке Выбрать команды из: выберите пункт Все команды.
3. Найдите в списке команд Сократить на страницу.
4. Щелкните команду Сократить на страницу, чтобы выбрать ее, а затем нажмите кнопку Добавить.
5. Нажмите ОК.

Когда кнопка станет доступной, нажмите на нее для сокращения текста.

1. Щелкните Редактировать >в Word в Интернете, если вы еще этого не сделали.
2. Чтобы выбрать весь текст в документе, нажмите CTRL+A.
3. Щелкните Главная >уменьшить шрифт один или несколько раз. При нажатиикнопки Уменьшить шрифт Word уменьшает размер всех шрифтов в документе.
4. Нажмите кнопку >в этом >, чтобы узнать, достаточно ли сжатие текста.

Совет: Если это не сработает и у вас есть классические приложения Word, нажмите кнопку Открыть в Word, чтобы открыть документ в Word и сжать текст.

Как изменить размер текста в html

Для изменения размера шрифта необходимо использовать свойство font-size. Его значением могут быть: абсолютный размер, относительный размер, конкретное значение, проценты. Также оно наследуется от родителя.

 Этот шрифт будет размером в 20px 

p  font-size: 20px; >