BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Все про CSS » Шрифт текста в CSS и его свойства

Шрифт текста в CSS и его свойства

2013-02-08 / Вр:17:55 / просмотров: 4384

С помощью CSS можно задать любой стиль и вид текста. Добавив стиль текста в CSS, вы сокращаете и упрощаете код  в HTML, а это, в первую очередь, даст быструю загрузку сайта.
Теперь вам не нужно использовать тег <font> в HTML к каждому объекту, достаточно задать правильно правило в таблице стилей CSS.

Шрифт текста в 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 type="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: normalitalicoblique

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 | boldbolder

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

На этой последней ноте я и закончу свою статью "шрифт текста в css и его свойства". Если я что-то пропустил или сделал ошибку, пишите в комментарии.

С уважением Webmasterok2009

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , ,

Мои цели на 2016 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 669
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3663