Как лучше всего использовать шрифты в CSS?

Эта статья познакомит вас с простой, но важной темой - 'Шрифты в а также даст вам практическую демонстрацию по этому вопросу. Следующие указатели будут рассмотрены в этой статье,

• Шрифты в CSS
• Атрибуты шрифта CSS
• атрибут стиля шрифта
• атрибут font-weight
• атрибут font-size
• атрибут font-family

Веб-сайты несут контент в виде изображений, аудио, видео и текстового контента. Однако большинство веб-страниц по-прежнему полагаются на текст как на преобладающий формат. Это связано с тем, что простой текст дает очень важные преимущества.

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

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

Подробное руководство по CSS можно найти на сайте Edureka CSS Tutorial для начинающих. Вы получите отличную информацию о том, как использовать CSS для улучшения веб-дизайна HTML.

Продолжаем читать статью о шрифтах в CSS

разница между интерфейсом и классом

Шрифты в CSS

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

Пример 1: заголовки и абзацы с использованием различных шрифтов

body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia, serif}
Абзац, выделенный курсивом жирным шрифтом Georgia
 

 Пример 1: Вывод 

В примере 1 у нас есть 3 разные строки текста с разными шрифтами. Вы могли бы заметить, что каждый из шрифтов различается по ширине символов, отступам и т. Д.

Продолжаем читать статью о шрифтах в CSS

Атрибуты шрифта CSS

У CSS-шрифтов есть 4 основных атрибута - стиль, вес, размер и семейство. Атрибут стиля обозначает обычный или курсив. Толщина показывает шрифт как простой или жирный. Вес также можно выразить численно. Размер - это просто размер шрифта, чем больше размер, тем крупнее текст по внешнему виду. Существует несколько способов назначения размера шрифта, подробные описания приведены в следующих разделах. Атрибут семейства предназначен для присвоения тексту названия шрифта.

В примере 1 мы использовали разные названия шрифтов для заголовков и абзацев. Под тегами h1 и p мы видим список двух названий шрифтов, а тег h2 - только один шрифт. Это определение семейства шрифтов, подробнее об этом позже.

Продолжаем читать статью о шрифтах в CSS

атрибут стиля шрифта:

Можно установить два основных стиля: «нормальный» и «курсив». Курсив должен быть курсивом с уклоном. Нормальный - это вариант по умолчанию, который является прямым. Есть еще один менее используемый вариант, называемый «наклонный», который напоминает курсив в большинстве шрифтов. Вы также можете установить для стиля «наследование», чтобы стиль шрифта был взят из родительского элемента.

Продолжаем читать статью о шрифтах в CSS

атрибут font-weight:

Этот атрибут определяет, должен ли шрифт выглядеть толстым или тонким. Может быть установлен на «нормальный» или «жирный». Значение по умолчанию нормальное. Это значение также можно задать как числовое. Вес 400 соответствует нормальному, а 700 - жирному. Есть несколько других настроек (от 100 - очень легкий до 900 - очень жирный), но они поддерживаются не всеми шрифтами. Все варианты веса показаны в Примере 3.

Продолжаем читать статью о шрифтах в CSS

атрибут font-size:

Атрибут размера можно установить несколькими способами. Давайте перечислим эти способы ниже.
● Нумерованные значения, например «средний», «большой». Фактически, как и размеры одежды, значения могут варьироваться от XX Small до XX Large!
● Устанавливается относительно родительского элемента как «больше» или «меньше».
● Процент размера родительского элемента.
● Установите как «наследование», чтобы напрямую перенять размер родительского элемента.
● В виде абсолютного значения в пикселях (пикселях), pt (точках) или см (сантиметрах).
«Среднее» - это значение по умолчанию, установленное для этого параметра.

Продолжаем читать статью о шрифтах в CSS

атрибут семейства шрифтов:

В HTML семейство шрифтов CSS предназначено для установки имени шрифта. Вы можете просто указать одно имя шрифта с тегом. Или вы можете назначить несколько значений в виде списка семейств шрифтов, который определяет приоритет, в котором браузер должен выбирать шрифт.
Список имеет приоритет слева направо в форме резервной системы. Выбирается первое значение, если оно доступно, или управление переходит к следующему, пока не будет достигнут конец списка. Семейство шрифтов по умолчанию определяется настройками браузера.
Семейства шрифтов CSS бывают двух типов - общие семейства и семейства шрифтов.
● Общие семейства - на основе некоторых общих характеристик шрифты сгруппированы как «serif», «sans serif», «monospace» и т. Д. Например, Sans serif означает шрифты без стиля с засечками.
● Семейные имена - шрифты, принадлежащие к определенной семейной иерархии. Times, Arial, Courier - это все семейства шрифтов, а Times New Roman - пример шрифта семейства Times.
Различные варианты использования семейства шрифтов перечислены в Примере 4 ниже.

Некоторые общие моменты, на которые следует обратить внимание

● Как и некоторые другие свойства CSS, некоторые настройки шрифта различаются в разных браузерах. Перед использованием некоторых редких настроек шрифта проверьте поддержку браузера.
● Вы можете установить параметры шрифта отдельно, используя отдельные теги font-style, font-weight и т. Д. В качестве альтернативы, если вы предпочитаете компактный код, вы можете использовать сокращенный атрибут шрифта со всеми значениями в одной строке.
● В пользовательских сценариях, где вы хотите, чтобы шрифт изменялся по размеру в зависимости от размера браузера, существует полезная настройка размера шрифта, называемая настройкой адаптивного шрифта. Его можно установить с помощью единицы vw, что означает «ширина области просмотра». Таким образом, размер текста будет соответствовать размеру окна браузера.

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

Если вы хотите узнать больше о веб-разработке, ознакомьтесь с пользователя Edureka. Курс по сертификации веб-разработки поможет вам узнать, как создавать впечатляющие веб-сайты с помощью HTML5, CSS3, Twitter Bootstrap 3, jQuery и API Google и развертывать их в Amazon Simple Storage Service (S3).