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 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

Android Material Design系列之主题样式介绍说明等

今天这篇文章应该算是Material Design系列的补充篇,因为这篇文章本来应该放到前面讲的,因为讲的是主题嘛,对于一些状态和颜色的介绍,因为我们一新建一个...

1827
来自专栏程序你好

在网站或桌面应用使用Font Awesome图标库

1172
来自专栏Scott_Mr 个人专栏

React Native 系列(三) -- 项目结构介绍

3456
来自专栏菩提树下的杨过

ExtJs学习笔记(9)_Window的基本用法

以下就是ExtJs的官方示例,只不过加了几行注释,呵 <html> <head> <meta http-equiv="Content-Type" conte...

1926
来自专栏coding for love

我的前端技能树

客户端存储:Cookie,Web Stroge(Local&Session),离线缓存。

632
来自专栏MixLab科技+设计实验室

DIY一个Sketch插件,生成猫猫狗狗的全家福

最近朋友圈都在玩的全家福: ? 看了下是使用 cocos2D 引擎制作的, http://www.cocos.com/creator 主要是图片合成,利用前端...

2757
来自专栏木头编程 - moTzxx

微信小程序Ⅷ [WXSS 小知识积累]

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

951
来自专栏青玉伏案

窥探Swift编程之在Playground上尽情的玩耍

  自从苹果公司发布Swift的时候,Xcode上又多了一样新的东西---"Playground"。Playground就像操场一样,可以供我们在代码的世界里尽...

1898
来自专栏iOS开发日记

iOS开发系列——Storyboard

到目前为止我们还没有解释我们的程序是如何显示默认视图界面的。做过WinForm程序的朋友都知道每个Window窗口界面都有一个设计器(对应一个设计文件),其实在...

3204
来自专栏Windows Community

Windows 8.1 应用再出发 - 几种新增控件(1)

Windows 8.1 新增的一些控件,分别是:AppBar、CommandBar、DatePicker、TimePicker、Flyout、MenuFlyou...

3099

扫码关注云+社区