Подключаем нестандартные шрифты. @Font-face для IE 9.

CSS3 позволяет легко и просто подключить нестандартный шрифт с помощью правила @font-face.
Вот так:

@font-face 

{
font-family: "MyFont"; /* Имя шрифта */
src: url(fonts/MyFont.ttf); /* Путь к файлу со шрифтом */
}
 P { font-family: MyFont; }

Для WebKit и Mozilla достаточно этого синтаксиса, но для совместимости с IE придётся повозиться.
Во-первых, IE не поддерживает шрифты в формате .ttf.
Для IE 6-8 версий нужен шрифт в формате .eot, для IE 9 нужен формат .woff.
Поэтому придется переконвертировать наш шрифт в два дополнительных формата, и наш код @font-face будет выглядеть вот так:

@font-face 

{
font-family: "MyFont";
src: url(fonts/MyFont.eot); /* for IE6-8 */
src: local("☺"), url(fonts/MyFont.ttf) format("truetype"), /* for Firefox 3, Safari */
url(fonts/MyFont.woff) format("woff"); /* for IE9 */ 

}

Обратите внимание на смайлик после local.
У меня в IE 9 не работал шрифт с любыми другими символами, кроме этого смайлика.
Подробно об этом чудо-смайлике можно прочесть здесь http://paulirish.com/2010/font-face-gotchas/#smiley

Есть еще одна проблема с woff шрифтом.
IIS 7 не знает такого типа файлов, для него нужно прописать вручную MIME-TYPE, причем тип я указала application/octet-stream , как и для файла .ttf.

IE 6 еще живой?

Обалдеть, неужели кто-то еще серьезно поддерживает IE 6?.. В комментариях к статье по css3 :nth-child селектору возмущаются, что это не работает в IE6. Удивлена. Как они вообще попали на эту статью, да и зачем?.. :)

скругляем углы кроссбраузерно

Вопрос, волнующий, наверно, всех начинающих верстальщиков. Как скруглить углы любому элементу веб-страницы кроссбраузерно?

К всеобщему счастью, на данный момент почти все браузеры понимают свойство css3 border-radius. К всеобщему сожалению, нам до сих пор приходится поддерживать IE 7 и 8 версии, которые, понятное дело, таких вещей не понимают. Выход - использовать плагин, который нам поможет.

Я использую PIE. Из всех плагинов, которые я нашла, PIE единственный, который у меня корректно работает. Он, кстати, умеет не только углы скруглять, но и добавлять в IE свойства box-shadow и linear-gradient.

Итак, качаем файл PIE.htc с css3pie.com. В css пишем:

.element {
-moz-border-radius:8px; //для старых версий FF
border-radius:8px; //css3 для всех современных браузеров
behavior:url('PIE.htc'); //путь к файлу PIE.htc для IE 7-8
}

всё :)