Webfont Kit显示错误的字体....！

Question

我正在尝试安装 http://www.fontsquirrel.com/fonts/lemonchicken 从我的维护页面中看起来应该是，它可以正常工作。

但在我的实际网站上，它看起来像

我的CSS是

/* Add font */
@font-face {
    font-family: 'lemonchickenregular';
    src: url('../font/LEMONCHI-webfont.eot');
    src: url('../font/LEMONCHI-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/LEMONCHI-webfont.woff') format('woff'),
         url('../font/LEMONCHI-webfont.ttf') format('truetype'),
         url('../font/LEMONCHI-webfont.svg#lemonchickenregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* Hide copyright */
.site-info {
    display:none;
}
/* Make main content area white */
.content-area {
    background-color:white;
}
/* Change all font on the website */
* {
    font-family: 'lemonchickenregular';
}

我不确定为什么会显示其他字体。这与我网站上的默认故障不同，但不是我安装的字体。

有什么想法吗？

谢谢！

Answer 1

从不设置CSS规则以应用于*，它会丢失所有可能同时适用的其他规则的冲突解决方案，因为任何其他规则将更加具体，包括浏览器指定的基本样式规则，它们将被应用。在CSS中，任何“更具体”的选择器都会覆盖任何“不太具体”的选择器，这就是为什么p.someclass会覆盖p，以及为什么字面上任何 *不会覆盖您在*中所说的内容。

如果您想要所有内容的级联规则，请在实际元素上设置规则;为内容中最顶层的元素指定font-family，然后使用针对需要它的元素的更具体规则覆盖它。

body {
  font-family: lemonchicken;
}