І. Шрифти Google fonts
Крім декількох стандартних Arial, Verdana, Times New Roman, Georgia, Tahoma є безліч інших оригінальних шрифтів на Google Fonts. В новій версії шрифтів стало 629, порівняно із 180 старої.
Величезний плюс в тому, що їх не потрібно кудись завантажувати, десь встановлювати, а просто скористатись каталогом і підключити обраний шрифт до свого ресурсу. Як це зробити?
1.Йдемо на сайт Google Fonts. Обираємо шрифт.
2.Між тегами <head> й</head> в будь-якому місці вставляєте наступний рядок виклику шрифту:
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Parisienne”⁄>, де Parisienne – назва самого шрифту.
Можуть виникнути ситуації, коли потрібно підключити не один шрифт, а два чи три, в такому випадку рядок виклику буде виглядати наступним чином:
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Parisienne|Chela+One”⁄>,
самі шрифти розділені між собою вертикальним слеш (|), а якщо в назві обраного шрифту присутній пробіл, то в рядку виклику цей пробіл ми замінюємо на (+). Таким чином, на цьому прикладі, підключено два види шрифтів: Parisienne та Chela One.
В кожному шрифті є певні стилі – це жирний, курсив, жирний курсив і т.д. В такому випадку ми до назви шрифту додаємо ці стилі і вказуємо, що підключаються різні стилістичні форми одного виду шрифту. Рядок виклику буде такий:
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Parisienne:normal,italic”⁄>,
де після назви шрифту ми ставимо дві крапки і вказуємо, які стилі цього сімейства підключаються.
Для браузерів, які некоректно відображають певні шрифти, зокрема Опера, варто вказати кириличинй варіант, якщо такий буде відображатися: <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?subset=cyrillic&family=Parisienne"⁄> або <link href='http://fonts.googleapis.com/css?family=Parisienne&subset=latin,cyrillic' rel='stylesheet' type='text/css'⁄>
3. В css прописується підключений шрифт, який береться в одинарні лапки:
h1 {
font-family: ‘Parisienne’, sans-serif;
font-size: 24px;
line-height: 26px;
}
Ось і все. Три кроки.
ІІ. Font Awesome
Іконочний шрифт - це тренд, який набирає популярності в розробників. Іконочний шрифт - це той же шрифт, однак, замість букв і цифр, в ньому містяться символи і спеціальні знаки, які можна оформляти так само як і звичайний текст.
Плюси такого шрифту:
оформлення через CSS;
векторна природа дозволяє легко масштабувати їх до будь-яких розмірів без втрати якості;
один HTTP запит замість кількох;
швидке завантаження через невеликий розмір;
широка браузерна підтримка, включаючи IE6.
Мінуси – один колір оформлення (хоча є деякі хитрощі в сss, як це обійти), втрата чіткості малюнку на великих екранах.
Font Awesome – це бібліотека, яка містить 605 іконок, плюс весь час створюються нові. Вона є абсолютно безкоштовною як для особистого, так і для комерційного використання. Спочатку вона розроблялася для Bootstrap, однак тепер знайшла широке застосування й окремо.
Найпростіший спосіб підключити Font Awesome – підключити через CDN. Якщо ж оффлайн – доведеться завантажити набір іконок.
підключення через Bootstrap:
https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
Використання CSS: - Скачати http://fontawesome.io/ та скопіювати повністю папку font-awesome в папку проекту. - Вставити код в тег в HTML (index): <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"⁄>- мінімізована версія <link rel="stylesheet" href="http://ваш_сайт/css/font-awesome.css"⁄> - повна версія
Для використання іконок, потрібно розмістити їх усередині елемента або <i.
Потім потрібно присвоїти їм два класи: fa плюс другий клас, який повинен відповідати назві іконки, наприклад fa-home.
Приклад #
Ми створюємо вертикальне меню. Спочатку поміщаємо іконки всередині елемента <i > та вдвічі збільшуємо їх розмір, використовуючи зумовлений клас fa-2x. Потім оформляємо їх за допомогою CSS.
Іконки можна збільшувати за допомогою класів fa-lg (збільшення на 33%), fa-2x, fa-3x, fa-4x, або fa-5x.
Клас fa-fw задає фіксовану ширину іконки. Чудово підходить для тих випадків, коли різна ширина іконок заважає правильному вирівнюванню. Особливо корисно при використанні іконок в навігації і списках груп.
Класи fa-ul і fa-li для швидкого видалення стандартних маркерів в ненумерованих списках.
Класи fa-border і fa-pull-right або fa-pull-left для виділення цитати або підключення іконки статті.
Клас fa-spin, змушує обертатися будь-яку іконку, клас fa-pulse, змушує обертатися іконку по 8 кроків. Обертання також працює з класами fa-spinner, fa-refresh, і fa-cog.
Щоб довільно повертати і дзеркалити іконки, використовуйте класи fa-rotate- * (* означає кут повороту , наприклад 90, 180, 270) і fa-flip- * (* означає horizontal/vertical).
Група з іконок – fa-stack для батьківських елементів (parent) , клас fa-stack-1x – для завдання стандартного розміру іконки, а клас fa-stack-2x для збільшеного. Клас fa-inverse може бути використаний для присвоювання альтернативного кольору іконці.
Колекцію Font Awesome можливо вставити й за допомогою властивості content.
