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

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

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

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

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

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

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

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

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

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

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

Размер шрифта и масштаб страниц — увеличьте размер веб-страниц

Управление масштабом позволяют увеличить или уменьшить либо размер целой веб-страницы либо просто размер всего текста в целях улучшения читабельности. Мы объясним, как это работает.

Оглавление

• 1 Увеличение и уменьшение масштаба веб-сайта
• 2 Изменение масштабирования пальцами
• 3 Как изменить только размер текста
• 4 Как установить масштаб по умолчанию для всех сайтов
• 5 Установка минимального размера шрифта

Увеличение и уменьшение масштаба веб-сайта

Вот как вы можете увеличивать и уменьшать масштаб отдельных веб-сайтов.

1. Щёлкните по кнопке меню с правой стороны. Откроется меню Firefox и внизу вы увидите управление масштабом.
2. Используйте кнопку + для увеличения масштаба и кнопку — для его уменьшения. Число в середине отображает текущий уровень масштабирования – щёлкните по нему, чтобы сбросить масштаб на на уровень масштабирования по умолчанию. Вы также можете видеть текущий уровень масштабирования в адресной строке:

Клавиатурные сочетания: Вы также можете использовать управление масштабом без помощи мыши. Нажав и удерживая Command Ctrl , нажмите &#43 для увеличения масштаба, — для уменьшения масштаба или 0 для его сброса.

Уровень масштабирования сохраняется для каждого домена, даже после закрытия Firefox. Например, все страницы на support.mozilla.org отображаются с одинаковыми настройками масштабирования, но он отличается от настроек масштабирования страниц на blog.mozilla.org.

Изменение масштабирования пальцами

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

Щипковое действие в настоящее время поддерживается в Windows и Linux через сенсорный экран и высокоточные тачпады, а также на тачпадах Mac.

Как изменить только размер текста

Вместо того, чтобы изменять масштаб всей страницы, вы можете просто изменить размер текста.

1. Нажмите на клавишу Alt для временного переключения в традиционные меню Firefox. На панели меню в верхней части экрана щёлкните Вид , затем выберите подменю Масштаб .
2. Выберите Только текст , что заставит Firefox изменить размер текста, а не изображений.

Как установить масштаб по умолчанию для всех сайтов

Вы можете увеличить или уменьшить размер всего веб-контента следующим образом:

1. На Панели меню в верхней части экрана нажмите Firefox и выберите Настройки . Нажмите кнопку меню и выберите Настройки .
2. В панели Основные перейдите к разделу Язык и внешний вид.
3. Под разделом Масштаб используйте раскрывающееся меню Масштаб по умолчанию, чтобы выбрать уровень масштабирования для всех страниц. Firefox запомнит индивидуальные уровни масштабирования сайта, которые вы установили.
   • Чтобы установить уровень масштабирования только для текста, установите флажок Только текст.
4. Закройте страницу Настройки . Любые внесённые изменения будут сохранены автоматически.

Установка минимального размера шрифта

Вы можете настроить Firefox на использование минимального размера шрифта при отображении всего текста. Если веб-страница содержит текст, размер которого меньше, Firefox увеличит размер шрифта текста до этого минимума.

1. На Панели меню в верхней части экрана нажмите Firefox и выберите Настройки . Нажмите кнопку меню и выберите Настройки .
2. В панели Основные перейдите к разделу Язык и внешний вид.
3. В разделе Шрифты нажмите Дополнительно… .
4. В выпадающем меню Наименьший размер шрифта, выберите минимальный размер в пикселях, в котором должен отображаться весь текст.
5. Щёлкните OK , чтобы сохранить изменения.

Для получения дополнительной информации прочитайте статью Изменение шрифтов и цветов, используемых веб-сайтами.

Эти прекрасные люди помогли написать эту статью:

Как изменить размер и стиль шрифта на сайте

Рассмотрим один из вариантов изменения дизайна сайта, такой как изменение стиля шрифта и его размера в блоках.

• Изменение размера шрифта
• Изменение стиля шрифта

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

Например, увеличим шрифт комментария в форме обратного звонка (рис. 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»
• Тема дизайна
• Цветовая схема
• Фон дизайна

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

От автора: приветствую вас на webformyself. Информация – это то, ради чего мы все используем интернет. Хорошо подобранный шрифт позволяет лучше воспринимать текстовую информацию, что увеличивает лояльность людей к какому-то ресурсу. Давайте сегодня разбираться, как изменить шрифт на сайте.

Как менять параметры

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

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

Как менять шрифты

А мы переходим к нашему главному на сегодня вопросу. Для таких изменений вам потребуется опять же знания css хотя бы на базовом уровне. Чтобы изменить шрифт, необходимо написать для нужного нам элемента свойство:

font — family : название ;

Например, если менять вы хотите для всего сайта, то нужно искать в таблице стилей (обычно style.css) селектор body. Обычно у него задано несколько шрифтов. Тот, что стоит самым первым после двоеточия и будет использоваться в первую очередь. Если по каким-то причинам его не получилось загрузить, браузер выберет второй и так до тех пор, пока не будет найден шрифт, который доступен для использования в данный момент.

Вы должны знать, что существуют так называемые стандартные шрифты, которые есть на любой OC и их можно использовать без всяких страхов. Например, это Arial, Times New Roman, Tahoma и т.д. Для еще большей надежности после указания конкретного названия через запятую можно указать семейство шрифтов. В этом случае, если выбранное начертание не доступно, браузер выберет первый оптимальный из семейства.

font — family : Arial , «Times New Roman» , sans — serif ;

В этом примере сначала будет подставлен шрифт Arial. Если он найден, то именно он будет использоваться. Если нет, то браузер будет искать Times New Roman. Кстати, обратите внимание на то, что если название шрифта состоит из нескольких слов. Его нужно заключать в двойные кавычки.

Через запятую мы указали семейство шрифтов “без засечек”. На всякий случай. Также существуют такие: serif (с засечками), cursive (курсивные), monospace (моноширинные), fantasy (декоративные). Каждое семейство для своих целей. Например, основной шрифт для чтения информации лучше выбирать без засечек.

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

Как загрузить новый шрифт на сайт?

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

Собственно, способов добавить новые шрифты на сайт я вижу два:

Использовать сервис Google Fonts. Тут вы можете выбрать понравившийся шрифт и очень быстро подключать его к сайту. В таком случае никаких дополнительных папок вам подключать не нужно – все будет грузиться из хранилища сервиса, но при этом немного будет уменьшаться скорость загрузки. Поэтому я и не советую вам подключать слишком много. Максимум – 3-4 шрифта.

На скриншоте вы можете видеть, какую кнопку нужно нажать для быстро использования шрифта. Также, если он вам понравился, можно добавить к себе в коллекцию, чтобы не потерять.

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

После этого вы можете использовать шрифт через font-face, сервис подскажет вам, как правильно писать его название.

Способ второй: Закачать на сайт и подключить через @font-face. В css есть специальный синтаксис, который позволяет подключить новые шрифты. Для этого их сначала нужно закачать в какую-нибудь директорию на вашем сайте. Я советую создать новую – fonts. Также такая директория уже может быть у вас, тогда просто скидываем в нее папку с файлами. Где ее взять? Ну конечно, качаем все нужные шрифты в интернете, где же еще.

Хотел бы отметить, что для кроссбраузерного отображения, файл должен быть как минимум в нескольких форматах. А именно, ttf, woff, eot. На скриншоте вы можете увидеть типичный пример подключения:

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

Теперь везде, где нужно поставить этот шрифт, просто копируем строчку с font-family и ставим. Разумно будет дописать пару более простых шрифтов через запятую.

Размер и другие параметры

Ну а как изменить размер шрифта на сайте? За это отвечает свойство font-size и ему можно указывать значения в пикселах, относительных единицах em, процентах и других единицах. Хорошим тоном веб-разработки считается задание размеров в относительных единицах, что текст смотрелся максимально читабельно при различных настройках размера шрифта.

То есть для тела страницы задается font-size: 100%, а всем остальным элементам он задается в относительных единицах em. Например, если вы хотите, чтобы заголовки первого уровня были в 3 раза больше обычного размера текста на странице, пропишите: