博客评论小部件的 CSS 帮助答案

【问题标题】：CSS help for blogger comments widget博客评论小部件的 CSS 帮助
【发布时间】：2014-08-16 23:29:25
【问题描述】：

我已经更改了我的 Blogger cmets 小部件上字体的 CSS，但它仍然停留在我的页面的 Arial 上。我确保在我的模板中安装了相应的 Google API 字体，但它似乎只适用于我的常规帖子中的 cmets。这就是我的常规帖子 cmets 的样子：http://thereadinggrotto.blogspot.sg/2014/06/first-post.html?showComment=1403768355383#c2121347278617355835

这是 cmets 在我的页面上的外观：http://thereadinggrotto.blogspot.sg/p/about-mermaid.html?showComment=1403769230075

这是我博客模板中 cmets 的 CSS：

/* =============================
Comment
============================= */
.comments .comments-content {
  font:normal 13px Cabin, sans-serif;
  text-align:left;
  line-height:1.4em;
  margin-bottom:16px;
  color:#305e58;
}
.comments .comments-content .user {
  font:Cabin, sans-serif;
  font-style:normal;
  font-weight:normal;
  text-transform:uppercase;
  color:#305e58;
}
.comments .comments-content .datetime {
  margin-left:10px;
  font:normal 11px Cabin, sans-serif;
  color:#305e58;
}
.comment-replies{
  background:#d3ebe1;
  box-shadow:inset 0 0 0 1px #d3ebe1;
  border-radius:3px;
}
.comments .comment .comment-actions a {
  background:#edf7f2;
  color:#8ba69b;
  padding:2px 5px;
  margin-right:10px;
  font:10px Cabin, sans-serif;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  transition:.2s linear;
  -moz-transition:.2s linear;
  -webkit-transition:.2s linear;
}
.comments .comment .comment-actions a:hover {
  background:#d6f1ec;
  text-decoration:none;
  transition:.2s linear;
  -moz-transition:.2s linear;
  -webkit-transition:.2s linear;
}
.comments .avatar-image-container {
  border-radius:3px;
}  
.comments .thread-toggle a {
  color:#8ba69b;
}
.comments .thread-toggle a:hover {
  padding-left:10px;
  color:#305e58;
  text-decoration:none;
}
.comments .thread-toggle a:hover, .comments .thread-toggle a {
  transition:.2s linear;
  -moz-transition:.2s linear;
  -webkit-transition:.2s linear;
}
#comments h4 {
  margin:1em 0;
  line-height:1.4em;
  letter-spacing:0em;
  color:#305e58;
  text-transform:uppercase;
  font:normal 20px Yanone Kaffeesatz;
}
#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
}
#comments-block .comment-author {
  margin:.5em 0;
}
#comments-block .comment-body {
  margin:.25em 0 0;
}
#comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
}
#comments-block .comment-body p {
  margin:0 0 .75em;
}
.deleted-comment {
  font-style:italic;
  color:#8ba69b;
}

我们将不胜感激，谢谢！

【问题讨论】：

对我来说看起来不错。客舱字体已应用于people cmets。
我刚刚更新了我的问题，对不起！这是我页面上的 cmets 无法使用的字体。

标签： html css comments blogger

【解决方案1】：

为 cmets-block 添加字体系列，如下所示。

 #comments-block {
 margin:1em 0 1.5em;
 line-height:1.6em;
 font:normal 13px Cabin, sans-serif;
 }

如果这不起作用，则应用 cmets-block 下的所有类，如下所示。

 #comments-block .comment-author {
  margin:.5em 0;
  font:normal 13px Cabin, sans-serif; 
 }
 #comments-block .comment-body {
  margin:.25em 0 0;
  font:normal 13px Cabin, sans-serif;
 }
 #comments-block .comment-footer {
 margin:-.25em 0 2em;
 line-height: 1.4em;
 text-transform:uppercase;
 letter-spacing:.1em;
 font:normal 13px Cabin, sans-serif;
}
#comments-block .comment-body p {
 margin:0 0 .75em;
 font:normal 13px Cabin, sans-serif;
}

【讨论】：