Как сузить текст в css

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

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

Использование единиц 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

Сжать Текст CSS

Доброго времени суток! проблема такая:
Нужно в заголовке сайта при верстке вставить текст сжатый!
Каким образом это можно сделать!

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Сжать текст, заменяя повторяющиеся символы одним
Привет, наткнулась случайно на ваш форум, не знаю помогаете ли вы студентам, но попытка не пытка).

Сжать текст, оставив между словами по одному пробелу
Дан текст 30 символов. Сжать текст, оставив между словами по одному пробелу.

Сжать текст, оставив между словами по одному пробелу
Дан текст 30 символов. Сжать текст, оставив между словами по одному пробелу.

Текст в таблице (CSS)
Добрый день. У меня появилась небольшая проблема. Я создал таблицу, но текст в ней распологается.

font-stretch

Устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расширять текст.

Синтаксис

font-stretch: inherit | ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded

Значения

Влияние разных значений font-stretch на вид букв в тексте показано на рис. 1.

Рис. 1. Вид букв при разных значениях font-stretch

HTML5 CSS3 IE 9 Cr Op Sa Fx

     p  
Б Б Б Б Б Б Б Б Б 
  

Браузеры

Браузеры применяют свойство font-stretch не ко всем шрифтам, поэтому уплотнение или расширение текста может не работать с некоторыми популярными и распространёнными гарнитурами шрифтов.

Как сузить текст в css

Написать в поддержку

Помощь онлайн

Проверить домен

Войти Валюта:

HTML: форматирование текста

09 июня

65680

Комментариев: 0

Рассмотрим несколько важных моментов форматирования текста в HTML:

• Работа со шрифтом. Выделим несколько ключевых тегов для работы со шрифтом:

• и 一 выделение текста.
• и 一 курсив.
• 一 подчеркнутый текст.
• и 一 надстрочный индекс.