МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ «ЛЬВІВСЬКА ПОЛІТЕХНІКА»
Лабораторна робота No6
«Шрифти для веб»
Ознайомитися з теоретичними матеріалами щодо веб-типографіки, основними характеристиками шрифтів та особливостями веб-форматів.
Завантажити нестандартний шрифт (наприклад, сервіси Fontesk, Fontsquirrel) та під’єднати його до сторінки. Оформити даним шрифтом певні елементи (заголовки, пункти навігації тощо).
Під’єднати до сторінки Google-шрифт. Застосувати його до певних елементів (заголовки чи особливі ділянки сторінки).
Ознайомитися з ресурсами, що надають у використання іконкові шрифти. Уважно прочитати документацію щодо уставляння іконок та особливостей надання їм стилів. Створити певну ділянку на сторінці, де розмістити художньо оформлені іконки з відповідною інформацією.
Протестувати сторінку на різних браузерах та пристроях.
Розмістити сторінку на хостингу. Результат виконання демонструвати в Інтернеті.
Під час виконання роботи робити скріншоти основних етапів роботи. Оформити звіт.
Рис.1 Файли
Рис.2 Код css
Рис.3 Код body
Рис.4 текст body іншої сторінки
Рис.5 Скрін першої сторінки
Рис.6 Скрін другої сторінки
Поcилання на сайт: lab5lesn.wuaze.com
Висновок:
У ході виконання цієї лабораторної роботи я ознайомився з використанням шрифтів для сайтів, навчився підключати їх та модифікувати їх стилі. Також повправлявся у підключенні іконок. Також попрактикувався у розробці самого сайту, вивчення методичних матеріалів. У ході виконання роботи зіткнувся з нерозпізнаванням іконки, на що був змушений підключити їх ще й через посилання.
Основні сімейства комп’ютерних шрифтів:
Serif (з зарубками) – мають невеликі штрихи або зарубки на кінцях літер (наприклад, Times New Roman).
Sans-serif (без зарубок) – не мають додаткових штрихів (наприклад, Arial, Helvetica).Monospace (моноширинні) – всі символи мають однакову ширину (наприклад, Courier).Cursive (рукописні) – імітують рукописний текст (наприклад, Comic Sans).Fantasy (декоративні) – використовуються для створення незвичайного вигляду (наприклад, Papyrus).Найкраще сімейство для сайтів:Sans-serif шрифти є найбільш оптимальними для використання на вебсайтах завдяки їхній читабельності на екранах.
Категорії шрифтів для веб:Шрифти з сімейства без зарубок (sans-serif) – найбільш поширені для веб-дизайну через їх простоту і легкість у читанні.Шрифти з зарубками (serif) – також можуть використовуватися, особливо для заголовків або стилізованих вебсайтів.
Відомі веб-формати шрифтів:WOFF (Web Open Font Format)WOFF2 – стиснутий варіант WOFF.TTF (TrueType Font)OTF (OpenType Font)OT (Embedded OpenType)
Підходи для застосування довільного шрифта на сторінці:Підключення через Google Fonts або інші онлайн-ресурси.@font-face у CSS, який дозволяє завантажувати шрифти з сервера.Характеристики шрифта для використання на сайті:Читабельність на різних екранах та роздільних здатностях.Швидкість завантаження – важливо використовувати шрифти з мінімальним розміром файлів.Гнучкість – підтримка різних форматів і стилів (наприклад, звичайний, жирний, курсив).
CSS-властивості для шрифтів:font-family – визначає сімейство шрифтів.font-size – розмір шрифту.font-weight – товщина шрифту.font-style – стиль (звичайний, курсив).line-height – висота рядка.text-transform – перетворення тексту (наприклад, верхній регістр).letter-spacing – відстань між символами.
Як підключити шрифт з колекції Google Fonts:href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
Що таке іконковий шрифт:
Іконковий шрифт – це шрифт, де замість символів використовуються іконки. Наприклад, Font Awesome. Використовується для додавання векторних іконок на сайти.
Порівняння іконкових шрифтів:Font Awesome – один із найвідоміших і найбільш використовуваних іконкових шрифтів, містить велику колекцію іконок.Material Icons – набір іконок від Google, використовуються в матеріальному дизайні.Ionicons – популярний серед мобільних додатків, надає прості та елегантні іконки.Bootstrap Icons – створений для використання з фреймворком Bootstrap, легкий і гнучкий.
Як можна відредагувати SVG-іконку:Текстовий редактор – SVG є XML-файлом, тому можна редагувати його код напряму (зміна кольорів, розмірів, трансформацій).Графічні редактори – наприклад, Adobe Illustrator, Figma або Inkscape дозволяють редагувати SVG візуально.Онлайн-редактори – наприклад, SVGOMG для оптимізації SVG файлі