Работа с шрифтами в Joomla

Работа с шрифтами в Joomla

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

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

Шрифт, как и дизайн страницы, формируется шаблоном, то есть в стилях шаблона, как правило, указано кокой шрифт и какого размера используется для определенного блока или группы блоков. Соответственно, если Вас интересует вопрос, как изменить шрифт в joomla? Ответ достаточно прост, необходимо открыть используемый файл стилей, найти селектор элемента, шрифт которого необходимо изменить и отредактировать правила CSS, или добавить недостающие.

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

Хотите узнать, как создать собственный шаблон на CMS Joomla с нуля

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

Узнать подробнее

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

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

Если опустить ползунок скролла на вкладке “Стиль” по ниже, мы найдем определение семейства шрифтов.

Теперь мы знаем, где описаны интересующие стили, а значит, мы можем их отредактировать. Поэтому открываем файл layout.css, который располагается в папке активного шаблона по адресу \templates\beez3\css. И для начала определим семейство шрифтов (строка 13).

body#shadow {
font-family: Curier,sans-serif
}

Затем изменим размер шрифта (строка 56).

body p,body ol,body ul,body dl,body address {
margin-bottom: 1.5em;
font-size: 1.3em;
line-height: 1.8em;
}}

Сохранив изменения, мы увидим следующий результат в браузере.

Хотите узнать, как создать собственный шаблон на CMS Joomla с нуля

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

Узнать подробнее

Помимо этого, очень часто начинающие веб-мастера задаются вопросом, как изменить цвет шрифта на сайте джумла. Опять же, изначально цвет шрифта определен и его просто нужно отредактировать. По структуре шаблона Beez3, содержимое страницы содержится в блоке div с идентификатором #all, а значит для выбранного текста давайте найдем при помощи FireBug, стили прописанные для вышеуказанного блока.

Как Вы видите цвет, определен совсем в другом файле – personal.css на строке 38. Опять же давайте откроем данный файл и изменим CSS правила.

#all {
background: #FFFFFF;
color: #4565b8;
}

При этом мы увидим следующий результат.

Как Вы видите, цвет шрифта успешно изменен. Так же хотел бы отметить, что довольно часто, необходимо использовать нестандартный шрифт для оформления конкретной страницы, а значит, давайте поговорим о том, как добавить шрифт в Joomla 3.

Для начала, скачаем необходимый шрифт в формате .ttf. Для примера я скачал шрифт Argentine Bold на сайте 7fonts. Далее, распакуем полученный архив и перейдем на сайт font2web, где при помощи поля загрузки файлов, выберем только что скачанный шрифт и нажмем кнопку “Convert&Download”. Тем самым мы получим готовый архив, в котором содержится каталог fonts, со скачанным шрифтом, а так же файл стилей, с примером подключения нового шрифта.

Поэтому, каталог fonts, скопируем в корень папки активного шаблона. Далее переименуем имена файлов в данном каталоге, на более простые, к примеру Argentine-Bold.ttf, то есть уберем префикс 7fonts.ru, и открываем в текстовом редакторе файл стилей fonts.css.

/** Generated by FG **/
@font-face {
font-family: 'Conv_7fonts.ru_Argentine-Bold';
src: url('fonts/7fonts.ru_Argentine-Bold.eot');
src: local('☺'), url('fonts/7fonts.ru_Argentine-Bold.woff') format('woff'), url('fonts/7fonts.ru_Argentine-Bold.ttf') format('truetype'), url('fonts/7fonts.ru_Argentine-Bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}

Данные правила немного подкорректируем, а именно укажем новые имена файлов, и правильно пропишем путь к ним, с учетом того, что данные правила будут добавлены в файл layouts.css, который располагается в каталоге css.

@font-face {
font-family: 'Argentine-Bold';
src: url('../fonts/Argentine-Bold.eot');
src: local('☺'), url('../fonts/Argentine-Bold.woff') format('woff'), url('../fonts/Argentine-Bold.ttf') format('truetype'), url('../fonts/Argentine-Bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}
 

Теперь добавим правила в самый конец файла layouts.css, и используем новый шрифт для написания текста материалов.

body#shadow {
font-family: Argentine-Bold, sans-serif
}

После сохранения мы увидим следующий результат в браузере.

Теперь Вы знаете, применительно к CMS Joomla 3 как изменить шрифт. Если Вы желаете узнать, как устроены шаблоны данной CMS и хотите научиться на профессиональном уровне создавать собственные, Вам будет полезен наш курс Joomla-Мастер. С нуля до премиум шаблона. На этом данная статья завершена. Всего Вам доброго и удачного кодирования!!!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Хотите узнать, как создать собственный шаблон на CMS Joomla с нуля

Все очень просто!

Хотите узнать, как создать собственный шаблон на CMS Joomla с нуля

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

Узнать подробнее

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

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Boosters

    Спасибо за полезный урок! Шрифты должны быть в меру яркими, выразительными. Мне понравилось сочетание темно-синего с желто-салатовым на сайте boosters.com.ua Многие веб-мастера, увы, не обращают на шрифты должного внимания, а стоило бы. Всё-таки грамотно подобранные шрифты и их цвета улучшают читабельность и восприятие текстов, а следовательно — привлекательность сайта для посетителей.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree