阿里巴巴iconfont的一个奇怪的问题

iou3344 2016-03-07 12:26:19



<!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的方式设置行高也无效（请运行后看红色部分）

...全文

2019 9 打赏收藏转发到动态举报

写回复

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_36517368 2016-10-26

打赏
举报

回复

解决了吗，我也遇到了啊，

a442443285 2016-09-27

打赏
举报

回复

我也遇到了此问题！！！无解啊！！！

xushenkun4 2016-07-27

打赏
举报

回复

我也遇到这个问题，还是导出的字体行距非常高，怎么控制都不行，阿里上面的设置都调整了一遍，还是字体下面行距很高。

jshard 2016-04-10

打赏
举报

回复

引用 5 楼 iou3344 的回复:

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

我今天也遇到这个问题，但是导出了好几遍仍然行距很高

iou3344 2016-03-09

打赏
举报

回复

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

u011151921 2016-03-08

打赏
举报

回复

iou3344 2016-03-08

打赏
举报

回复

你用的是什么浏览器呢？

iou3344 2016-03-07

打赏
举报

回复

引用 1 楼 u011151921 的回复:

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

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

u011151921 2016-03-07

打赏
举报

回复

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

用vue做一款APP开发的时候，在本地文件中引入好font字体文件和字体CSS文件后，运行项目的时候总是提示：Failed to decode downloaded font:，字体图标就显示为一个方框，但是我检查了好几次确定不是引入路径的问题，路径都是对的，也百度了好久，始终没有百度出来。错误提示图片如下：就在我快绝望，想换个字体图标库的时候，我去看阿里适量图标库里面有个生成代码的功...

注册注册阿里巴巴账号不必多说 https://www.iconfont.cn/ 搜索你喜欢的图标，然后加入购物车（不需要花钱的，免费的，不知道他为何弄成了购物车，马云想钱想疯了）完事就添加至项目，没有项目的话就新建一个，这个项目和你的vue项目没有直接关系，随便建，重要的是这个项目生成的链接然后点开我的项目，选择你添加的那个项目，然后选择symbol（那几个我也不知道是干啥用的）下面你添加的图标你可以自己改名，每添加一个图标，你的链接就都会变，这里请注意，如果你多添加了图标，一定要记得更新你的

前言字体图标我相信大家都很熟悉，阿里图标库官网：https://www.iconfont.cn/ 一般我们在开发的时候，都是使用iconfont来管理项目里面的图标。但是我们该如何在小程序中使用彩色的字体图标？效果图：使用步骤 1. 首先就是下载自己需要的彩色图标 2. 解压下载的文件后，进入相应文件打开黑窗口（cmd/git都可以），全局安装iconfont-tools（npm i -g iconfont-tools）,然后运行iconfont-tools，生成iconfont-weapp文

本文详细解析了阿里巴巴矢量图标库（Iconfont）的三种核心使用方式：Unicode、Font Class和Symbol。通过对比分析各自的优缺点、兼容性及适用场景，为前端开发者提供了清晰的选型指南，帮助在不同项目需求下实现图标的高效管理与应用，提升开发效率和项目可维护性。

相信大家在学习css的时候总时对小图标表示不得其解，用的是图片还可以存储下来，用图片解决，单身有一些是奇怪的数字，啊，这，相信大家懂得小白的无赖，开完这篇文章相信大家对矢量图的使用一定更好！阿里矢量图网址https://www.iconfont.cn/打开小编给定的网址就可以看见这样一个好看的网页了。下面进行登录（小编推荐使用 guthub账号！）不会注册不要怕，库的搭建也有说明：小白都可以的注册使用说明在GitHub搭建好库后，下面选择好你的图标（相信大家对自己的选择都不...

61,123

社区成员

60,705

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章