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

45

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

Як було сказано вище, використовувані шрифти на сайті, грають дуже важливу роль в сприйнятті відвідувачем, як певної текстової інформації, так і всього сайту в цілому. Так як добре підібраний шрифт, з одного боку забезпечить легкість читання матеріалів і статей, і з іншого боку, допоможе виділити деякі важливі блоки або елементи сторінки.

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

Припустимо, що у нас є ось такий сайт, дизайн якого формує стандартний шаблон Beez3.

Якщо необхідно змінити шрифт контенту, то ми можемо зробити наступне. Відкриємо плагін 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.5 em;
font-size: 1.3 em;
line-height: 1.8 em;
}}

Зберігши зміни, ми побачимо наступний результат в браузері.

Крім цього, дуже часто початківці веб-майстри задаються питанням, як змінити колір шрифту на сайті джумли. Знову ж таки, спочатку колір шрифту визначений і його просто потрібно відредагувати. За структурою шаблону Beez3, вміст сторінки міститься в блоці div id #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-Майстер. З нуля до преміум шаблону. На цьому дана стаття завершена. Всього Вам доброго і вдалого кодування!!!