iconfont关于content值的坑
iconfont关于content值的坑
IMWeb前端团队
发布于 2017-12-29 11:20:42
发布于 2017-12-29 11:20:42
font-carrier是一个功能强大的字体操作库，使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。
//可以设置某个字对应的形状,当然unicode也是支持的
font.setSvg('我',fs.readFileSync('./test/svgs/circle.svg').toString())
//也可以使用setGlyph可以设置更多信息
font.setGlyph('我',{
glyphName:'我',
horizAdvX:'1024',//设置这个字形的画布大小为1024
svg:fs.readFileSync('./test/svgs/circle.svg').toString()
})上面是其官方的接口阐述，我们在网站中使用Iconfont一般都是通过unicode的：
@font-face {
font-family: "webfont";
src: url("./fonts/webfont.eot");
src: url("./fonts/webfont.eot?#iefix") format("embedded-opentype"),
url("./fonts/webfont.woff") format("woff"),
url("./fonts/webfont.ttf") format("truetype");
font-weight: normal; font-style: normal;
}
.icon-font {
font-family: "webfont"; speak: none; font-style: normal; font-weight: normal; font-variant: normal;
text-transform: none; line-height: 1; font-size: 16px; position: relative; vertical-align: 0;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.i-arrow-top:before{content: "\ffff";}对iconfont不熟悉的可以先浏览这里 但是！ 最近我使用font-carrier生成字体在网站中使用发现一件神奇的事情，在生成的字体文件中，content值对应unicode码为时在chrome中是失效的：
.i-arrow-top-fffc:before{content: "\fffc";}
<i class="icon-font i-arrow-top-fffc"></i>
<i class="icon-font"></i>
<i class="icon-font"></i>在IE9中是可以出现的。其他版本的IE估计也是跪... 我猜测原因可能是这样的：
- 首先Unicode码为的值是""。你没看错，就是空
- 那么在chrome浏览器中，上述三种
<i>的使用使得webkit引擎在解析的时候，认为元素具有空的content,相等于<i></i>那么就算写成了unicode码的形式，映射到了字体，也不会有宽度~所以没有显示!
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读