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

相关文章

来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.5K7
来自专栏跟着阿笨一起玩NET

c#实现打印功能

3902
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

3035
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2956
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

39510
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

8918
来自专栏张善友的专栏

Silverlight + Model-View-ViewModel (MVVM)

     早在2005年,John Gossman写了一篇关于Model-View-ViewModel模式的博文,这种模式被他所在的微软的项目组用来创建Expr...

3358
来自专栏杨龙飞前端

scrollto 到指定位置

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

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

27510
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2902

扫码关注云+社区