专栏首页IMWeb前端团队iconfont关于content值的坑

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

相关文章

  • iconfont关于content值的坑

    font-carrier是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。

    IMWeb前端团队
  • Iconfont在教育平台的实践

    性能优化是前端开发不得不面对,必须重视的一个经久话题。教育平台项目除了常规的web性能优化外,图片资源站到了流量的70%+,因此图片的性能优化是个重中之重。除了...

    IMWeb前端团队
  • Iconfont在教育平台的实践

    本文作者:IMWeb bleanycao 原文出处:IMWeb社区 未经同意,禁止转载 Iconfont 体系化解决方案 背景 性能优化是前端开发不得...

    IMWeb前端团队
  • 让你的网站用上炫酷的中文字体

    随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体。

    米开朗基杨
  • @font-face 属性

    @font-face 允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式,@font-face 可以消除对用户电脑字体的依赖。 @font-f...

    Html5知典
  • Android开发之 全局替换字体

    第一反应是好简单,换个TypeFace不就完了,但是不可能每个控件去设置一个吧?不存在的。

    Xiaolei123
  • [C#] 常用工具类——直接在浏览器输出数据

    跟着阿笨一起玩NET
  • HTML5基础——文字常用标签(上)

    一、微文概览 标题 字体与字号 颜色 二、详细介绍 1. 标题 我们在HTML文件中写一篇文字时,总会希望将标题的文字设置的大一些,黑一些,粗一些,那么怎样在H...

    用户1667431
  • django2用模板代码图标字体丢失报404 cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff

    玩蛇的胖纸
  • iconfont关于content值的坑

    font-carrier是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券