С помощью CSS можно задать любой стиль и вид текста. Добавив стиль текста в CSS, вы сокращаете и упрощаете код в HTML, а это, в первую очередь, даст быструю загрузку сайта.
Теперь вам не нужно использовать тег <font> в HTML к каждому объекту, достаточно задать правильно правило в таблице стилей CSS.
Свойства шрифта
Чтобы сделать изменение шрифта в CSS, ознакомьтесь с правилами и с его свойствами.
1). Чтобы задать определенный шрифт заголовку, тексту или сайту в целом, существует в CSS правило font-family.
font-family
P {font-family: Arial, serif;}
Пример:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Шрифт</title> <style ENGINE="text/css"> p { font-family: Arial, Helvetica, Verdana, sans-serif; /* выбор шрифта */ } </style> </head> <body> <H1>Заголовок</H1> <p>Ваш текст</p> </body> </html>
Результат:
Всему параграфу <p> будет присвоено шрифт "Arial".
Заметка:
Часто используемые шрифты: "Verdana", "Arial", "Times New Roman".
2). Если вы хотите поменяет стиль шрифта, воспользуйтесь правилом font-style.
font-style: normal | italic | oblique
p {font-style: italic;}
Значения.
normal - нормальный шрифт;
italic - курсив;
oblique - наклонный шрифт.
Пример:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Шрифт</title> <style type="text/css"> p {font-style: italic; /* меняем стиль шрифта */ } </style> </head> <body> <H1>Заголовок</H1> <p>Ваш текст</p> </body> </html>
3). Если вы хотите сделать слово или текст жирным, используйте правило font-weight.
font-weight: normal | lighter | bold | bolder
p {font-weight: bold;}
Значения.
normal - нормальная жирность
lighter - светлое начертание
bold - полужирный
bolder - жирный
100–900 - 100 — светлый шрифт, 900 — самый жирный
Пример:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Шрифт</title> <style type="text/css"> p {font-weight: bold; /* текст будет полужирный */ } </style> </head> <body> <H1>Заголовок</H1> <p>Ваш текст</p> </body> </html>
4). Если нужно указать размер шрифта, используйте правило font-size. Размер задается в pt - пункты, px - пиксели и в % - процентах.
font-size
p {font-size: 12px;}
Пример:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Шрифт</title> <style type="text/css"> p {font-size: 12px; /* текст будет 12px */ } </style> </head> <body> <H1>Заголовок</H1> <p>Ваш текст</p> </body> </html>
5). Хочу вам предложить сокращённый способ вышеперечисленных правил. Воспользуйтесь правилом font.
font
Пример:
Стандартный способ:
p { font-style: italic; font-weight: bold; font-size: 24px; font-family: arial, sans-serif; }
Сокращенный способ:
p { font: italic bold 24px arial, sans-serif; }
Примечание: Все значения указывайте через пробел!!!
Нестандартный шрифт
6). Бывают такие моменты, когда нужно использовать для оформления сайта нестандартный шрифт. Нестандартный шрифт - это шрифт, который не устанавливается на компьютере по умолчанию и вероятней его может не быть у пользователя.
Правило @font-face позволяет импортировать внешний файл шрифтов в документ.
Подключение нестандартных шрифтов с помощью CSS
Залейте нестандартный шрифт формата ttf (другой формат я вам не рекомендую) в папку вашего сайта. Для примера я возьму шрифт под именем "DS-UncialFunnyHand-Medium.ttf".
Пример:
Пример подключения нестандартного шрифта.
@font-face { font-family: DS-UncialFunnyHand-Medium; /* имя шрифта для CSS правил */ src: local("DS-UncialFunnyHand-Medium"), /* проверяем наличие шрифта в ОС пользователя */ url(DS-UncialFunnyHand-Medium.ttf); /* если шрифт не установлен, тогда загружаем его по указанному пути */ }
Разъяснения:
font-family: - здесь пишем имя шрифта.
src: local("....") - проверка наличия шрифта на компьютере пользователя
url(...) - если шрифт у пользователя на компьютере не установлен, тогда шрифт будет загружается с сайта по указанному пути .
Полный пример:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Шрифт</title> <style type="text/css"> @font-face { font-family: DS-UncialFunnyHand-Medium; /* имя шрифта для CSS правил */ src: local("DS-UncialFunnyHand-Medium"), /* проверяем наличие шрифта в ОС пользователя */ url(DS-UncialFunnyHand-Medium.ttf); /* если шрифт не установлен, тогда загружаем его по указанному пути */ } p{ font-family: "DS-UncialFunnyHand-Medium"; } </style> </head> <body> <p>нестандартный шрифт</p> </body> </html>
Результат:
На этой последней ноте я и закончу свою статью "шрифт текста в css и его свойства". Если я что-то пропустил или сделал ошибку, пишите в комментарии.
С уважением Webmasterok2009
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330379 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274712 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222617 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187978 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186569
Добавить комментарий
Метки: css, для начинающих, основы
Спасибо, Александр за комментарий. Планирую еще пару постов для WooCommerce…
⇒ Открыть статью ⇐