От автора: приветствую вас на webformyself. Информация – это то, ради чего мы все используем интернет. Хорошо подобранный шрифт позволяет лучше воспринимать текстовую информацию, что увеличивает лояльность людей к какому-то ресурсу. Давайте сегодня разбираться, как изменить шрифт на сайте.
Стоит отметить сразу же, что под изменением текста можно понимать просто изменение его параметров, либо же изменение самого имени шрифта, после чего буквы и символы будут выглядеть абсолютно по-другому. В первом же случае он просто приобретет другой цвет, станет более жирным или курсивным.
Такие параметры меняются с помощью css-свойств для работы с текстом. Подробно о них вы можете узнать из нашего учебника по css для новичков.
А мы переходим к нашему главному на сегодня вопросу. Для таких изменений вам потребуется опять же знания css хотя бы на базовом уровне. Чтобы изменить шрифт, необходимо написать для нужного нам элемента свойство:
font-family: название;
font - family : название; |
Например, если менять вы хотите для всего сайта, то нужно искать в таблице стилей (обычно style.css) селектор body. Обычно у него задано несколько шрифтов. Тот, что стоит самым первым после двоеточия и будет использоваться в первую очередь. Если по каким-то причинам его не получилось загрузить, браузер выберет второй и так до тех пор, пока не будет найден шрифт, который доступен для использования в данный момент.
Вы должны знать, что существуют так называемые стандартные шрифты, которые есть на любой OC и их можно использовать без всяких страхов. Например, это Arial, Times New Roman, Tahoma и т.д. Для еще большей надежности после указания конкретного названия через запятую можно указать семейство шрифтов. В этом случае, если выбранное начертание не доступно, браузер выберет первый оптимальный из семейства.
font-family: Arial, "Times New Roman", sans-serif;
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, процентах и других единицах. Хорошим тоном веб-разработки считается задание размеров в относительных единицах, что текст смотрелся максимально читабельно при различных настройках размера шрифта.
Шрифт, который используют разные браузеры для отображения страниц в Интернете, имеет определённый размер - он установлен разработчиками того или иного веб-обозревателя. Как показывает практика, они выбирают оптимальный вариант, который одинаково хорошо смотрится на всех мониторах, очень удобен для восприятия той или иной информации. на странице? Многие люди задают этот вопрос. Несмотря на стандартные настройки, это всегда можно сделать.
Часто бывает так, что попадается какой-то сайт, где всё очень маленькое - информация плохо читается, следовательно, воспринимать её не совсем удобно. Ещё статья попадётся интересная - приходится сидеть перед экраном, щуриться, напрягать зрение. Возможно, дизайнер что-то не доработал, может быть, ресурс давно не обновляется, не оптимизирован под современные стандарты WEB 2.0 и широкоформатные мониторы. Кроме того, далеко не каждый человек может похвастаться идеальным зрением - в такой ситуации обязательно нужно узнать, как изменить шрифт на странице.
Причём чем проще это сделать, тем удобнее всем: и посетителю, и разработчику. Первому достаточно одного простого действия для получения желаемого эффекта, второму же можно не волноваться о том, что его информацию воспримут неверно. К примеру, при регистрации на том или ином портале почти всегда нужно вводить цифры с картинок - для подтверждения своей «человечности». Иногда даже на крупных изображениях трудно разобрать текст или цифры, а если ещё есть какие-то проблемы со зрением, без увеличения точно не обойтись.
Существует два способа, с помощью которых можно как увеличить шрифт "В Контакте" на странице, так и изменить его на любом другом ресурсе сети. Они настолько просты, что пользователь может даже не понять, как именно произошло увеличение.
Интересная особенность заключается в том, что с помощью этих лёгких приёмов шрифт в браузерах изменяется навсегда (что сохраняется в настройках) - вернуть его к начальным значениям не получится, даже если перезапустить веб-обозреватель (или перезагрузить компьютер). Чтобы обратить свои действия, нужно использовать комбинацию Ctrl + 0. Исключением являются только Safari и Opera - размеры текста здесь меняются лишь временно, при следующем включении они восстанавливаются до исходного значения, установленного разработчиками. Так как увеличить шрифт на странице?
Если с увеличением всё ясно, то для чего может потребоваться возможность уменьшения шрифта? На самом деле здесь нет ничего сверхъестественного: предположим, разрешение вашего монитора не слишком велико, то есть при посещении некоторых ресурсов в нижней части экрана появляется полоса горизонтальной прокрутки. Такое часто происходит из-за того, что разработчики сайтов как бы по умолчанию считают, что большинство интернет-пользователей владеют большими мониторами, следовательно, нет острой необходимости совершенствовать вёрстку для маленьких дисплеев. Уменьшить шрифт на странице в такой ситуации будет очень полезно - полоса горизонтальной прокрутки исчезнет, восприятие информации улучшится. Особенно если речь идет о различной графике - всё-таки не очень приятно, когда какое-либо изображение не умещается в рамках экрана.
Достаточно нажать на клавиатуре Ctrl и прокрутить колесо мышки на один щелчок от себя (или на себя). В первом случае шрифт увеличится на одно значение, во-втором - уменьшится. Главное - потом всё вернуть на место, чтобы в будущем не возникло путаницы. Особенность такого способа в том, что происходит не просто увеличение или уменьшение текста - весь масштаб страницы меняется, картинки становятся больше, как и элементы интерфейса. Одним словом, люди со слабым зрением будут в восторге.
Как увеличить шрифт на странице "Яндекса"? Легко! Достаточно нажать и удерживать Ctrl на клавиатуре, а после - кнопку "плюс" (+) или "минус" (-). Размер шрифтов также будет увеличиваться или уменьшаться (впрочем, как и весь масштаб странички).
Пользователи часто используют первый способ, при этом даже не замечают этого - для этого достаточно случайно зажать кнопку Ctrl. Лишь в Safari и Opera данный способ работать не будет.
Создатели популярной социальной сети с самого начала думали об удобстве своих пользователей. Людей со слабым зрением они также решили не обделять вниманием - в один прекрасный момент появилась чудесная функция, с помощью которой можно в один клик сделать так, чтобы текст был более крупным и оставался таким всегда, даже если зайти на сайт с другого компьютера: видимо, на повестке дня стоял вопрос о том, как увеличить шрифт на странице. Изменениям подвергается вообще все текстовые фрагменты: личные сообщения, посты на стенах, комментарии, сервисные странички.
Чтобы активировать эту опцию, достаточно зайти в раздел «Настройки», промотать вкладку «Общее» вниз, отметить чекбокс (поставить галочку) «Использовать увеличенные шрифты». Вот и всё - это один из лучших ответов на вопрос о том, как увеличить шрифт "В Контакте" на странице. Если раньше были какие-то трудности с восприятием информации, теперь всё изменится в лучшую сторону. Но если и этого приёма недостаточно, рекомендуется обязательно воспользоваться советами, которые рассматривались выше.
Если вы считаете, что все рекомендации о том, как увеличить шрифт на странице, малоэффективны, придётся использовать глубокую настройку своего веб-обозревателя. У любого браузера есть панель управления, где можно контролировать если не все показатели, то очень многие. Необходимо найти раздел, где есть опции, связанные с размерами и шрифтами, и задать параметры, которые оптимально подойдут именно для вас.
Инструкция
Текстовые редакторыТипичные элементы управления показаны на скриншоте.
Для того чтобы на странице
, выделите мышкой фрагмент текста, и выберите нужную опцию на панели инструментов. Затем снимите выделение, чтобы увидеть результат.
Как правило, текстовые редакторы позволяют изменить тип шрифта, настроить его размер, дают возможность выделить текст с помощью жирного или курсива, изменить выравнивание, а также задать определенный цвет.Такие «продвинутые» редакторы как Microsoft Word имеют больше возможностей. Например, если вам нужно изменить текст чтобы он выглядел как на образце, используйте опцию «формат по ». Для этого выделите (можно из другого файла), нажмите одноименную кнопку похожую на желтую кисточку и «покрасьте» ею текст который нуждается в форматировании. Чтобы сделать подзаголовки или примечания одинаковыми используйте специально предназначенные для этого стили, которые выбираются из раскрывающегося списка.
В простых редакторах, возможности более скудные. Например, Блокнот, ограниченный текстовым форматом, позволяет изменить только несколько опций, причем только для вашего компьютера (изменения ) и только для всего документа сразу. Чтобы получить доступ к опциям раскройте меню «Формат» и выберите «Шрифт».
Графические редакторыГрафические редакторы, такие как Photoshop или Corel могут работать с текстом в двух режимах: как традиционный текстовый редактор и как с картинкой. Чтобы заставить графический редактор Photoshop воспринимать текст как картинку, выберите в меню «Слой» – «Растрировать текст». Например, это может потребоваться для наложения сложных эффектов. При этом вы потеряете возможность редактировать текст обычным способом. К сожалению, преобразовать его в обратном направлении нельзя. Если нужно поменять на странице текст в виде картинки, его следует закрасить и написать новый.
Форумы и комментарииЧасто на досках объявлений, у форм для комментариев к статьям, и даже на некоторых форумах нет специальных кнопок, с помощью которых можно менять шрифт. Тем не менее, вы с легкостью можете поменять его с помощью BB-кодов, и тем самым выгодно выделить свое сообщение. Например, чтобы сделать шрифт оберните его тегами [b]Ваш текст.Полный «джентльменский набор» BB-кодов так:тип шрифта
размер
цвет – (blue, purple, orange, yellow, gray, green)
[b]жирное выделение
[i]наклонный (курсив)
[u]подчеркнутый
[c]выравнивание по центру
Коды можно совмещать:
[b][c]жирный, по центру, 18 кегль
БраузерыМногие веб- позволяют настраивать шрифты по своему усмотрению. Если вы хотите сами настроить шрифты на страницах «под себя», найдите в настройках браузера соответствующие опции. В зависимости от браузера можно настроить размер, тип шрифта, цвет ссылок и т.п.Google Chrome: раскройте меню, отмеченное гаечным ключом, выберите «Параметры», затем откройте пункт «Расширенные» и найти кнопку «Настроить шрифты».
Opera: В «Меню» нажмите «Настройки», а затем – «Общие настройки». Параметры шрифтов в этом браузере можно изменить на вкладке «Веб-страницы».
Mozilla Firefox: «Инструменты» – «Настройки» – «Содержимое».
Internet Explorer: Войдите в меню «Сервис», откройте «Свойства обозревателя», затем в «Общие» выберите – «Представление».
Здравствуйте. В интернете иногда можно попасть на такой сайт, на котором встречается мелкий шрифт. И для того чтобы прочитать новость, информацию приходится напрягать зрение, особенно людям, у которых оно не стопроцентное. Владельцы подобных ресурсов как-то забывают об удобстве пользователей на сайте, человек должен открыть страницу и без особых проблем познакомиться с изложенным материалом. Поэтому очень важно, чтобы размер шрифта на сайте был удобным для его восприятия, особенно для людей с нарушением зрения.
Если перешли на ресурс, где для вас мелкий текст, вы сможете увеличить его (изменить масштаб) средствами браузера, которым вы пользуетесь. Сегодня мы вкратце рассмотрим, как это сделать в наиболее популярных браузерах. А в конце узнаем, как с помощью клавиатуры и мышки.
Если вы являетесь пользователем этого браузера, то для увеличения шрифта на сайте нужно сделать следующее:
Открываем основное меню Хрома (1) и в пункте «Масштаб», нажимаем на «плюс» (2)
C каждым последующим нажатием масштаб будет увеличиваться на 10, 25, 50%. Таким способом вы сможете добиться чтобы шрифт был читаемым для вас. И спокойно могли изучить материал на сайте.
Для того, чтобы уменьшить, нажмем на «минус» (3). Повторные нажатия соответственно будут уменьшать масштаб страницы.
Для перехода в полноэкранный режим нажмите (4) или используйте горячую клавишу «F11». В таком режиме страница открывается в полный экран - пропадает строка поиска (адресная строка) с кнопками установленных расширений, панель закладок. Это позволит более удобно изучать статью. Для возврата в обычный режим нужно повторно нажать «F11».
Кроме того, браузер запоминает какой был масштаб на странице перед закрытием. Предположим, вы зашли на сайт, увеличили шрифт, прочитали статью и закрыли. При следующем открытии этой же страницы она откроется уже с теми настройками шрифта, которые были перед тем как вы ее закрывали.
Это свойство - запоминание размера масштаба - поддерживают почти все популярные браузеры.
Теперь вы знаете, как в google chrome увеличить шрифт и сделать приятным чтение материала.
Поскольку процесс увеличение размера шрифта почти одинаков во всех браузерах, мы лишь пробежимся по ним и покажем где расположены настройки масштаба. Поехали.
Открываем главное меню, и они перед нами
Здесь все то же самое.
Тут также все через Главное меню.
Ничего нового, все, как и везде. Главное меню, пункт Вид
Это мы рассмотрели возможность изменения масштаба с помощью настроек браузера. Но это не всегда удобно, постоянно заходить в Основное меня и там менять настройки. А как еще можно увеличить размер шрифта на сайте? С помощью клавиатуры и мышки.
Клавиатура . Увеличить текст на странице нам поможет клавиша CTRL. Нажимаем и не отпуская ее добавляем клавишу «+» (CTRL + «+»). Масштаб будет увеличиваться. Используя это сочетание можно добиться комфортного размера шрифта. Соответственно CTRL + «-» - уменьшает размер слов. Чтобы быстро перейти к 100% достаточно нажать комбинацию клавиш - CTRL + 0 .
C помощью мышки . Тут снова не обойтись без CTRL и ее помощницы - колесико мышки. Нажимаем CTRL и начинаем крутить колесо мыши: от себя (вперед) - шрифт делается крупнее, назад (к себе) - уменьшается.
Вот основные принципы того, как увеличить шрифт на странице. В конце хочется добавить. Следите за временем работы перед монитором. Старайтесь каждые 2 часа , . Дайте глазам отдохнуть минут 5. Зрение не купишь. Берегите его.
Умный артист — это тот, кто понимает, что им манипулирует пресса, и манипулирует прессой в ответ.
Уже давно стал основной программой для рядового пользователя. Сейчас браузер используют не только для просмотра веб-страниц, но и для отправки почты, редактирования документов, чтения книг и т.д.
В такой ситуации не редко возникает необходимость увеличить шрифт в браузере. Ведь долго работать с мелким текстом довольно утомительно. В этом материале мы расскажем о том, как увеличить шрифт в браузере Google Chrome, Mozilla Firefox, Opera, Internet Explorer и других.
Для уменьшения или увеличения шрифта в браузере лучше всего использовать клавиатуру. Существуют такие комбинации клавиш, которые работают в , Mozilla Firefox, Opera и Internet Explorer.
CTRL и клавиша «+» – зажав клавиши CTRL и «+» на вы увеличите шрифт в браузере. При этом пользователь может использовать клавишу «+» как на основной, так и на дополнительной (Num) клавиатуре.
CTRL и клавиша «-» – использовав комбинацию клавиш CTRL и «-» вы уменьшите шрифт в браузере. Пользователь может использовать клавишу «-» как на основной, так и на дополнительной клавиатуре.
CTRL и колесико мышки – вы можете зажать клавишу CTRL и двигать колесиком мышки. Таким образом, вы сможете быстро уменьшить или увеличить шрифт браузера до нужной вам величины.
CTRL и клавиша «0» – данная комбинация клавиш используется для сброса масштаба увеличения страницы в браузере. Использовав данную комбинацию вы вернетесь к оригинальному размеру шрифта в браузере. Пользователь может использовать клавишу «0» (ноль) как на основной, так и на дополнительной клавиатуре. Данная комбинация клавиш работает во всех популярных браузерах (Google Chrome, Mozilla Firefox, Opera) кроме .
Другие способы увеличения шрифта в браузере
Также вы можете увеличить шрифт с помощью меню браузера.
В браузере Google Chrome это можно сделать в основном меню программы. Для этого достаточно открыть основное меню (кнопка в правом верхнем углу программы) и нажать на кнопку «+», если вы хотите увеличить шрифт, или на кнопку «-», если вы хотите уменьшить шрифт.
В браузере Opera шрифт увеличивается и уменьшается аналогичным способом. Откройте меню программы (кнопка «Opera» в верхнем левом углу) и используйте кнопки «+» и «-».
В браузере Mozilla Firefox для того чтобы уменьшить или увеличить шрифт необходимо нажать на кнопку ALT на клавиатуре и после того как появится меню, открыть «Вид – Масштаб». Здесь можно будет увеличить, уменьшить или сбросить размер шрифта.
В браузере Internet Explorer для того чтобы уменьшить или увеличить шрифт нужно открыть основное меню программы (кнопка в правом верхнем углу программы) и выбрать пункт «Масштаб».
Также в Internet Explorer можно нажать на клавишу ALT и в появившемся меню открыть «Вид – Масштаб».
