html - 博客评论小部件的 CSS 帮助

Question

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

这是评论在我的页面上的样子:http://thereadinggrotto.blogspot.sg/p/about-mermaid.html?showComment=1403769230075

这是我博客模板中评论的 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;
}

不胜感激，谢谢!

Answer 1

为评论 block 添加字体系列，如下所示。

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

如果这行不通，那么应用评论 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;
}