Различия

Показаны различия между двумя версиями страницы.

--- shrifti [2023/09/11 19:11]
tro
+++ shrifti [2023/09/13 19:57] (текущий)
tro
@@ Строка 2: / Строка 2: @@
 Властивість font-family задає шрифт тексту елемента. Через кому можна перерахувати довільну кількість шрифтів, які браузер спробує знайти в системі користувача та застосувати. Браузер буде шукати шрифти зліва направо та застосує перший знайдений.
-В кінці списку завжди вказується сімейство шрифтів, на випадок, якщо жодного перерахованого шрифту не знайдено. Тоді застосовується стандартний шрифт із цього сімейства, який є в системі користувача.
+В кінці списку завжди вказується сімейство шрифтів, на випадок, якщо жодного перерахованого шрифту не знайдено. Тоді застосовується стандартний  (безпечний) шрифт із цього сімейства, який вже є вбудований в браузер користувача.
 <code>
@@ Строка 9: / Строка 9: @@
 }
 </code>
-===== Підключення зовнішніх шрифтів =====
+===== Підключення шрифтів з інтернет =====
 [[https://fonts.google.com/|Гугл-ресурс с внешними шрифтами]]
 Після вибору на сайті потрбного шрифта - додаємо посилання коди у head HTML s CSS. Наприклад.
-**HTML**
+  * **HTML**
 <code>
 <link rel="preconnect" href="https://fonts.googleapis.com">
@@ Строка 19: / Строка 20: @@
 </code>
-**CSS**
+  * **CSS**
 <code>
 body {
@@ Строка 25: / Строка 26: @@
 }
 </code>
+===== Підключення шрифтів локальних з файлів=====
+  * Створюємо у проекті папку fonts
+  * Копіюємо у нього потрібний шрифт
+  * У файл css підключаємо егог через директиву font-face надаючи внутрішне імя шрифту як нам зручно
+<code>
+@font-face {
+    font-family: my-name-font;
+    src: url(../fonts/Montserrat-Regular.ttf);
+}
+</code>
+===== Підключення шрифтів через імпорт CSS =====
+Довше працює, старий варінт
+===== Описи сімейств шрифтів =====
+  * **serif** - сімейство шрифтів з засічками (черточки на буквах)
+  * **sans-serif** - сімейство шрифтів без засічок