iconfont关于content值的坑

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码为&#xfffc时在chrome中是失效的:

.i-arrow-top-fffc:before{content: "\fffc";}

 <i class="icon-font i-arrow-top-fffc"></i>
 <i class="icon-font">&#xfffc</i>
 <i class="icon-font">&#65532;</i>

在IE9中是可以出现的。其他版本的IE估计也是跪... 我猜测原因可能是这样的:

  1. 首先Unicode码为&#xfffc的值是""。你没看错,就是空
  2. 那么在chrome浏览器中,上述三种<i>的使用使得webkit引擎在解析的时候,认为元素具有空的content,相等于<i></i>那么就算写成了unicode码的形式,映射到了字体,也不会有宽度~所以没有显示!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

使用多个Target去管理项目版本环境

在实际开发中,为了保证所开发的产品能够尽量完美上线,在上线前会特意测试几轮,保证所开发的应用没有问题。据此,在实际的开发过程中,往往需要区分测试环境和线上环境,...

18610
来自专栏数据小魔方

符号的艺术

今天跟大家聊聊ppt中的符号艺术——项目符号! ▼▼▼ 大家在word排版过程中,如果内容很长并且逻辑性很强的话,都会下意识的使用项目符号,使得文章结构分明,逻...

3565
来自专栏Java成神之路

博客园_01_为博客园添加目录的方法总结

本文转自:作者:妙音天女    地址:http://www.cnblogs.com/xuehaoyue/p/6650533.html

622
来自专栏向治洪

使用多个Target去管理项目版本环境

在实际开发中,为了保证所开发的产品能够尽量完美上线,在上线前会特意测试几轮,保证所开发的应用没有问题。据此,在实际的开发过程中,往往需要区分测试环境和线上环境,...

1946
来自专栏Core Net

微信小程序:动画(Animation)

官方文档是这样说的:①创建一个动画实例 animation。②调用实例的方法来描述动画。③最后通过动画实例的 export 方法导出动画数据传递给组件的 ani...

571
来自专栏电光石火

所有前端都必须知道的 jQuery 技巧

前端是一个很繁杂的工作,在工作中会考虑到很多细节,也许有时候一个细节没有处理好,就会造成很大的麻烦。但是一些小技巧就能够避免。作为一个新手,即使掌握一个小技...

1797
来自专栏Windows Community

Windows 8.1 应用再出发 - 几种更新的控件

Windows 8.1 除了新增了很多很有用的控件外,还对一些控件做出了更新。接下来我们一起对这些更新的控件一一做出讲解。 1. FlipView 更新 翻转视...

3498
来自专栏前端说吧

CSS-三栏响应式布局(左右固宽,中间自适应)的五种方法

2773
来自专栏Nian糕的私人厨房

JavaScript 九宫格抽奖

这是之前国庆活动所做的一个新功能,以往抽奖都是采用转盘的形式,这次换了个新的玩法,折腾了两天才实现,主要代码出自哪里已经无法考究了,我做了部分优化,贴上来给大家...

1037
来自专栏PHP在线

表单提交刷新页面问题

今天开发中遇到了一个问题,刚开始没有头绪,不知道怎样解决,后来静下来一想,搜索下吧,经过搜索相关资料,很好的解决。 <form name="keywordFor...

2546

扫码关注云+社区