Войти
s-lub » Учебники » CSS 3 » Текст и шрифт в CSS 3

Текст и шрифт в CSS 3

Текст и шрифт в CSS 3

Благодаря новым свойствам CSS стало возможным украсить текст разными способами.

text-shadow

Свойство text-shadow способно придавать тексту тень, так же можно одновременно предавать одному тексту сразу несколько теней и менять угол их наклона.

Пример:

<head>
<style type='text/css'>
#shadow1,#shadow2,#shadow3 {
font-size:2.5em;
font-family:Arial;
}
#shadow1 {
text-shadow:3px 2px #FFAE00;
}
#shadow2 {
text-shadow:1px 1px 10px #FFAE00;
}
#shadow3 {
text-shadow:2px 2px 2px #FFAE00, 2px 2px 15px #1435AD;
}
</style>
</head>
<body>
<p id="shadow1">Пример простой тени</p>
<p id="shadow2">Пример тени с размытием</p>
<p id="shadow3">Несколько теней одновременно</p>
</body>
</html>

text-overflow

Данное свойство указывает, как должен прерываться текст, если он не влазиет в блок.

- ellipsis – текст заканчивается многоточием, после последнего вместившегося слова.

- clip – текст просто прерывается по окончании области.

Проще показать на примере:

<html>
<head>
<style type='text/css'>
#wrap1 {
width:450px;
border:1px #000 solid;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
#wrap2 {
width:450px;
border:1px #000 solid;
text-overflow:clip;
overflow:hidden;
white-space:nowrap;
}
</style>
</head>
<body>
<p id="wrap1"><b>text-overflow:ellipsis</b> - Текст выходящий за пределы родительского элемента</p>
<p id="wrap2"><b>text-overflow:clip</b> - Текст выходящий за пределы родительского элемента</p>
</body>
</html>

word-wrap

Свойство word-wrap позволяет разделять длинные слова и переносить их на новую строчку, может преследовать три значения:

- Normal - Строки не переносятся или переносятся в тех местах, где явно задан перенос.

- break-word - Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока.

- Inherit - Наследует значение родителя.

Пример:

<html>
<head>
<style type='text/css'>
#wrap1{
width:200px;
height:150px;
padding:10px;
border:1px #000 solid;
}
#wrap2{
width:200px;
height:150px;
padding:10px;
border:1px #000 solid;
word-wrap:break-word;
}
</style>
</head>
<body>
<p id="wrap1">Данный текст вполне обычен, но он имеет <b>оченьоченьоченьоченьоченьдлинноеслово</b>, которое выходит за пределы его содержимого.</p>
<p id="wrap2">С помощью нового CSS3 свойства word-wrap:break-word мы можем разделить <b>оченьоченьоченьоченьоченьдлинноеслово</b> и перенести его на новую строку.</p>
</body>
</html>

font-face

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

Важно помнить что браузер IE читает только форматы шрифтов написанные в формате EOT, все остальные браузеры могут прочитать форматы TTF и OTF.

Правильное подключение своего шрифта к сайту:

@font-face {
font-family:opensans; /* Задаем имя шрифта */
src:url('opensans.woff') /* Указываем местонахождение нашего шрифта */
}

Далее всё как обычно:

div{font-family:opensans;}

Пример использование авторского шрифта с различными эффектами:

<html>
<head>
<style type='text/css'>
@font-face {
font-family:"opensans"; /* Имя шрифта */
src:url('opensans.woff') /* Местонахождение шрифта */
}
/* Подключим курсивную версию шрифта */
@font-face {
font-family:"opensans";
font-style:italic;
src:url('opensans-italic.woff'),;
}
/* Подключим жирную версию шрифта */
@font-face {
font-family:"opensans";
font-style:bold;
src:url('opensans-bold.woff'),;
}
/* Применим подключенный шрифт к абзацам */
p {
font-family:"opensans";
font-size:1em;
}
</style>
</head>
<body>
<p>Для обычного текста будет использован шрифт opensans.</p>
<p><i>Для курсивного текста будет использован шрифт opensans-italic.</i></p>
<p><b>Для жирного текста будет использован шрифт opensans-bold.</b></p>
<p>А это обычный текст с <i>"вставками"</i> курсивного и <b>жирного</b> текста.</p>
</body>
</html>



- Что такое CSS 3 и что в нём изменилось
- Фон и цвет в CSS 3
- Границы и рамки в CSS 3
- Текст и шрифт в CSS 3
- Создание прозрачных элементов и картинок
- Трансформирование в CSS 3
- Линейные градиенты в CSS 3
- Переходы в CSS 3
- Анимация в CSS 3
- Разбивание текста на столбцы
- Заключение