НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

CSS Підручник

CSS СТАРТ CSS Інтро CSS Синтаксис CSS Селектори CSS Як підключити CSS Коментарі CSS Кольори CSS Фони CSS Межі CSS Поля CSS Внутрішній відступ CSS Висота/Ширина CSS Блочна модель CSS Контур CSS Текст CSS Шрифти CSS Іконки CSS Посилання CSS Списки CSS Таблиці CSS Display CSS Max-Width CSS Position CSS Z-index CSS Overflow CSS Float CSS Inline-Block CSS Вирівнювання CSS Комбінатори CSS Псевдо-класи CSS Псевдо-елементи CSS Непрозорість CSS Панель навігації CSS Випадаючі списки CSS Галерея зображень CSS Спрайти зображень CSS Селектори атрибутів CSS Форми CSS Лічильники CSS Макет веб-сайту CSS Одиниці CSS Специфічності

CSS Продвинутий

CSS Закруглені кути CSS Межі зображень CSS Фони CSS Кольори CSS Градієнти CSS Тіні CSS Ефекти тексту CSS Веб-шрифти CSS 2D Трансформації CSS 3D Трансформації CSS Переходи CSS Анімації CSS Підказки CSS Стилі зображень CSS Підгонка об'єкту CSS Кнопки CSS Нумерація сторінок CSS Кілька стовпців CSS Користувальницький інтерфейс CSS Змінні CSS Розміри блоків CSS Медіа-запити CSS Приклади медіа-запитів CSS Flexbox

CSS Адаптивний

RWD Інтро RWD Область перегляду RWD Вигляд сітки RWD Медіа-запити RWD Зображення RWD Відео RWD Фреймворки RWD Шаблони

CSS Grid (Сітка)

Grid Інтро Grid Контейнер Grid Елементи

CSS Приклади

CSS Шаблони CSS Приклади CSS Вікторина CSS Вправи CSS Сертифікат

CSS Довідники

CSS Довідник CSS Селектори CSS Функції CSS Довідник аудіо CSS Безпечні веб-шрифти CSS Анімація CSS Одиниці CSS PX-EM Конвертер CSS Кольори CSS Значення кольору CSS Значення за замовчуванням CSS Підтримка браузерами

Place for your advertisement!
CSS3. Уроки W3Schools для початківців українською мовою

En

CSS Веб-безпечні шрифти


Що таке веб-безпечні шрифти

Веб-безпечні шрифти - це шрифти, які універсально встановлюються в усіх браузерах і на всіх пристроях.


Резервні шрифти

Однак 100% повністю безпечних веб-шрифтів не існує. Завжди є шанс, що шрифт може бути не знайдений або встановлений неправильно.

Тому дуже важливо завжди використовувати резервні шрифти.

Це означає, що вам слід додати список схожих "резервних шрифтів" у властивості font-family. Якщо перший шрифт не працює, браузер спробує використовувати наступний, потім знову наступний і т.д. Завжди закінчуйте список загальною назвою сімейства шрифтів.

Приклад

Тут є три типи шрифтів: Tahoma, Verdana та sans-serif. Другий та третій шрифти є резервними на випадок, якщо перший не знайдено.

p {
font-family: Tahoma, Verdana, sans-serif;
}
Спробуйте самі »

Найкращі веб-безпечні шрифти для HTML та CSS

В наступному списку представлені кращі веб-безпечні шрифти для HTML та CSS:

  • Arial (sans-serif)
  • Verdana (sans-serif)
  • Helvetica (sans-serif)
  • Tahoma (sans-serif)
  • Trebuchet MS (sans-serif)
  • Times New Roman (serif)
  • Georgia (serif)
  • Garamond (serif)
  • Courier New (monospace)
  • Brush Script MT (cursive)

Примітка: Перед тим, як опублікувати свій вебсайт, завжди перевіряйте, як ваші шрифти відображаються в різних браузерах і на різних пристроях, та завжди використовуйте резервні шрифти!


Arial (sans-serif)

Arial - найбільш широко використовуваний шрифт як в Інтернеті, так і в друкованих ЗМІ. Arial також є шрифтом за замовчуванням в Документах Google.

Arial - один із найбільш веб-безпечних шрифтів, доступний в усіх основних операційних системах.

Приклад

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Вітаємо вас! Ми з України!

0 1 2 3 4 5 6 7 8 9

Спробуйте самі »

Verdana (sans-serif)

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

Приклад

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Вітаємо вас! Ми з України!

0 1 2 3 4 5 6 7 8 9

Спробуйте самі »

Helvetica (sans-serif)

Шрифт Helvetica дуже подобається дизайнерам. Підходить для багатьох видів бізнесу.

Приклад

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Вітаємо вас! Ми з України!

0 1 2 3 4 5 6 7 8 9

Спробуйте самі »

Tahoma (sans-serif)

В шрифті Tahoma менше місця між символами.

Приклад

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Вітаємо вас! Ми з України!

0 1 2 3 4 5 6 7 8 9

Спробуйте самі »

Trebuchet MS (sans-serif)

Trebuchet MS було розроблено Microsoft в 1996 році. Використовуйте цей шрифт обережно. Підтримується не всіма мобільними операційними системами.

Приклад

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Вітаємо вас! Ми з України!

0 1 2 3 4 5 6 7 8 9

Спробуйте самі »

Times New Roman (serif)

Times New Roman - один із найбільш впізнаваних шрифтів в світі. Він виглядає професійно та використовується в багатьох газетах і "новостійних" вебсайтах. Це також основний шрифт для пристроїв і додатків Windows.

Приклад

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Вітаємо вас! Ми з України!

0 1 2 3 4 5 6 7 8 9

Спробуйте самі »

Georgia (serif)

Georgia - елегантний шрифт із засічками. Він добре читається при різних розмірах шрифту, тому є гарним кандидатом для адаптивного дизайну мобільних пристроїв.

Приклад

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Вітаємо вас! Ми з України!

0 1 2 3 4 5 6 7 8 9

Спробуйте самі »

Garamond (serif)

Garamond - класичний шрифт, що використовується в багатьох друкованих книгах. У нього позачасовий вигляд і добра читабельність.

Приклад

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Вітаємо вас! Ми з України!

0 1 2 3 4 5 6 7 8 9

Спробуйте самі »

Courier New (monospace)

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

Приклад

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Вітаємо вас! Ми з України!

0 1 2 3 4 5 6 7 8 9

Спробуйте самі »

Brush Script MT (cursive)

Шрифт Brush Script MT було розроблено для імітації почерку. Він елегантний та вишуканий, але його важко читати. Використовуйте його обережно.

Приклад

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Вітаємо вас! Ми з України!

0 1 2 3 4 5 6 7 8 9

Спробуйте самі »

Порада: Також перевірте всі доступні Google шрифти і способи їх використання.


Place for your advertisement!