文章/答案/技术大牛

发布

社区首页 >问答首页 >图标字体-图标高度大于预期

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

Stack Overflow用户

提问于 2014-09-27 22:32:21

回答 4查看 6.9K关注 0票数 9

我在我的项目中使用了fontastic.me生成的图标字体。然而，所有的图标都比预期的要高一点。

以下是代码片段：

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

<!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>

是什么导致了这种影响，我怎样才能摆脱它？

fonts

css

glyph

回答 4

Stack Overflow用户

发布于 2016-06-07 03:21:51

Font Awesome已经开发了一个解决方案来处理这个问题。我在我的font.css文件中创建了一个名为".icon“的新类来镜像他们的解决方案。它似乎在Fontastic中也能很好地工作(确保你在我有“your -icon- font -here”的地方添加了你的字体)。

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

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

票数 19

Stack Overflow用户

发布于 2014-09-27 22:39:09

这是一个线条高度问题。不清楚字符集的其他字形，但根据您的示例，使用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>

票数 4

Stack Overflow用户

发布于 2014-09-27 22:41:48

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

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26075696

复制

相似问题

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

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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