<!doctype html>
<head>
<title>阿里巴巴iconfont的一个奇怪的问题</title>
<style type="text/css">
@font-face {
font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_1457323240_443564.eot'); /* IE9*/
src: url('//at.alicdn.com/t/font_1457323240_443564.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//at.alicdn.com/t/font_1457323240_443564.woff') format('woff'), /* chrome、firefox */
url('//at.alicdn.com/t/font_1457323240_443564.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/font_1457323240_443564.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:18px;
height:20px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<li><i class="iconfont"></i> <a href="#">啊啊啊啊啊</a></li>
<li><i class="iconfont"></i> 啵啵啵啵啵</li>
<li><i class="iconfont" style="background:#FF0000;height:20px;"></i> 擦擦擦擦擦</li>
<li><i class="iconfont"></i> <a href="#">啊啊啊啊啊</a></li>
<li><i class="iconfont"></i> 啵啵啵啵啵</li>
<li><i class="iconfont"></i> 擦擦擦擦擦</li>
<li><i class="iconfont"></i> <a href="#">啊啊啊啊啊</a></li>
<li><i class="iconfont"></i> 啵啵啵啵啵</li>
<li><i class="iconfont"></i> 擦擦擦擦擦</li>
</body>
</html>
初学iconfont，无论是把字体和css下载到本地，还是在线链接，我在没有做其他任何css设置的情况下，应用这些字体时，为什么每个<i></i>的行间距变的这么大呢？默认都是54px，就算在标签内部通过style的方式设置行高也无效（请运行后看红色部分）
9 个解决方案
#1
我看到的<i>大小是18px，是正常的，因为你font-size设置的就是18。。如果要改变大小，把display值设置为block，宽高就可以改变了。
#2
宽度是18px没问题，但是我问的是为什么行间距变成了54px呢？你按F12就可以看到了。
#3
#4
你用的是什么浏览器呢？
#5
此贴结贴，实在因为一个低级错误，和CSS无关，只是阿里巴巴平台的这个字体导出的有问题，重新做了一遍就正常了。不好意思。。。分就给你吧。
#6
我今天也遇到这个问题，但是导出了好几遍 仍然行距很高
#7
我也遇到这个问题，还是导出的字体行距非常高，怎么控制都不行，阿里上面的设置都调整了一遍，还是字体下面行距很高。
#8
我也遇到了此问题！！！无解啊！！！
#9
解决了吗，我也遇到了啊，
#1
我看到的<i>大小是18px，是正常的，因为你font-size设置的就是18。。如果要改变大小，把display值设置为block，宽高就可以改变了。
#2
宽度是18px没问题，但是我问的是为什么行间距变成了54px呢？你按F12就可以看到了。
#3
#4
你用的是什么浏览器呢？
#5
此贴结贴，实在因为一个低级错误，和CSS无关，只是阿里巴巴平台的这个字体导出的有问题，重新做了一遍就正常了。不好意思。。。分就给你吧。
#6
我今天也遇到这个问题，但是导出了好几遍 仍然行距很高
#7
我也遇到这个问题，还是导出的字体行距非常高，怎么控制都不行，阿里上面的设置都调整了一遍，还是字体下面行距很高。
#8
我也遇到了此问题！！！无解啊！！！
#9
解决了吗，我也遇到了啊，