Шрифти для сайту в css
Привіт шановні початківці веб майстра.
У цій статті ми дізнаємося, які шрифти застосовуються в інтернеті, і як вони оформлюються властивостями CSS.
Які з них однаково відображаються у всіх браузерах, і операційних системах, і які потрібно впроваджувати через сервіс, що забезпечує це коректне відображення.
І звичайно ж подивимося, як впровадити вільний шрифт на сайт управляється CMS WordPress.
Шрифтів в інтернеті величезна кількість, і всі вони об'єднаних в декілька сімейств. Щоб розглянути їх усі, напевно буде потрібно ще один такий сайт, як мій.
Проблема в тому, що є таке явище, як кроссбраузерность, тобто можливість будь-якого елементу, однаково відображатися у всіх наявних в інтернеті браузерах.
І не тільки в браузерах. Для шрифтів в це поняття входять всі операційні системи. Тому гарантувати, що будь-якої шрифт відобразитися однаково абсолютно на всіх екранах моніторів, неможливо.
Щоб уникнути явних відмінностей при відображенні шрифту, разом з назвою, зазвичай вказується сімейство, в яке він входить.
І якщо будь-якої браузер або операційна система його не зрозуміють, то в 99% випадків, вони покажуть шрифт з того ж сімейства, що не особливо зіпсує дизайн сторінки.
Звичайно, такий стан зі шрифтами не можна назвати нормальним, і воно не залишилося без уваги розумних хлопців з команди Google.
Ними був створений сервіс «Google Fonts», який змінив ситуацію в кращу сторону, але про нього в кінці статті.
А поки я представлю список тих шрифтів, які входять в найбільш поширені ОС, а значить в більшості випадків відобразяться так як положено.
1. Сімейство sans-serif - шрифти без зарубок, з прямими чітко прописаними контурами.
Тепер подивимося, як задаються шрифти в таблицях стилів. Спочатку вибирається селектор, в області якого ми збираємося поставити певний шрифт.
Це може бути тег
, якщо ми захочемо поставити шрифт для всієї сторінки, можуть бути теги, якщо шрифти будуть задаватися для заголовків або абзаців.
Задаються шрифти за допомогою властивості CSS font-family. а в значенні вказується назва шрифту.
Як я вже говорив, після назви шрифту, через пробіл, вказується сімейство шрифту.
Робиться це для того, щоб якщо будь-якої з браузерів відвідувачів Вашого сайту не зможе відобразити саме той шрифт, яким написано Ваш сайт, він відобразить шрифт з того ж сімейства.
І ще одне правило. Якщо назва шрифту складається з декількох слів, то при написанні в стилі, його потрібно брати в лапки, якщо слово одне - без лапок.
Спробуйте різні шрифти, і в майбутньому будете знати, який з них використовувати для свого сайту.
Розмір і колір шрифту
Розглянемо, як в CSS задається розмір і колір шрифту. Розмір шрифту задається в пікселях (px), рідше у відсотках (%), і зовсім рідко в одиницях (em) і пунктах (pt).
Базовий розмір шрифту становить: 16px, 100%, 1em, 12pt. Значить, якщо нам буде потрібно збільшити, або зменшити шрифт, ми будемо рухатися від цих даних в бік збільшення, або зменшення.
Властивість для завдання розміру шрифту називається font-size. і давайте встановимо його для всіх абзаців, припустимо, в 18px.
Так само можна задати це властивість заголовку h1. в тому випадку, якщо розмір заголовка потрібно ще збільшити
Колір шрифту задається властивістю color
Можна так само задати розмір і колір якогось слова чи речення розташованому всередині абзацу, використовуючи тег і атрибут style
тег вводить в html код вбудовані стилі. Трохи нижче розглянемо, як те ж саме робиться за допомогою класів.
Тепер подивимося, як відобразить цей код браузер.
Ось так засобами css, можна маніпулювати розміром шрифту. Точно так само можна задати розмір у всіх інших одиницях вимірювань, але ми не будемо на цьому зупинятися детально.
Головне їх знати, щоб в подальшому, якщо доведеться працювати з будь-яким кодом, мати уявлення, що за значення вказано у властивості font-size.
Жирний і курсивний шрифт
Товщина шрифту задається властивістю font-wieght. яке набуває таких значень:
1. normal - нормальний;
2. bold - напівжирний;
3. bolder - жирніше батька;
4. lighter - тонше батька;
5. від 100 до 900 - цифрове значення, не володіє кросбраузерністю;
Курсив задається властивістю font-style. приймають значення - italic.
Щоб мати можливість виділяти жирним або курсивом різні ділянки тексту, потрібно створити селектори класів c цими властивостями, і за допомогою тега вставляти їх в потрібні місця.
Розтягнутий і стислий шрифт
У шрифту можна змінити відстань між символами і словами.
Для зміни відстані між символами застосовується властивість css letter-spacing
Для зміни відстані між словами застосовується властивість word-spacing
Обидва ці властивості приймають і негативні значення, тобто зі знаком мінус, дія яких зменшує відстані задані шрифту за замовчуванням.
додаткові шрифти
А тепер, як і було обіцяно, познайомимося, і навчимося користуватися сервісом Google Fonts
Уявляю скріншот головної сервісу в Chrome, з українським інтерфейсом.
Правда інтерфейси популярних сервісів постійно оновлюються, але тільки в бік поліпшення і спрощення.
Сервіс Google Fonts
Трохи поясню, що і куди. У лівій колонці (Filters) можна вибрати з колекції шрифти певної товщини нахилу і ширини букв, потім в «Сценарист» (Script) вибрати мову.
Кнопка «Будь-який матеріал» (Styles), відкриє різні доступні варіанти у кожного шрифту.
Потім, прокручуючи колекцію, вибираємо потрібний шрифт, і натискаємо «Додати до колекції роботу» (Add to Collection), після чого, в самому низу, у вкладці «Колекція» (Collection), в дужках з'явитися запис «1 шрифт» (1 font family ).
Відкриємо її, клацнувши по трикутнику, щоб переконатися в точності вибору, і якщо все нормально, клацаємо «Використання» (Use), яка переводить на другу сторінку.
Тут вже настройки саме обраного нами шрифту.
1. Виберіть стилі які Ви хочете (Choose the styles you want).
2. Виберіть набір символів який Ви хочете (Choose the character sets you want) Вибирайте «Кирилиця» (Cyrillic)
Далі, в пунктах 3 і 4 дан код шрифту, який потрібно вставити в код сторінки сайту.
Подивимося, як це робиться. Код пункту 3 вставляється в тег
. а код пункту 4 - в селектор блоку, для якого цей шрифт задається.
Ще один дуже цікавий прибамбас перебувати в пункті 3 праворуч, і називається він «See an example» (дивіться приклад), так і називається.
Перейшовши за цим посиланням, Ви опинитеся на сторінці з рекомендаціями, з приводу того, як до вибраного шрифту додати різні ефекти: тінь, неон, полум'я і так далі. Всього на даний момент 26 ефектів.
Кожен з них може прикрасити заголовок сайту, записи, та й взагалі будь-який заголовок і будь-яку букву.
До речі, якщо Ви захочете використовувати шрифт тільки для однієї літери, заголовної наприклад, то і такий полегшений варіант передбачений.
Додаються вони дуже просто. У код представлений в пункті 3, додається пара слів, і все, ефект встановлений.
В інструкції все детально розписано і показано, так що повторюватися не буду. Вибирайте, додавайте і вставляйте код так як показано вище.
Все шрифт, так би мовити, впроваджений. Можна подивитися, як він відображається. Хоча особливо переживати з цього приводу не варто.
Сервіс викладе шрифт на сайт саме в тому вигляді, і з тим ефектом, який Ви вибрали. На всіх комп'ютерах, які відкриють Вашу сторінку.
І на часі завантаження сторінки, це практично не позначиться.
А тепер подивимося, як впроваджується шрифт з бібліотеки Google Fonts, на сайт управляється CMS WordPress.
Зробити це можна прямо з панелі управління (одне з незаперечних переваг цієї CMS).
У темі TwentyTen - це файл header.php. У коді цього файлу, після тега зазвичай розташований блок з підключають тегами
Ось на самому початку цього блоку, відразу після тега . і потрібно вставити код з пункту 3, показаний вище.
Оновлюємо файл - шрифт впроваджений, і в подальшому на Ваш розсуд.
Якщо Ви захочете виділити даними шрифтом частина тексту, або будь-яке слово в статті, то цей текст або слово потрібно укласти в наступний код:
Якщо ж Вам захочеться всю статтю відобразити таким шрифтом, то немає проблем. Укладайте в це код весь наявний текст.
Детальніше, як поміняти шрифти в шаблоні WordPress TwentyTen, можна подивитися в статті Редагуємо тему оформлення
Бажаю творчих успіхів.
Невже не залишилося питань? запитати
Петя всього-на-всього сказав «Привіт!», А Люся подумки зіграла весілля і народила трьох дітей.