Мне нельзя говорить, что шрифты = головная боль веб-дизайнеров.
Потому что (по-честному) это не так.
Прошли времена, когда ради красивого оформления вместо текста подставляли картинки.
Сейчас CSS позволяет вытворять с буковками такие штучки, что остаётся только радоваться и хлопать в ладоши.
Итак, 3 приёма, кт стоит помнить наизусть.
#01. Импорт@font-face {
font-family: "Nani";
src: url('Nani.otf');
}
body {
font-family: Nani, "Helvetica Neue", sans-serif;
}
Что видим: сначала мы указываем название шрифта и адрес, по кт он располагается → затем применяем его в CSS, как любой другой.
В зависимости от размера шрифта, подгружаться будет много или мало секунд .)
У этого же трюка есть более крутой вариант:
@font-face {
font-family: 'Nani';
src: url('Nani.eot');
src: local('Nani Regular'), local('Nani'),
url('Nani.otf') format('opentype');
}
В отличие от первого, эта штучка сначала ищет нужный шрифт на пк, и уже если не находит, тогда да, загружает.
Подробнее на CSS-Tricks
(>>)#02. Поворот.rotate {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Это = наикрутейшая штуковина ever.
Она поворачивает текст хоть по диагонали, хоть вверх тормашками.
Угол поворота задаётся в градусах, что полностью развязывает руки.
Для IE значение = целое число от 0 до 3, где 0 = 0°, 1 = 90°, 2 = 180°, а 3 = 270°.
Искать на том же CSS-Tricks
(>>)#03. Тени/* Одна штука схематично*/
p { text-shadow: Q W E R; }
/* Две штуки конкретно */
p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }
/* Как вариант можно указать RGBA цвет */
p { text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); }
Спорный, но интересный приём.
Для каждой тени задаём четыре значения:
Q = длина тени по оси X (читай: горизонтально);
W = длина тени по оси Y (читай: вертикально);
E = радиус размытости;
R = цвет.
Всё тот же CSS-Tricks
(>>)Вот.
Вопросы?