» » Свій шрифт на сторінці

Свій шрифт на сторінці
Свій шрифт на сторінці
Шрифт є невід'ємною частиною веб-дизайну, надає сайту виразність і впізнаваність, висловлює характерний стиль сайту і безпосередньо пов'язаний із сприйняттям текстів. Добре підібраний шрифт може не помічатися, але без нього не буде тієї родзинки, додає дизайну сайту завершеність.

Якщо у вас на комп'ютері вже встановлено специфічний шрифт, то в стилях досить додати рядок.
h1 { font-family: SuperPuperFont; }

Значенням властивості font-family виступає назва гарнітури шрифту, вона буде застосовуватися до всіх заголовкам
<h1>
. Але що побачать відвідувачі сайту, у яких наш ефектний і рідкісний шрифт не встановлений? Подібна ситуація найбільш імовірна, так що якщо браузер не розпізнає заявлений шрифт, він буде використовувати шрифт за замовчуванням, наприклад в Windows це Times New Roman. Весь наш ретельно продуманий шрифтовою дизайн в одночас розсиплеться і піде прахом, тому треба пошукати найбільш універсальне рішення. Перше що відразу ж спадає на думку - це організувати завантаження файлу шрифту на комп'ютер користувача і відображення тексту вибраним шрифтом. У порівнянні з іншими методами начебто відображення тексту через малюнок цей спосіб самий простий і універсальний.

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

  • Текст легко додавати і правити.

  • У браузері можна користуватися пошуком і знаходити бажані фрази.
  • У налаштуваннях браузера можна зменшувати або збільшувати розмір шрифту домагаючись комфортного перегляду.
  • Пошукові системи добре індексують вміст документа.
  • Текст можна виділити і скопіювати в буфер, а також перекласти іншою мовою.
  • Параметри тексту начебто міжрядкового відстані, кольору, розміру тощо легко міняти за допомогою властивостей CSS.
  • До тексту знову ж через CSS просто додавати різні ефекти, наприклад тінь.


Як бачите, переваг дуже багато. Невеликі мінуси теж є і для балансу їх варто згадати.
  • Не всі версії браузерів підтримують завантажуваний шрифт і один для всіх формат.
  • Файл, який містить гарнітуру шрифту, може займати великий обсяг, сповільнюючи тим самим завантаження веб-сторінки.


Самий підтримуваний формат - TTF. За винятком IE до версії 9.0 і iOS всі браузери його прекрасно розуміють. Так що якщо у вас шрифт саме в цьому форматі і ви орієнтуєтеся на сучасні браузери, ніяких додаткових дій робити не доведеться. Досить у стилях написати наступний код
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Шрифт</title>
  <style>
   @font-face {
    font-family: Pompadur; /* шрифт */
    src: url(fonts/pompadur.ttf); /* Шлях до папки з шрифтом */
   }
   h1 {
    font-family: Pompadur, 'Comic Sans MS', cursive;
   }
  </style>
 </head>
 <body>
  <h1>Заголовок</h1>
  <p>Будь який текст щоб побачити стиль шрифту</p>
 </body>
</html>


1089 01.10.13



Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлеру