> 웹 프론트엔드 > HTML 튜토리얼 > 阿里巴巴iconfont的一个奇怪的问题_html/css_WEB-ITnose

阿里巴巴iconfont的一个奇怪的问题_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:24:50
원래의
1208명이 탐색했습니다.

<!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">&#xe60d;</i> <a href="#">啊啊啊啊啊</a></li><li><i class="iconfont">&#xe613;</i>  啵啵啵啵啵</li><li><i class="iconfont" style="background:#FF0000;height:20px;">&#xe610;</i>  擦擦擦擦擦</li><li><i class="iconfont">&#xe60d;</i> <a href="#">啊啊啊啊啊</a></li><li><i class="iconfont">&#xe613;</i>  啵啵啵啵啵</li><li><i class="iconfont">&#xe610;</i>  擦擦擦擦擦</li><li><i class="iconfont">&#xe60d;</i> <a href="#">啊啊啊啊啊</a></li><li><i class="iconfont">&#xe613;</i>  啵啵啵啵啵</li><li><i class="iconfont">&#xe610;</i>  擦擦擦擦擦</li></body></html>
로그인 후 복사


初学iconfont,无论是把字体和css下载到本地,还是在线链接,我在没有做其他任何css设置的情况下,应用这些字体时,为什么每个的行间距变的这么大呢?默认都是54px,就算在标签内部通过style的方式设置行高也无效(请运行后看红色部分)


回复讨论(解决方案)

我看到的大小是18px,是正常的,因为你font-size设置的就是18。。如果要改变大小,把display值设置为block,宽高就可以改变了。

我看到的大小是18px,是正常的,因为你font-size设置的就是18。。如果要改变大小,把display值设置为block,宽高就可以改变了。



宽度是18px没问题,但是我问的是为什么行间距变成了54px呢?你按F12就可以看到了。

你用的是什么浏览器呢?


此贴结贴,实在因为一个低级错误,和CSS无关,只是阿里巴巴平台的这个字体导出的有问题,重新做了一遍就正常了。不好意思。。。分就给你吧。

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿