ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Комментарии CSS Цвета CSS Фоны CSS Границы CSS Margin CSS Padding CSS Height/Width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Display CSS Max-Width CSS Position CSS Overflow CSS Float CSS Inline-Block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS Opacity 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 Поддержка браузерами

CSS. Уроки для для начинающих

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 шрифты и способы их использования.