CSS селектор за използване за sIFR меню

Използвах sIFR успешно за прости приложения като заглавия, опитвам се да използвам два различни шрифта едновременно - един за заглавие и един за меню.
Заглавието работи, но не и меню. Използвам темата Tofurious Wordpress. Това е разделът от листа със стилове на темата, който управлява шрифта на менюто и стиловете на връзките:

/*MENU COLORS****************/
#menu {
 background:#bc7d90;
}

#menu li a {
 font:11px Arial, Helvetica, sans-serif; /*MENU FONT STYLES*/
 text-transform: uppercase;
 color:#fff; /*MENU FONT COLOR*/
}

#menu li a:hover {
 color:#ecd1d9; /*MENU FONT COLOR WHEN HOVERING*/
} 

Въведох #menu li a като Item To Replace на страницата с настройки на sIFR и след това използвах този код:

.sIFR-root { font-size:15px; font-weight:normal; color:#fff; }
a { text-decoration:none; color:#fff; }
a:hover { color:#fff; }

Шрифтът се появява - но не с нито един от стиловете, посочени по-горе, и се появява в блога по неочакван начин. Можете да видите примера на този адрес: www.laurenparkinson.com/blog

Освен това действителните елементи на подменюто изобщо не се показват.


person Kara    schedule 28.01.2010    source източник
comment
doctype.com е дъщерен сайт на StackOverflow, но относно HTML, CSS и т.н.   -  person SF.    schedule 29.01.2010


Отговори (1)


Ще си направите голяма услуга, като се откажете напълно от sIFR за @font-face, който вече се поддържа във всички основни браузъри, включително IE от версия 4 (повече информация за съвместимост: http://webfonts.info/wiki/index.php?title=@font-face_browser_support).


@font-face {
 font-family: myFont1;
 src: url('myFont1.eot'); /*For IE*/
 src: local('myFont1'), url('myFont1.ttf') format('truetype');
}
@font-face {
 font-family: myFont2;
 src: url('myFont2.eot'); /*For IE*/
 src: local('myFont2'), url('myFont2.ttf') format('truetype');
}

#header{
 font-family: myFont1, Georgia, Times New Roman, Serif;
}

#menu {
 font-family: myFont2, Verdana, Arial, Sans-serif;
}

Просто се уверете, че вашите шрифтове са лицензирани за вграждане.

Онлайн eot конвертор: http://www.kirsle.net/wizards/ttf2eot.cgi

person emmychan    schedule 29.01.2010