用于 sIFR 菜单的 CSS 选择器答案

【问题标题】：CSS selector to use for sIFR menu用于 sIFR 菜单的 CSS 选择器
【发布时间】：2011-01-10 15:33:40
【问题描述】：

我已成功地将 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*/
}

我在sIFR设置页面输入#menu li a作为Item To Replace，然后使用了这个代码：

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

字体出现了 - 但不是上面指定的任何样式，它以一种意想不到的方式出现在博客上。您可以在此地址查看示例：www.laurenparkinson.com/blog

另外，实际的子菜单项根本没有出现。

【问题讨论】：

doctype.com 是 StackOverflow 的姊妹网站，但涉及 HTML、CSS 等。

标签： css wordpress menu sifr selector

【解决方案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

【讨论】：