Учебник по 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 Z-индекс 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 Цветовые ключевые слова CSS CSS-градиенты CSS-тени Текстовые эффекты CSS Веб-шрифты CSS 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс

CSS Отзывчивый

Введение в задний привод Окно просмотра RWD Представление сетки RWD Медиа-запросы RWD Изображения RWD Видео с задним приводом Рамки RWD Шаблоны RWD

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

Справочник по CSS Селекторы CSS CSS-функции Справочник по CSS Безопасные веб-шрифты CSS CSS анимация Единицы CSS Конвертер CSS PX-EM Цвета CSS Значения цвета CSS Значения CSS по умолчанию Поддержка CSS-браузера

Безопасные веб-шрифты CSS


Что такое веб-безопасные шрифты?

Веб-безопасные шрифты — это шрифты, которые устанавливаются во всех браузерах и на всех устройствах.


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

Однако не существует на 100% полностью безопасных веб-шрифтов. Всегда есть шанс, что шрифт не найден или установлен неправильно.

Поэтому очень важно всегда использовать резервные шрифты.

font-family Это означает, что вы должны добавить в свойство список похожих «резервных шрифтов» . Если первый шрифт не работает, браузер будет пробовать следующий, следующий и так далее. Всегда заканчивайте список общим названием семейства шрифтов.

Пример

Здесь есть три типа шрифта: Tahoma, Verdana и без засечек. Второй и третий шрифты являются резервными на случай, если первый не будет найден.

p {
font-family: Tahoma, Verdana, sans-serif;
}

Лучшие веб-безопасные шрифты для HTML и CSS

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

  • Arial (без засечек)
  • Вердана (без засечек)
  • Helvetica (без засечек)
  • Тахома (без засечек)
  • Требюше MS (без засечек)
  • Times New Roman (с засечками)
  • Грузия (с засечками)
  • Гарамонд (с засечками)
  • Курьер Новый (монопространство)
  • Кисть Script MT (курсив)

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



Arial (без засечек)

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 — очень популярный шрифт. Verdana легко читается даже при небольшом размере шрифта.

Пример

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Helvetica (без засечек)

Шрифт Helvetica любим дизайнерами. Он подходит для многих видов бизнеса.

Пример

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Тахома (без засечек)

В шрифте Tahoma расстояние между символами меньше.

Пример

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Требюше MS (без засечек)

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 (с засечками)

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 — элегантный шрифт с засечками. Он очень удобочитаем при разных размерах шрифта, поэтому является хорошим кандидатом на дизайн, адаптированный для мобильных устройств.

Пример

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Гарамонд (с засечками)

Garamond — классический шрифт, используемый для многих печатных книг. Он имеет вневременной вид и хорошую читабельность.

Пример

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Курьер Новый (монопространство)

Courier New — наиболее широко используемый моноширинный шрифт с засечками. Courier New часто используется с дисплеями для кодирования, и многие поставщики услуг электронной почты используют его в качестве шрифта по умолчанию. Courier New также является стандартным шрифтом для киносценариев.

Пример

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Кисть Script MT (курсив)

Шрифт Brush Script MT был разработан для имитации почерка. Он элегантен и утончен, но может быть труден для чтения. Используйте его осторожно.

Пример

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Совет. Также ознакомьтесь со всеми доступными шрифтами Google и узнайте, как их использовать.