CSS 使用谷歌字体时，CSS Bootstrap 图标(Glyphicons) 的定位会稍微上移，我该如何解决这个问题

在本文中，我们将介绍CSS中使用谷歌字体时，CSS Bootstrap图标（Glyphicons）定位上移的问题，并提供解决方法。

阅读更多：CSS 教程

问题描述

当在项目中同时使用CSS Bootstrap 图标（Glyphicons）和谷歌字体时，会发现图标的定位上移。

问题原因

这个问题的原因是由于两种字体之间的字体度量（font metrics）不同引起的。Glyphicons字体是以像素为单位进行定义和渲染的，而谷歌字体是以EM和REM为单位进行定义和渲染的。当混合使用时，字体大小的度量不匹配，导致图标的位置上移。

解决方案

要解决这个问题，有以下两种解决方案可供选择：

方案一：通过自定义字体大小

第一种解决方案是通过自定义字体大小来匹配CSS Bootstrap图标和谷歌字体的度量。可以使用以下步骤来实现：

找到包含CSS Bootstrap的样式表文件，通常是bootstrap.css或bootstrap.min.css。
找到@font-face规则，这个规则定义了Glyphicons字体。
在该规则下方添加一个新的规则，用于自定义字体大小。例如，可以添加以下代码：

[class^="glyphicon-"],
[class*=" glyphicon-"] {
  font-size: 0.8em;
}

这将在所有Glyphicons图标上应用0.8em的字体大小，可以根据需要进行调整。

方案二：通过调整图标位置

第二种解决方案是通过调整图标的位置来解决。可以使用以下步骤来实现：

找到包含CSS Bootstrap的样式表文件，通常是bootstrap.css或bootstrap.min.css。
找到包含glyphicon类的规则，这些规则定义了Glyphicons图标的样式。
在对应的规则中添加vertical-align: middle;。例如，可以添加以下代码：

.glyphicon {
  vertical-align: middle;
}

这将使用vertical-align属性将图标的垂直对齐方式设置为”middle”，可以根据需要进行调整。

示例说明

以下是使用方案一解决问题的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
  <link href="bootstrap.css" rel="stylesheet">
  <style>
    [class^="glyphicon-"],
    [class*=" glyphicon-"] {
      font-size: 0.8em;
    }
  </style>
</head>
<body>
  <span class="glyphicon glyphicon-search"></span>
  <span class="glyphicon glyphicon-heart"></span>
  <span class="glyphicon glyphicon-star"></span>
</body>
</html>

通过将.glyphicon类的字体大小设定为0.8em，可以使图标的位置与谷歌字体的位置匹配。