Як встановити свій шрифт на сайт
Створюючи свій сайт на тій чи іншій платформі (наприклад, на Ucoz), багато користувачів цікавляться, як можна встановити на нього свій шрифт, адже стандартні шрифти можуть набриднути. Спробуйте змінити код шаблону. Цей спосіб простий і ефективний, а здійснити його ви можете, відредагувавши файли конфігурації за допомогою абсолютно будь-якого текстового редактора.
1
Якщо вам потрібно змінити назву шрифту, яким ви будете користуватися в шаблоні вашого інтернет-сайту, скористайтеся будь-яким доступним текстовим редактором. Наприклад, відкрийте сторінку редагування шаблону, після чого скопіюйте все, що може відноситися до відображення шрифтів.
2
Для цього натисніть на клавіші Ctrl і F одночасно (функція пошуку), введіть в з`явилося текстове поле слово font. Всі значення, які ви знайшли з тегом font, скопіюйте в обраний текстовий редактор. Робиться це для того, щоб ви в будь-який час мали можливість повернути всі внесені в шаблон вашого сайту зміни.
3
Припустимо, є такий рядок: «Минулого літа деньки були теплішими». У тега font є три параметри: color (колір шрифту), face (його тип), size (розмір шрифту). Щоб задати певний шрифт вашої рядку, доповніть її деякими даними:
Минулого літа деньки були теплішими
4
Варто звернути вашу увагу на наступне. Шрифт, в назві якого присутні більше одного слова, обов`язково повинен бути виділений одинарними лапками. Ось чому в цьому прикладі Times New Roman виділяється лапками. Якщо назва шрифту, який ви бажаєте використовувати на сайті, складається з одного слова (наприклад, Tahoma або Cambria), такі лапки синтаксис шаблону на Ucoz не передбачає.
5
Виділивши конкретний текст за допомогою тега font, потрібно скопіювати змінений текст, після чого вставити його в редактор шаблону інтернет-сайт. Далі збережіть вчинені зміни, після чого подивіться, як відображається текст редагованої вами статті. Якщо на початку і кінці тексту з`явилися теги font, значить, ви невірно їх поставили. Може бути, ви поставили зайві прогалини. Позбавтеся від них та перевірте ще раз, не забувши зберегти зміни.
Рада 2: Як використовувати свій шрифт на сайті
При розробці дизайну сайту часто виникає необхідність в підключенні сторонніх шрифтів. В CSS дана можливість здійснюється через атрибут font-face. Файл самого шрифту повинен мати стандартне для Windows розширення TrueType (ttf) або OpenType (otf).
Вам знадобиться
- - файл шрифту TrueType або OpenType.
Інструкція
1
Створіть файл таблиці каскадних стилів (.css) і відкрийте його за допомогою Блокнота як звичайний текстовий файл. Далі впишіть рядки: @ font-face {font-family: "Назва шрифту" -src: url ( "шлях до файлу шрифту") - font-size: 12px; } Значення параметра font-family має збігатися з назвою вашого шрифту. Як url можна вказувати як абсолютний, так і відносний шлях до файлу ttf або otf. У font-size вкажіть розмір букв в пунктах, відсотках або пікселях. Відповідно до специфікації CSS ви додатково можете задати будь-які доступні параметри накреслення (наприклад, font-weight або font-style).
2
Збережіть файл. Тепер підключіть його до вашої HTML-сторінці за допомогою тега, який зазвичай прописується в розділі: не вимагає закриває дескриптора.
3
Для використання шрифту необхідно прописати додаткові параметри. Скористайтеся параметром font-family: h1 {font-family: "назва підключеного шрифту" -} Тепер все заголовки першого рівня будуть написані літерами з вашого файлу. Якщо ви хочете надати власне накреслення всім словами на сайті, то вкажіть параметр font-family аналогічним чином в body: body {font-family: "ім`я шрифту" -}
4
Також ви можете створити певний клас користуватися ним при необхідності вже в самому HTML: .myfont {font-family: "назву шрифту" -} У коді сторінки це буде виглядати так:
Тема 1
простий заголовок
Зверніть увагу
Не всі браузери зможуть однаково добре відобразити сторонній шрифт. Для дизайну найкраще користуватися стандартними можливостями, вдаватися до зовнішніх файлів варто тільки в разі крайньої необхідності. Також вони можуть мати більшу вагу, а значить час завантаження сайту може значно збільшитися, і особливо це буде помітно при повільному інтернет-з`єднанні.
Статті за темою "Як встановити свій шрифт на сайт"
Оцініть, будь ласка статтю