使用Google字体时，Bootstrap图标（Glyphicons）的位置会稍微上移，我该如何解决这个问题？

Question

如果我在文档的头标签中添加以下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

我该如何解决这个问题？

- Max

---

请参考以下答案：https://dev59.com/LGMl5IYBdhLWcg3wmn84 - Mike Trionfo

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;
}

在您的“Dashboard”按钮中，字体大小似乎大于14px，也许是22px？一种解决方案可能是为您的按钮创建一个替代/扩展选择器，并将vertical-align更改为baseline:

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

但请记住，视觉中心取决于单词;例如，“Dashboard”没有下行线（有关排版解剖学的更多信息，请参见此处）。如果baseline看起来不好，请尝试其他一些方法，在此处查看规范。

@user1751766提出的建议也是可行的。但我建议将.my-class用于从Bootstrap的默认声明中限定此替代声明。

- Osserspe

---

我可以确认谷歌字体与此有关。 - Strudel

Answer 2

转到Bootstrap.css

.glyphicon {
  position: relative;
  <b>top: 11px;</b>
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;

调整 top 的值，直到它对齐你想要的方式。在心形图标上，11px 的数值适合我，但这可能取决于你使用的图标以及使用方式。只需尝试不同数值，直到看起来满意即可。

- Huntario

Answer 3

以下方法对我很有效:

span.glyphicon {
    vertical-align: middle;
    margin-top: -5px;
}

- Mati

Answer 4

我过去曾经和 Bootstrap 一起使用这样的 CSS：

[class^="icon-"] {
margin-top: 3px;
}

只需调整 margin-top 直到看起来合适即可。

祝你好运！

- David Taiaroa