css - 使用 Google 字体时，Bootstrap 图标 (Glyphicons) 位置稍微向上，我该如何解决这个问题？

Question

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

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

Bootstrap 图标 (Glyphicons) 位置略微向上，如您在以下链接中所见:http://www.acarrilho.com/wp-content/uploads/2012/07/icon_off.png

我该如何解决这个问题？

Answer 1

我认为问题不在于 Google 字体，而在于字体大小和垂直对齐的组合。 Bootstrap 中图标的默认字体大小为 14px，在 icon- 的声明中我们有 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？一种解决方案可能是为您的按钮创建替代/扩展选择器并将 vertical-align 更改为 baseline:

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

但请记住，视觉中心取决于单词；例如，“仪表板”没有下部(请参阅更多关于 the anatomy of typography 的信息)。如果 baseline 看起来不太好，请尝试其他一些，请参阅 specification here .

@user1751766 建议的解决方案也是可行的。但我建议 .my-class 从 Bootstrap 的默认声明中确定这个替代声明的范围。