Font-family css, задати шрифт css
Всім доброго часу доби. На зв'язку Олексій Гулинін. У минулій статті ви дізналися, як змінити зовнішній вигляд першої літери за допомогою CSS. У даній статті я б хотів розповісти, як задати шрифт в CSS. За замовчуванням, при відкритті вашої тестової сторінки, ви можете побачити стандартний шрифт "Times New Roman". Якщо вам він не подобається, то ви його можете замінити. Робиться це за допомогою властивості font-family. Відразу хочу відзначити, що браузер шукає шрифти в операційній системі користувача, і якщо ви на своєму сайті використовуєте який-небудь екзотичний шрифт, то швидше за все ваш сайт буде некоректно відображатися на більшості комп'ютерів користувачів. Як же дізнатися напевно, який шрифт підтримується більшістю операційних систем? На даному сайті ви зможете знайти список шрифтів, які обов'язково є, як в операційній системі Windows, так і в Mac OS. Що зручно, тут є ще накреслення шрифтів, тобто ви відразу можете подивитися, як виглядає той чи інший шрифт. Тому можете сміливо брати будь-який з цих шрифтів і не боятися, що ваш сайт десь криво відобразиться. Давайте створимо просту html-сторінку з двома абзацами і змінимо їх шрифт:
У файлі стилів style.css запишемо наступні властивості для абзацу (тег p):
Оновивши сторінку, ви побачите, що шрифт змінився. Шрифти можна вказувати через кому, давайте запишемо таку конструкцію:
В даному випадку браузер, якщо не знайде в системі користувача шрифт "Arial". буде шукати шрифт "Palatino Linotype". Також хочу звернути вашу увагу: якщо назва шрифту складається з декількох слів, то його потрібно вказувати в лапках.
На сайті, про який я писав вище, поруч з кожному шрифтом є назви, такі як sans-serif, serif, monospace. Це так звані сімейства шрифтів. Кожен шрифт відноситься до якогось сімейства. Давайте запишемо таку конструкцію:
В даному випадку, якщо браузер не знайде в системі користувача цих двох шрифтів, то спробує відобразити сторінку будь-яким шрифтом з сімейства sans-serif.
Домашнє завдання: створіть тестову html-сторінку і відобразіть текст на ній шрифтом "Comic Sans MS". Врахуйте момент, що якщо такого шрифту немає, то використовувати сімейство шрифтів cursive.
У даній статті ви дізналися, як задати шрифти в CSS.
Ще статті.
- селектори CSS
- Псевдоселектори в CSS
- Оформлення тексту CSS (1 частина)
- Оформлення тексту CSS (2 частина)
- підключення CSS
