КАК УВЕЛИЧИТЬ ИЛИ УМЕНЬШИТЬ РАЗМЕР ШРИФТА В БРАУЗЕРЕ
Все популярные веб-браузеры (Google Chrome, Mozilla FireFox, Opera, Internet Explorer) снабжены функцией уменьшения или увеличения масштаба отображаемой страницы. Функция масштабирования позволяет пользователям увеличивать или уменьшать шрифт и картинки просматриваемой в браузере страницы. Это может быть полезно для людей с ослабленным зрением, а также в случаях чрезмерно высокого или низкого разрешения экрана.
Возможно, кто-то случайно изменил размер, а теперь не знает как вернуть обратно. Существуют несколько способов того, как можно изменить размер шрифта и картинок в браузере:
Комбинацией клавиш и клавиатуры, совместным использованием клавиатуры и мыши. Ниже объяснение более подробно:
1 способ — с помощью клавиатуры
Стандартные комбинации клавиш для увеличения и уменьшения шрифта в любом популярном веб-браузере:
- Зажмите клавишу «Ctrl» и нажимайте клавишу «+» для увеличения масштаба.
- Зажмите клавишу «Ctrl» и нажимайте клавишу «-» для уменьшения масштаба.
2 способ — с помощью клавиатуры и мыши
Тоже одинаково для всех браузеров:
- Зажмите клавишу «Ctrl» и крутите колесико мыши вверх для увеличения масштаба.
- Зажмите клавишу «Ctrl» и крутите колесико мыши вниз для уменьшения масштаба.
Размер шрифта и масштаб страниц — увеличьте размер веб-страниц
Управление масштабом позволяют увеличить или уменьшить либо размер целой веб-страницы либо просто размер всего текста в целях улучшения читабельности. Мы объясним, как это работает.
Оглавление
- 1 Увеличение и уменьшение масштаба веб-сайта
- 2 Изменение масштабирования пальцами
- 3 Как изменить только размер текста
- 4 Как установить масштаб по умолчанию для всех сайтов
- 5 Установка минимального размера шрифта
Увеличение и уменьшение масштаба веб-сайта
Вот как вы можете увеличивать и уменьшать масштаб отдельных веб-сайтов.
- Щёлкните по кнопке меню
с правой стороны. Откроется меню Firefox и внизу вы увидите управление масштабом. 
- Используйте кнопку + для увеличения масштаба и кнопку — для его уменьшения. Число в середине отображает текущий уровень масштабирования – щёлкните по нему, чтобы сбросить масштаб на на уровень масштабирования по умолчанию. Вы также можете видеть текущий уровень масштабирования в адресной строке:
Клавиатурные сочетания: Вы также можете использовать управление масштабом без помощи мыши. Нажав и удерживая Command Ctrl , нажмите + для увеличения масштаба, — для уменьшения масштаба или 0 для его сброса.
Уровень масштабирования сохраняется для каждого домена, даже после закрытия Firefox. Например, все страницы на support.mozilla.org отображаются с одинаковыми настройками масштабирования, но он отличается от настроек масштабирования страниц на blog.mozilla.org.
Изменение масштабирования пальцами
Эта функция позволяет пользователям увеличивать и уменьшать масштаб страниц одним движением пальца, не влияя на макет страницы.
Щипковое действие в настоящее время поддерживается в Windows и Linux через сенсорный экран и высокоточные тачпады, а также на тачпадах Mac.
Как изменить только размер текста
Вместо того, чтобы изменять масштаб всей страницы, вы можете просто изменить размер текста.
- Нажмите на клавишу Alt для временного переключения в традиционные меню Firefox. На панели меню в верхней части экрана щёлкните Вид , затем выберите подменю Масштаб .
- Выберите Только текст , что заставит Firefox изменить размер текста, а не изображений.
Как установить масштаб по умолчанию для всех сайтов
Вы можете увеличить или уменьшить размер всего веб-контента следующим образом:
- На Панели меню в верхней части экрана нажмите Firefox и выберите Настройки . Нажмите кнопку меню и выберите Настройки .
- В панели Основные перейдите к разделу Язык и внешний вид.
- Под разделом Масштаб используйте раскрывающееся меню Масштаб по умолчанию, чтобы выбрать уровень масштабирования для всех страниц. Firefox запомнит индивидуальные уровни масштабирования сайта, которые вы установили.
- Чтобы установить уровень масштабирования только для текста, установите флажок Только текст.
- Закройте страницу Настройки . Любые внесённые изменения будут сохранены автоматически.
Установка минимального размера шрифта
Вы можете настроить Firefox на использование минимального размера шрифта при отображении всего текста. Если веб-страница содержит текст, размер которого меньше, Firefox увеличит размер шрифта текста до этого минимума.
- На Панели меню в верхней части экрана нажмите Firefox и выберите Настройки . Нажмите кнопку меню и выберите Настройки .
- В панели Основные перейдите к разделу Язык и внешний вид.
- В разделе Шрифты нажмите Дополнительно… .
- В выпадающем меню Наименьший размер шрифта, выберите минимальный размер в пикселях, в котором должен отображаться весь текст.
- Щёлкните OK , чтобы сохранить изменения.
Для получения дополнительной информации прочитайте статью Изменение шрифтов и цветов, используемых веб-сайтами.
Эти прекрасные люди помогли написать эту статью:
Изменение размера шрифта или масштаба веб-страниц в Safari
В Safari 10 в ОС macOS Sierra можно настроить размер шрифта или масштаб, чтобы лучше видеть страницы.
Изменение размера шрифта
- Чтобы увеличить размер шрифта, нажмите клавиши Option-Command-Плюс (+)
- Чтобы уменьшить размер шрифта, нажмите клавиши Option-Command-Минус (-)
Или можно открыть меню «Вид» и, удерживая клавишу Option, выбрать «Увеличить текст» или «Уменьшить текст».
Изменение масштаба
Можно увеличить или уменьшить масштаб страниц (текста и изображений), просматриваемых в Safari в ОС macOS Sierra. Safari будет помнить настройки, пока не будет очищена история.
- Чтобы увеличить масштаб, нажмите клавиши Command-Плюс (+)
- Чтобы уменьшить масштаб, нажмите клавиши Command-Минус (-)
Или откройте меню «Вид» и выберите «Увеличить» или «Уменьшить».
Очистка истории с сброс размера шрифта и масштаба
Если очистить историю Safari, для веб-сайтов восстановится размер шрифтов или масштаб по умолчанию.
В меню «История» выберите «Очистить историю». Затем еще раз щелкните «Очистить историю».
Информация о продуктах, произведенных не компанией Apple, или о независимых веб-сайтах, неподконтрольных и не тестируемых компанией Apple, не носит рекомендательного или одобрительного характера. Компания Apple не несет никакой ответственности за выбор, функциональность и использование веб-сайтов или продукции сторонних производителей. Компания Apple также не несет ответственности за точность или достоверность данных, размещенных на веб-сайтах сторонних производителей. Обратитесь к поставщику за дополнительной информацией.
Как изменить размер и стиль шрифта на сайте
Рассмотрим один из вариантов изменения дизайна сайта, такой как изменение стиля шрифта и его размера в блоках.
- Изменение размера шрифта
- Изменение стиля шрифта
Изменение размера шрифта
Например, увеличим шрифт комментария в форме обратного звонка (рис. 1).
Рисунок 1.
В нашем случае название класса col-xs, копируем его, и далее необходимо перейти в панели администрирования в пункт меню «Мои сайты» — «Редактировать» — вкладка «Параметры», раздел «CSS», и прописать стиль для класса следующим образом:
Свойство, отвечающее за размер шрифта: font-size
Указывать размер будем в пикселях (px).
В результате для того, чтобы прописать шрифт размером 20 px, в Редакторе файла стилей, необходимо прописать следующее (рис. 2):
span.col-xs font-size: 20px;
>
Рисунок 2.
Сохраняем новые стили в Редакторе и проверяем, применились ли изменения в клиентской части (рис. 3).
Рисунок 3.
Для остальных элементов сайтов изменения производятся аналогичным образом: необходимо найти соответствующий класс элемента с помощью команды F12 в браузере и изменить его стили. Подробнее — в статье Работа с CSS.
Изменение стиля шрифта
Например, у вас есть название шрифта, который вам нравится, и вы хотели бы, чтобы на вашем сайте тексты отображались в том же шрифте.
Как в этом случае применить новый шрифт на сайте? Сначала выясним платный или бесплатный выбранный вами шрифт. Ищем по названию шрифта на бесплатных сайтах, например, http://www.ofont.ru/.
Если шрифт среди бесплатных не нашли, то продолжаем поиск на платных сайтах:
Рассмотрим оба варианта:
Бесплатный шрифт
1 вариант
Переходим на сайт google.com по адресу: http://www.google.com/fonts и выбираем нужный шрифт из списка (рис. 4). 1 — в строке поиска вводим название нужного шрифта, 2 — выбираем шрифт.
Рисунок 4.
На странице шрифта представлены несколько его разных стилей — разной жирности и с применением курсива. С помощью кнопки «Select this style» выбираем нужный нам вариант (рис. 5).
Рисунок 5.
После выбора стилей, копируем код для встраивания шрифтов на сайт — вариант «Link» (рис. 6).
Рисунок 6.
Скопированный код нужно разместить на сайте в каком-то статическом блоке, например — RightBottom (рис. 7).
Рисунок 7.
Далее в Редакторе файла стилей прописываем классы или элементы, для которых хотите применить стиль.
.col-xs font-family: ‘Roboto’, sans-serif;
>
В результате получаем (рис. 8):
Рисунок 8.
Заметка
Если Вам необходимо изменить полностью шрифт на сайте для всех блоков и всех элементов, то в Редакторе файла стилей прописываем следующим образом:
body font-family: ‘Roboto’, sans-serif;
>
Если на сайте google не нашли нужного шрифта, то данный способ не подходит.
2 вариант
1) Скачиваете файлы шрифта.
Для поиска нужного бесплатного шрифта подойдет сайт http://www.ofont.ru/
Как правило, это файлы с расширениями .eot, .otf, .svg, .ttf, .woff (рис. 9).
Рисунок 9.
Заметка
При скачивании бесплатного шрифта, как правило, загружается только один файл с расширением .ttf. Для того, чтобы получить прочие файлы, существуют специальные сервисы конвертеры. Например, один из таких сервисов: http://www.font2web.com/
Вы загружаете только файл .ttf в конвертер по адресу http://www.font2web.com/, затем скачиваете все 5 файлов, которые отображены на рисунке 9, необходимых для подключения шрифта.
Далее файлы необходимо загрузить либо в корень сайта, либо в отдельную папку в файлах сайта.
Для магазина в облаке: так как в облаке доступ к исходному коду не предоставляется, файлы шрифта необходимо будет выслать в техническую поддержку на support@advantshop.net, с просьбой загрузить в соответствующий раздел. Например, создать папку fonts в корне сайта.
Для магазина на лицензии: файлы Вы загружаете самостоятельно на хостинг, где установлен сайт, в соответствующую папку с файлами сайта.
2) После того как файлы загружены, в Редакторе файла стилей необходимо подключить данные файлы следующим образом:
@font-face font-family: ‘OpenSans-Bold’;
src: url(«../fonts/OpenSans-Bold/OpenSans-Bold.eot»);
src: url(«../fonts/OpenSans-Bold/OpenSans-Bold.eot») format(’embedded-opentype’),
url(«../fonts/OpenSans-Bold/OpenSans-Bold.woff») format(‘woff’),
url(«../fonts/OpenSans-Bold/OpenSans-Bold.ttf») format(‘truetype’),
url(«../fonts/OpenSans-Bold/OpenSans-Bold.svg») format(‘svg’);
>
В скобках атрибута url указывается путь к файлу в файлах сайта.
Важно
font-face — это не класс, искать на сайте его не нужно.
Прописать в Редакторе файла стилей необходимо именно так, как указано, изменив только пути к файлам.
Далее, для того чтобы применить шрифт для какого-либо блока на сайте, необходимо в стилях элемента прописать стиль: font-family: ‘OpenSans-Bold’;
То есть следующим образом:
.col-xs font-family: ‘OpenSans-Bold’;
>
Заметка
Если Вам необходимо изменить полностью шрифт на сайте для всех блоков и всех элементов, то в Редакторе файла стилей прописываем следующим образом:
body font-family: ‘OpenSans-Bold’
>
Платный шрифт
1) Приобретаете шрифт и получаете файлы шрифта. Приобрести шрифт можно на подобных сервисах:
http://www.myfonts.com/
https://www.linotype.com/
Как правило, это файлы с расширениями .eot, .otf, .svg, .ttf, .woff (рис. 10).
Рисунок 10.
Заметка
Если при скачивании Вы обнаружили только один файл с расширением .ttf, то для того чтобы получить прочие файлы, существуют специальные сервисы — конвертеры. Например, один из таких сервисов: http://www.font2web.com/
Вы загружаете только файл .ttf в конвертер по адресу http://www.font2web.com/ , затем скачиваете все 5 файлов, которые отображены на рисунке 10, необходимых для подключения шрифта.
Далее файлы необходимо загрузить либо в корень сайта, либо в отдельную папку в файлах сайта.
Для магазина в облаке: так как в облаке доступ к исходному коду не предоставляется, файлы шрифта необходимо будет выслать в техническую поддержку на support@advantshop.net, с просьбой загрузить в соответствующий раздел. Например, создать папку fonts в корне сайта.
Для магазина на лицензии: файлы Вы загружаете самостоятельно на хостинг, где установлен сайт, в соответствующую папку с файлами сайта.
2) После того как файлы загружены, в Редакторе файла стилей необходимо подключить данные файлы следующим образом:
@font-face font-family: ‘OpenSans-Bold’;
src: url(«../fonts/OpenSans-Bold/OpenSans-Bold.eot»);
src: url(«../fonts/OpenSans-Bold/OpenSans-Bold.eot») format(’embedded-opentype’),
url(«../fonts/OpenSans-Bold/OpenSans-Bold.woff») format(‘woff’),
url(«../fonts/OpenSans-Bold/OpenSans-Bold.ttf») format(‘truetype’),
url(«../fonts/OpenSans-Bold/OpenSans-Bold.svg») format(‘svg’);
>
В скобках атрибута url указывается путь к файлу в файлах сайта.
Важно
font-face — это не класс, искать на сайте его не нужно.
Прописать в Редакторе файла стилей необходимо именно так, как указано, изменив только пути к файлам.
Далее, для того чтобы применить шрифт для какого-либо блока на сайте, необходимо в стилях элемента прописать стиль: font-family: ‘OpenSans-Bold’;
То есть следующим образом:
.col-xs font-family: ‘OpenSans-Bold’;
>
Заметка
Если Вам необходимо изменить полностью шрифт на сайте для всех блоков и всех элементов, то в Редакторе файла стилей прописываем следующим образом:
body font-family: ‘OpenSans-Bold’
>
Другие статьи по теме
- Добавление карты на страницу «Контакты»
- Модуль «Карусель PRO»
- Тема дизайна
- Цветовая схема
- Фон дизайна