Шрифти в css

Шрифти в css

Шрифти в CSS. Основи CSS для початківців. урок №6

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

Стиль шрифту в CSS

Властивість «FONT-STYLE»
Якщо ви захотіли поміняти стиль шрифту, а саме, зробити текст курсивом або просто похилим, то скористайтеся правилом «font-style».

Шрифти в css

Товщина шрифту в CSS

Властивість «FONT-WEIGHT»
Якщо ви хочете зробити шрифт жирним, використовуйте правило «font-weight».

Шрифти в css

Можна вказати товщину шрифту і звичайними цифрами від 100 до 900.

Шрифти в css

Розмір шрифту в CSS

Властивість «FONT-SIZE»
Шрифт можна змінювати за розміром. Для цього використовуйте правило «font-size».

Значення задається в «px» і «%».

Шрифти в css

Шрифти в CSS

Властивість «FONT-FAMILY»
На кожному комп'ютері встановлені стандартні шрифти, такі як «Times New Roman», «Arial» або «Verdana». Вибір шрифту залежить від смаку кожного, але потім він впливає на те, як зовні буде виглядати сайт.
Щоб вказати шрифт, скористайтеся правилом «font-family».

Можна ставити в правилах кілька шрифтів. Це на той випадок, якщо у користувача немає першого шрифту, тоді підключиться другий.

Зверніть увагу, шрифт «" Times New Roman "» написаний в лапках ( "").
У лапки беруться ті шрифти, в яких назва складається з двох і більше слів і є прогалина між словами.

сімейство шрифтів
Можна в правило «font-family» прописати і ціле сімейство шрифтів.
Напевно, ви мене не зовсім зрозуміли. Зараз спробую пояснити.
Існує безліч видів шрифтів, які утворюють так звані сімейства.
Існує всього п'ять родин шрифтів:

  • sans-serif - шрифти без зарубок (як Arial).
  • serif - сімейство шрифтів із зарубками (як Times New Roman).
  • monospace - моноширинних шрифти, ширина кожного символу в такому сімействі однакова.
  • cursive -курсівние шрифти.
  • fantasy - художні та декоративні шрифти.

А можна і ось так:

Підключення нестандартних шрифтів в CSS

Властивість «@ FONT-FACE»
Буває такий момент, що вам просто необхідно встановити на сайт нестандартний шрифт, тобто, шрифт, який не встановлений за замовчуванням у користувача на комп'ютері.
Правило «@ font-face» дозволяє нам імпортувати зовнішній файл шрифтів в документ. Після імпортування, ми можемо використовувати нестандартний шрифт як звичайний через правило «font-family».
Залийте будь-який нестандартний шрифт формату «ttf» в папку вашого сайту поруч з файлом css, це для того, щоб ви не заплуталися і правильно написали шлях до шрифту. Для прикладу я візьму нестандартний шрифт з ім'ям «DS-UncialFunnyHand-Medium.ttf».
Ось приклад підключення нестандартного шрифту.

  • font-family :. ; - тут пишемо ім'я шрифту;
  • src: url (.); - тут вказуємо шлях до файлу зі шрифтом який буде завантажуватися з сайту.

Ось повний приклад з підключенням нестандартного шрифту і його використання.

Чекаю вас на наступних уроках.
Успіхів!