✅ Свойства шрифта CSS - Различные свойства шрифта CSS

Введение в свойства шрифта CSS

Введение в свойства шрифта CSS

CSS Font Properties предоставляет схему свойств шрифта CSS. Каскадные таблицы стилей, более известные как CSS, - это простой язык проектирования, разработанный для упрощения создания великолепно выглядящих веб-страниц. CSS имеет дело с внешним видом и опытом части веб-страницы. Применяя CSS, вы можете управлять цветом с текстом, стилем шрифтов, расстоянием между абзацами, размером столбцов, а также представленными изображениями, фоновыми изображениями или используемыми цветами, стилями макета, вариантами отображения. несколько устройств, а также, размеры экрана в дополнение к ряду различных других эффектов. CSS прост для понимания и понимания, однако он дает эффективный контроль над демонстрацией HTML-документа. Чаще всего CSS обычно сочетается с языками разметки HTML или просто XHTML.

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

Объяснить различные свойства шрифта CSS

Ниже приведены различные свойства шрифта CSS:

Коллекция шрифтов: в CSS вы можете выбрать шрифт, который вы хотите использовать для текста внутри определенного элемента, установив свойство font-family в правиле стиля, но прежде чем мы углубимся в детали font-family, нам нужно понять как использовать имена шрифтов, потому что, когда мы создаем веб-страницу, мы не всегда знаем, что наш пользователь будет использовать для просмотра веб-страницы.

Определите пять категорий шрифтов в стандартах CSS

Первой из этих категорий являются категории шрифтов с засечками. Примером конкретного шрифта, который подходит для этой категории, может быть Times или Times New Roman, а также Baskerville, Century и Schoolbook.

Это конкретные имена шрифтов, такие как Baskerville, Century и Schoolbook; это имена шрифтов, которые вы можете увидеть в раскрывающемся списке при выборе шрифта внутри текстового процессора, потому что текстовый процессор точно знает, что установлено на вашем компьютере. Но для CSS все эти шрифты подпадают под категорию шрифтов с засечками.

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

R слева - Arial, без засечек, буквально без украшений, в то время как R справа - Times New Roman, и здесь и там есть несколько дополнительных маленьких штрихов. Вообще говоря, люди считают, что шрифты без засечек легче читать на ЖК-дисплее и светодиодном дисплее.

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

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

Результаты в веб-браузере:

Выход:

Результаты в веб-браузере:

Выход:

Результаты в веб-браузере:

Выход:

Результаты в веб-браузере:

Выход:

Результаты в веб-браузере:

Выход:

Семейства шрифтов

Ниже приведено объяснение семейств шрифтов:

Многие дизайны CSS устанавливают для свойства font-family имя определенного шрифта, такого как Arial. Тем не менее, всегда есть вероятность, что определенный шрифт, который вам нужен, например Arial, недоступен в системе данного пользователя. И это одна из причин, по которой вы можете указать столько шрифтов, сколько вы хотели бы в списке, разделенном запятыми, и браузер будет использовать первый из них, который соответствует.

Согласно приведенному выше скриншоту, у нас есть 1- ^й вариант, 2- ^й вариант, и если ни один из этих шрифтов не доступен, мы возвращаемся к универсальному sans-serif, потому что даже если у браузера нет других шрифтов, которые он должен предоставить шрифт по умолчанию для этой категории. Конечно, это поднимает вопрос о том, какие шрифты безопасны для веб-дизайна. Вообще говоря, вы не ошибетесь с Arial, Verdana, Times и Courier, но мы также предоставили список других шрифтов, которые обычно доступны на разных платформах.

Helvetica - это обычный шрифт, который вы видите во многих таблицах стилей, но Helvetica недоступен в Windows. Windows предоставляет вместо этого Arial.

Семейство шрифтов является одним из тех свойств, которые наследуются. Поэтому, если мы установим его на уровне тела, то абзацы, элементы div и якоря, которые находятся внутри этого тела, по умолчанию будут выбирать это семейство шрифтов, если мы не переопределим его. Так, например, этот заголовок здесь, этот тег h1 наследует семейство шрифтов от тела, но это не обязательно должно быть так.

Выход:

Можно сказать, что для h1 семейство шрифтов должно быть Times New Roman, Serif и, если обновлять веб-страницы, изменение отразится.

Размер шрифта и стили

Ниже приведена подробная информация о размерах шрифта и стилях:

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

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

Относительные единицы, такие как проценты или ключевые слова, большие или меньшие или ems, позволяют установить размер шрифта на основе некоторой базовой линии, поэтому 2em будет в два раза больше базовой линии, а 0, 8em будет 80% базовой линии. Многие люди сегодня используют ems для определения относительного размера шрифта. Одна из причин заключается в том, что относительные размеры позволяют пользователю масштабировать текст с помощью своего браузера, и это то, что он может захотеть сделать, потому что текст трудно увидеть. Относительные размеры позволяют это работать.

Результаты в веб-браузере:

Выход:

Некоторые другие свойства шрифта, которые вы можете установить, это стиль шрифта, чтобы заставить курсивный шрифт, или шрифт, чтобы сделать шрифт жирным. А свойство font-option внесет гарнитуру, которая использует только заглавные буквы.

Результаты в веб-браузере:

Выход:

Первое, что мы хотим сделать, это немного подчеркнуть этот элемент h1. Это должен быть элемент h1, потому что это основной заголовок этой страницы, но он слишком велик для нашей точки зрения. Итак, позвольте мне установить размер шрифта до 1, 2 ems. Это немного сбивает с толку, потому что обычно тег h1 будет намного больше 1.2ems. Следующая проблема, которую мы хотим решить, - это список кодов здесь. Мы хотим, чтобы это был моноширинный шрифт, и есть несколько разных способов добиться этого. Для кода в соответствии с ниже.

Результаты в веб-браузере:

Выход:

Результаты в веб-браузере:

Выход:

Здесь мы хотим использовать предварительный тег, что означает, что это предварительно отформатированный текст, и, пожалуйста, не пытайтесь манипулировать им.

Результаты в веб-браузере:

Выход:

Это стенографические свойства стиля шрифта. Как курсив в стиле шрифта, размер шрифта 0, 9em и шрифт семейства шрифтов;

Результаты в веб-браузере:

Выход:

Вывод

Как указать шрифты с помощью CSS и разницу между конкретным шрифтом, таким как Arial, и общими категориями веб-шрифтов, такими как serif и sans-serif. Мы также управляем размерами шрифтов и плюсами и минусами относительных размеров по сравнению с абсолютными размерами, наконец, мы используем свойства шрифтов и изучаем загрузку шрифтов с семейством шрифтов.

Свойства шрифта CSS - Различные свойства шрифта CSS - 5 категорий шрифтов