Как изменить размер шрифта в html css
Перейти к содержимому

Как изменить размер шрифта в html css

  • автор:

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

5daa1d6c7108c247887383.png

На рисунке видно что шрифт маленький

.inputer

font:bold не помогает

  • Вопрос задан более трёх лет назад
  • 12144 просмотра

2 комментария

Простой 2 комментария

megapihar6

Сергей Карвасарный @megapihar6

Как изменять размер шрифта в зависимости от размера экрана?

Всем здравствуйте!
Подскажите пожалуйста, как изящно сделать изменение шрифта для различного размера экрана?
Например:
Есть заголовок

Blabla

— на экране десктопа он выглядит вполне достойно при размере в 36px, но на телефоне он уже с трудом входит в экран (условно). Если же поставить размер в зависимость от % или от ширины vw, то из-за линейной зависимости на телефоне будет практически ничего не видно.
Гугл подсказывает, что можно в @media ставить конкретные значения (не плохой вариант) или использовать JS чтобы подгонять размер по месту.
То же касается отступов сверху, снизу.
Как вы считаете это можно сделать наиболее красиво?
Спасибо!

  • Вопрос задан более трёх лет назад
  • 45505 просмотров

Комментировать
Решения вопроса 1
Павел Радьков @paulradzkov
Дизайнер, верстальщик, начальник отдела UI

Можно поставить размер шрифта в зависимости от размеров экрана, но через calc() задавать минимальное значение.

В этом примере ( codepen.io/paulradzkov/pen/jqYqgY ) размер шрифта заголовка никогда не будет меньше 16px (1em):

Можно использовать более сложные формулы совместно с @media . Тут размер шрифта плавно меняется от 14 до 18px в диапазоне от 480 до 1024px.

@media (min-width: 480px) and (max-width: 1024px) < p < font-size: calc(14px + (18 - 14) * ( (100vw - 480px) / ( 1024 - 480) )); >>

До 480 и после 1024px размер задан жестко с использованием @media .

Но в целом это все сложно и редко нужно. Я обычно задаю размер фиксированно на двух-трёх диапазонах при помощи @media .

UPD: можно даже заставить текст максимально заполнять площадь вьюпорта codepen.io/CrocoDillon/pen/fBJxu

Как увеличить шрифт в HTML

С помощью CSS-свойства font-size можно поменять размер шрифта — увеличить или уменьшить. В зависимости от того, какой текст, предложение или фразу Вам нужно увеличить, в том месте и прописываете font-size. Основная единица измерения для шрифта это пиксели (px).

Миллиардеры рекомендуют читать, чтобы добиться успеха. Хотите стать успешными и богатыми? Прочтите книги, которые советуют Маск, Гейтс, Цукерберг, Безос и другие:

Верстальщики при создании сайта увеличивают шрифт CSS-свойством font-size. Делается это в CSS-файле вида файл.css. Код будет примерно таким:

p < font-size: 16px; >или span

Но такой код увеличит шрифт везде, где есть

или . Для точечного изменения шрифта нужно использовать классы. Если Вы не знаете, что такое классы в HTML, то, возможно, Вам будет интересен «Курс HTML за 5 дней».

С помощью пикселей указываете тот размер шрифта, который Вам нужен.

Кроме пикселей есть и другие единицы измерения шрифта. И некоторые используются очень часто.

Единицы измерения шрифта в HTML и CSS

К единицам измерения шрифта относятся px, em, rem и проценты (%).

Про px (пиксели) я уже написал. Сразу про следующие единицы.

em очень часто используется на сайтах. Это относительная единица измерения. То есть размер шрифта данного элемента задается относительно размера шрифта родительского элемента. Размер шрифта, указанный в % высчитывается точно так же (относительно размера шрифта родителя).

rem задается относительно шрифта указанного для тега . В браузере по умолчанию размер шрифта для тега равен 16px. Поэтому, если Вы укажете для какого-либо HTML-элемента шрифт равный 1rem, то это будет равнозначно 16px. А 2rem будет равнозначно 32px и т.д.

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

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

Чтобы изменить размер шрифта можно применить свойство font-size, значение которого определяет размер текста. В качестве единиц можно применять rem, так как px задают размер текста, не зависящий ни от чего, размеры в em – относительные, они определяются по текущему контексту. Единица rem задаёт размер относительно размера шрифта элемента всей веб-страницы.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *