Настройка шрифта CSS
CSS - Настройка фона
| |
 | |
| Селектор: | body; table; tr; th; div; #name |
| Свойство: | font-family; font-size; color; font-weight; font-style; text-align; text-decoration; |
| Значения: | |
Очень важно для любого сайта то, как выглядит шрифт, какого он размера, цвета, расположения и так далее, так как это влияет на восприимчивость текста и в последствии информации размещённой на странице. Благодаря настройкам CSS можно задать по умолчанию настройки размера, цвета и самого шрифта для всего сайта в целом, либо задавать нужные настройки шрифта в отдельно взятом блоке <div> или таблице <table> и в других элементах на странице.
Использование CSS для оформления сайтов можно обсудить в специально созданной теме нашего форума.
Настройки шрифта в CSS
Внутри любого блока можно задать параметры шрифта: его размер, цвет, тип шрифта и его выравнивание следующим образом:
#name {
font-family: Verdana;
font-size: 11px;
color: blue;
font-weight:bold;
text-align: center;
border: 1px solid black;
text-decoration: underline;
}
Получаем:
Пояснение к параметрам
font-family- тип шрифта, использовать можно стандартные шрифты, значения: Arial, Verdana, Times New Roman и так далее. Можно использовать нестандартные шрифты, но их нужно загрузить на сервер и в css прописать:font-size- размер шрифта, можно задавать в пикселяхcolor- цвет шрифта, значения задаются словами либо в цифровом значении, как описано вышеfont-weight- возможность сделать текст жирным, значение: bold - жирныйfont-style- возможность сделать текст курсивным, значения: italic - курсив, или normal - обычный шрифтtext-align- выравнивание текста, значения: right - выравнивание по правой стороне center - выравнивание по центру left - выравнивание по левой сторонеtext-decoration: underline- подчёркивает текст линией.
Можно задать тип шрифта на всей странице, чтобы не придавать это значение отдельному блоку по отдельности:
body {font-family: Verdana;}
В этом случае на всех страницах по умолчанию будет отображаться только шрифт Verdana и указывать его в отдельных блоках не нужно. Но изменить в отдельно взятом блоке шрифт можно точно также, как в вышеописанном примере. Тэг <body> универсален, в CSS можно задавать цвет фона, тип шрифта, отступы и другие настройки всем страницам одновременно, что облегчает жизнь веб-мастеру, если вносятся какие-либо изменения в дизайн сайта.
Дополнительные параметры для настройки шрифта
line-height(высота строки): Это свойство определяет высоту строки текста. Установка подходящего значения line-height может улучшить читаемость текста.
#name {
line-height: 1.5; /* Множитель, например, 1.5 */
}
letter-spacing(межбуквенное расстояние): Это свойство контролирует расстояние между символами текста.
#name {
letter-spacing: 1px; /* Расстояние в пикселях */
}
text-transform(преобразование текста): Позволяет управлять видом текста, например, сделать его заглавными буквами.
#name {
text-transform: uppercase; /* Заглавные буквы */
}
white-space(пробелы): Это свойство позволяет контролировать отображение пробелов и переносов строк в тексте.
#name {
white-space: nowrap; /* Запрет переноса строк */
}
text-shadow(тень текста): Добавляет тень к тексту, что может придать ему дополнительный визуальный эффект.
#name {
text-shadow: 2px 2px 4px #000000; /* Горизонтальное смещение, вертикальное смещение, размытие, цвет тени */
}
Примечание
Если же возникли трудности и есть какие-либо вопросы, как задать параметры тексту на странице или всему сайту, то можно задать вопрос в специально созданной теме про CSS на нашем форуме.
