css3 – 使用Google字体时,Bootstrap图标(Glyphicons)位置稍微上升,我该如何解决这个问题？

如果我在文档的标题中添加以下Google字体

<link href="http://fonts.googleapis.com/css?family=Muli|Dosis:500,400|Open+Sans" rel="stylesheet">

引导图标(Glyphicons)位于稍微上方,您可以在此链接中看到：http://www.acarrilho.com/wp-content/uploads/2012/07/icon_off.png

如何解决这个问题？

解决方法

我不认为问题是关于Google字体,而是font-size和vertical-align的组合. Bootstrap中图标的默认字体大小为14px,在图标的声明中我们有vertical-align：text-top;请参见下面的代码.

[class^="icon-"],[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}

在“仪表板”按钮中,字体大小似乎大于14px,也许是22px？一个解决方案可能是为您的按钮创建替代/扩展选择器,并将垂直对齐方式更改为基线：

[class^="icon-"] .my-class,[class*=" icon-"] .my-class {
  vertical-align: baseline;
}

但请记住,视觉中心依赖于这个词; “仪表板”例如没有下降(见更多约the anatomy of typography).如果基线看起来不太好尝试其他一些,见specification here.

@ user1751766的建议解决方案也是可行的.但是我建议.my类从Bootstrap的默认声明中对这个替代声明进行定义.