Перейти к содержимому

Как увеличить текст на сайте

  • автор:

Как увеличить размер шрифта?

Для увеличения или уменьшения шрифта применяется стилевое свойство font-size, значение которого определяет размер текста. В качестве единиц можно применять rem; так, 1rem соответствует размеру шрифта всей веб-страницы. Таким образом, чтобы увеличить шрифт, указываем значение больше 1, например, 1.2rem, что увеличит размер текста на 20%. Ниже показано как задать размер основного текста всей веб-страницы через CSS (пример 1).

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

Аналогично определяется размер шрифта и других элементов, в частности, заголовков. В примере 2 показано как задать размер заголовка .

Пример 2. Размер заголовка

Размер текста

Заголовок

Пример текста

См. также

  • font-size
  • Единицы размера в CSS
  • Размер текста
  • Свойства шрифта в CSS

КАК УВЕЛИЧИТЬ ИЛИ УМЕНЬШИТЬ РАЗМЕР ШРИФТА В БРАУЗЕРЕ

Все популярные веб-браузеры (Google Chrome, Mozilla FireFox, Opera, Internet Explorer) снабжены функцией уменьшения или увеличения масштаба отображаемой страницы. Функция масштабирования позволяет пользователям увеличивать или уменьшать шрифт и картинки просматриваемой в браузере страницы. Это может быть полезно для людей с ослабленным зрением, а также в случаях чрезмерно высокого или низкого разрешения экрана.

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

Комбинацией клавиш и клавиатуры, совместным использованием клавиатуры и мыши. Ниже объяснение более подробно:

1 способ — с помощью клавиатуры

Стандартные комбинации клавиш для увеличения и уменьшения шрифта в любом популярном веб-браузере:

  • Зажмите клавишу «Ctrl» и нажимайте клавишу «+» для увеличения масштаба.
  • Зажмите клавишу «Ctrl» и нажимайте клавишу «-» для уменьшения масштаба.

2 способ — с помощью клавиатуры и мыши

Тоже одинаково для всех браузеров:

  • Зажмите клавишу «Ctrl» и крутите колесико мыши вверх для увеличения масштаба.
  • Зажмите клавишу «Ctrl» и крутите колесико мыши вниз для уменьшения масштаба.

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

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

 Этот шрифт будет размером в 20px 
p  font-size: 20px; > 

Как увеличить текст на сайте

У разных пользователей разные предпочтения ко всему на свете.

Одним нравится читать мелкий шрифт , другие предпочитают читать крупный .

Есть и такие, которым мелкий шрифт не позволяет читать зрение. Им нужен очень крупный шрифт.

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

Так, например, в браузере Internet Explorer такая настройка выполняется через меню Вид/Размер шрифта . Аналогичная операция в браузере Mozilla Firefox может быть выполнена при помощи клавиатурных аккордов Ctrl + + и Ctrl + — .

Когда разработчик сайта задаёт на своих страницах фиксированный размер шрифта, закрывая изменение размера в браузере, он выступает в роли Карабаса Барабаса, заставляющего марионеток плясать под свою дудку.

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

В качестве исключения из общего правила (“не фиксировать шрифт на сайте”) допускается задание шрифта в абсолютных единицах для небольших фрагментов текста в областях фиксированной ширины, например, для меню на вертикальной полосе. Однако и здесь лучшим решением будет автоматическое расширение полосы при увеличении размера шрифта. Такое подстраивание под размер шрифта можно достичь, если ширину полосы указывать в em ( 1 em примерно равно размеру текущего шрифта).

  • Типографские значения: pt (пункты), pc (пики);
  • Экранное значение: px (пикселы).
  • Геометрические значения: in (дюймы), cm (сантиметры), mm (миллиметры).

Например, текст следующего абзаца выводится при помощи кода “ < P style="font-size:6pt">Текст с размером 6 пунктов. ”.

Текст с размером 6 пунктов.

Попробуйте увеличить шрифт на этой странице при помощи браузера. Весь текст укрупнится, кроме предыдущего абзаца.

Не кодируйте размер шрифта в абсолютных единицах на своих сайтах.

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

Для размерных выделений можно безопасно использовать теги SMALL и BIG .

  • Мнемонические размеры: xx-small , x-small , small , medium , large x-large , xx-large .
  • Относительные указания: smaller , larger .
  • Указание в процентах по отношению к размеру шрифта родителя (например, font-size:150% ).

Текст следующего абзаца выводится при помощи кода “ < P style="font-size:75%">Размер шрифта на 25% меньше. ”.

Размер шрифта на 25% меньше.

Попробуйте увеличить шрифт на этой странице при помощи браузера. Текст предыдущего абзаца укрупнится также.

В классическом HTML для управления размером шрифта можно использовать атрибут size тега FONT . Этот приём кодирования также чувствителен к управлению размером шрифта в браузере.

В качестве значений атрибута можно задавать целые числа от 1 до 7:

size=1 size=2 size=3 size=4 size=5 size=6 size=7

Или числа со знаком от -2 до +4 (за 0 принимается “нормальный” размер, то есть размер, который браузер использует по умолчанию; сам 0 задавать нельзя):

size=-2 size=-1 size=+1 size=+2 size=+3 size=+4

Самое правильное — управлять размером шрифта (как и другими визуальными свойствами элементов) при помощи CSS.

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

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