我正在使用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>什么可以导致这种影响,我怎么能摆脱它？
And*_*son 15
Font Awesome已经开发出一个解决这个问题的解决方案.我通过在font.css文件中创建一个名为".icon"的新类来镜像他们的解决方案.它似乎也适用于Fontastic.(确保你添加你的字体,我有"你的图标字体在这里").
.icon {
display: inline-block;
font: normal normal normal 14px/1 "your-icon-font-here";
font-size: inherit;
}
<i class="icon icon-tag"></i>
这是一个行高问题。不清楚字符集中的其他字形，但使用您的示例 CSS\xe2\x80\x94 它使用line-height: 50%;,display: inline-block;并且position: relative;似乎可以工作。我唯一关心的是这line-height: 50%;确实只适用于您所展示的示例。因此不同高度的字形可能只需要其他值。但请尝试一下，看看这是否适合您，或者这个概念是否揭示了更灵活的解决方案。
.icon-camera {\r\n font-size: 40px;\r\n background: #ff0000;\r\n line-height: 50%;\r\n display: inline-block;\r\n position: relative;\r\n}<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <meta charset="utf-8">\r\n <title>JS Bin</title>\r\n <link href="https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/icons.css" rel="stylesheet">\r\n</head>\r\n<body>\r\n <span class="icon-camera"></span>\r\n</body>\r\n</html>