Question

我在我的项目中使用fontastic.me生成的图标字体。但是，所有图标都按预期略高一些。

这里的代码段：

＆＃13;

.icon-camera {
  font-size: 40px;
  background: #ff0000;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link href="https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/icons.css" rel="stylesheet">
</head>
<body>
  <span class="icon-camera"></span>
</body>
</html>

＆＃13;

什么可能导致这种影响，我怎么能摆脱它呢？

Answer 1

Font Awesome已经开发出一种解决方案来解决这个问题。我通过创建一个名为＆＃34; .icon＆＃34;的新类来反映他们的解决方案。在我的font.css文件中。它似乎也适用于Fontastic。（确保你在我所拥有的地方添加你的字体＆＃34;你的图标 - 字体 - 这里＆＃34;）。

.icon {
    display: inline-block;
    font: normal normal normal 14px/1 "your-icon-font-here";
    font-size: inherit;
 }

<i class="icon icon-tag"></i>

Answer 2

这是线高问题。不清楚字符集中的其他字形，但使用您的示例这个使用line-height: 50%;，display: inline-block;和position: relative;的CSS似乎有效。我唯一担心的是line-height: 50%;真的只适用于您展示的示例。所以不同高度的字形可能只需要其他值。但是试验一下，看看这是否适合你，或者这个概念是否能够提供更灵活的解决方案。

.icon-camera {
  font-size: 40px;
  background: #ff0000;
  line-height: 50%;
  display: inline-block;
  position: relative;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link href="https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/icons.css" rel="stylesheet">
</head>
<body>
  <span class="icon-camera"></span>
</body>
</html>

Answer 3

如果你想做我要告诉你的事情，那么你应该让icons.css文件脱机。我的意思是不在<link rel= ...中引用并在<style></style>部分的head之间使用它。在文件中：

https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/icons.css

您可以看到以下代码：

@font-face {
  font-family: "app-icons";
  src:url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.eot");
  src:url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.eot?#iefix") format("embedded-opentype"),
    url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.woff") format("woff"),
    url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.ttf") format("truetype"),
    url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.svg#1411745016") format("svg");
  font-weight: normal;
  font-style: normal;
}

你应该添加font-size:small这应该是这样的：

@font-face {
  font-family: "app-icons";
  src:url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.eot");
  src:url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.eot?#iefix") format("embedded-opentype"),
    url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.woff") format("woff"),
    url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.ttf") format("truetype"),
    url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.svg#1411745016") format("svg");
  font-weight: normal;
  font-style: normal;
  font-size: small;
}

Answer 4

.icon-camera {
  display: inline-block; /* add line */
  line-height: 1; /* add line */
  font-size: 40px;
  background: #ff0000;
}
.icon-camera:before {
  display: inline-block; /* add line */
  vertical-align: top; /* add line. maybe it's not necessary */
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link href="https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/icons.css" rel="stylesheet">
</head>
<body>
  <span class="icon-camera"></span>
</body>
</html>

图标字体 - 图标高度大于预期

4 个答案: