Свойства шрифта CSS — codemahal
Веб-дизайн с HTML и CSS
🕑 Этот урок займет около 10 минут
В этом уроке мы рассмотрим, как изменить стили шрифтов на веб-странице с помощью кода CSS во внешней таблице стилей. Мы рассмотрим, как изменить толщину шрифта (например, обычный или полужирный), стиль шрифта (например, обычный или курсив), размер шрифта (например, 12pt, 10px, 1em или 100%), семейство шрифтов ( например, Arial или Tahoma), вариант шрифта (например, обычный или с маленькими заглавными буквами) и свойства высоты строки. Мы также рассмотрим, как добавлять комментарии к нашему коду CSS.
Существует два способа изменения значений различных свойств шрифта:
На нескольких строках
На одной строке
Когда мы указываем свойства шрифта в одной строке, это выглядит так (обратите внимание, что есть обязательные значения свойств и некоторый порядок значений — смотрите видео, чтобы узнать больше):
Посмотрите видео ниже, а затем прокрутите вниз, чтобы узнать больше о веб-шрифтах и посмотреть пример кода.
Приведенный ниже пример кода относится к файлу CSS со значениями свойств шрифта, указанными в нескольких строках :
p{
семейство шрифтов: Грузия;
вес шрифта: полужирный;
стиль шрифта: курсив;
размер шрифта: 1em;
} Вот код файла CSS со значениями свойств шрифта, указанными в в одной строке
стр{
шрифт: курсив полужирный 1em Georgia;
} Полный пример
Вот полный код HTML и CSS . файл HTML ссылается на внешнюю таблицу стилей с именем theme.css , которая содержит код CSS:
Вы также можете попробовать задать высоту строки, чтобы отделить каждую строку друг от друга.
Это работает с такими единицами, как em, % и px:
p{
шрифт: курсив полужирный 1em Georgia;
высота строки: 2em;
} Важно иметь представление о четырех различных единицах измерения свойства font-size. Четыре разных единицы:
em — em масштабируется и используется в веб-документах. em равен текущему размеру шрифта веб-документа. Например, если размер документа 12pt, то 1em будет равен 12pt. Таким образом, 2em будет равно 24pt. Вы также можете использовать десятичные дроби, например. 1,5 см. Ems популярны в Интернете, потому что они удобны для мобильных устройств и используются в «отзывчивом» веб-дизайне.
px — Пиксели (px) — это единицы фиксированного размера, предназначенные для носителей, которые будут считываться с экрана. 1 пиксель эквивалентен одной точке на экране компьютера. Недостатком пикселей является то, что они не масштабируются для мобильных устройств или программ чтения с экрана для слабовидящих.
pt — баллы (pt) обычно используются для печати, а также представляют собой единицы фиксированного размера, которые нельзя масштабировать для мобильных устройств. 1 pt = 1/72 дюйма.
% – Проценты (%) аналогичны единицам em, поскольку они также масштабируемы. Например. текущий размер шрифта 12pt = 100%.
Таким образом, единицы em и % — это именно то, что вы хотите использовать для свойства font-size, особенно если вы хотите разрабатывать мобильные или адаптивные веб-сайты. Держитесь подальше от px и pt, так как они не масштабируются для мобильных устройств. Попробуйте привыкнуть к использованию вместо них em и %. Узнайте больше о единицах размера шрифта здесь.
И, наконец, вот обзор некоторых из веб-безопасных шрифтов, которые вы можете включить в CSS:
Serif Fonts:
Georgia, Serif
Palatino Linotipate8
Palatino Linotipate8
- A
Palatino Linotipate8
- A
Palatino8
PALATIN
Palatino, Serif
Times New Roman
Сансоифровые шрифты:
Fonts:
- Courier New535513535555535555555555555355555555 5.
0018Courier, моноширинный
Lucida Console
Monaco, моноширинный
Следующий урок: Использование пользовательских шрифтов 0
10 способов стилизации пользовательских шрифтов Squarespace
Я РЕДКО ИСПОЛЬЗУЮ ЖИРНЫЙ ИЛИ КУРТИС НА ВЕБ-САЙТЕ, КОТОРЫЙ Я РАЗРАБАТЫВАЮ.
И поскольку я не использую их как есть (если только это не фирменные шрифты, запрошенные моим клиентом), они просто потрачены впустую. Пока я не придумал следующие фрагменты кода CSS, чтобы манипулировать ими!
Squarespace не дает вашим стилям шрифтов большой свободы действий. Однако с Squarespace пользовательский шрифт CSS довольно прост в использовании и импорте в стили вашего сайта в Squarespace 7.1. С помощью этих простых шагов вы можете превратить стили полужирного и курсивного шрифта в новые, полностью настраиваемые стили шрифтов. Позволь мне показать тебе!
НАСТРОЙКА СТИЛЯ ЖИРНОГО ШРИФТА ДЛЯ SQUARESPACEИзменение цвета полужирного текста по всему сайту
b, strong {
color: #7cccbd;
межбуквенный интервал: .
1em;
преобразование текста: верхний регистр;
}
Изменить цвет полужирного текста в одном блоке:
#BLOCK-ID {b, strong {
color: #7cccbd;
межбуквенный интервал: .1em;
преобразование текста: верхний регистр;
}}
Изменить цвет полужирного текста в одном разделе:
SECTION-ID {b, strong {
color: #7ccccbd;
межбуквенный интервал: .1em;
преобразование текста: верхний регистр;
}}
НАСТРОЙКА СТИЛЯ КУРСИВА ДЛЯ SQUARESPACEИзменение цвета курсива для всего сайта:
em{
цвет: #7cccbd
межбуквенный интервал: .1em;
преобразование текста: верхний регистр;
}
Изменить цвет курсивного текста в одном блоке:
#BLOCK-ID {em{
color: #7cccbd;
межбуквенный интервал: .1em;
преобразование текста: верхний регистр;
}}
Изменить цвет курсивного текста в одном разделе:
SECTION-ID {em{
color: #7ccccbd;
межбуквенный интервал: .
1em;
преобразование текста: верхний регистр;
}}
Вы можете убрать курсив из заголовков или абзацев, добавив в скобки следующее:
font-style: normal !important;
ПРОДОЛЖАЙТЕ НАСТРАИВАТЬ!Выше я показал, как изменить несколько стилей, но вы можете сделать гораздо больше на своем веб-сайте Squarespace. Вот еще несколько вещей, которые вы можете изменить:
H2 H3 H4 Styles
Font-Family
Font-Weight
Text-Lecoration
. это путем размещения шрифта в контейнере:
Для курсива:
em {
font-size: 12px;
padding: 5px 16px !важно;
цвет: #ffffff;
радиус границы: 20 пикселей;
фон: #319aab;
стиль шрифта: нормальный !важно;
}
Для полужирного шрифта:
b, сильный {
размер шрифта: 12px;
padding: 5px 16px !важно;
цвет: #ffffff;
радиус границы: 20px;
фон: #319aab;
стиль шрифта: нормальный !важно;
}
Если вам нужна дополнительная информация о том, как создавать дизайн с помощью пользовательского CSS, ознакомьтесь с дополнительной информацией на странице «Обучение».
