如何在 Holder.js 图片中使用 Bootstrap Glyphicons

Question

我正在使用Bootstrap构建项目的前端，想要使用3.0.0中的Glyphicons代替常规文本。我该如何做？

如果你熟悉Holder.js，你就会知道这个JS基本上在客户端创建占位符图像。这有助于节省带宽，因为你只需要下载脚本的体积（大约4Kb），然后让客户端的机器生成图像。

我想将Glyphicons与Holder.js结合起来，以便随时生成大型高质量的图标。

在Bootstrap中调用Glyphicon很简单，如下所示：

<span class="glyphicon glyphicon-user"></span>

使用holder.js调用动态图片并显示“Hello World”文本的方法如下：

<img data-src="holder.js/200x200/text:Hello World">

我理解 Bootstrap CSS 把 Glyphicon 类定义为一个字体，然后使用伪元素 before 调用被二级类定义的特定字符。参见下面：

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

.glyphicon-user:before {
    content: "\e008";
}

如何轻松传递正确字体的特定 glyphicon 字符到holder.js，以输出图像图标？

- Samuel Hawksby-Robinson

Answer 1

好的，所以这没有引起任何人的兴趣。但我已经为自己解决了这个问题，并且认为与社区分享我的解决方案是良好的礼仪。

我必须做两件事情。在我意识到holder.js将JavaScript画布绘制解析为png图像文件之后，这个问题不再是一个“holder.js”问题，而更像是一个纯JS和Web字体/字体面问题。

第一件事：我必须明确告诉系统Glyphicons是字体，并且我是如何引用它们的。我使用以下CSS来实现：

@font-face {
            font-family: 'Glyphicons Halflings';
            font-style: normal;
            font-weight: normal;
            src: local('Glyphicons Halflings'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype');
        }

第二步：一旦浏览器知道我使用的字体的名称、位置和类型，我就可以开始使用它将Unicode字符传递给JS画布对象。Holder.js有一个名为“settings”的变量，其中包含一个“主题”数组，我向该数组中添加了以下自定义主题:

"blueGlyph": {
        background: "#3a87ad",
        foreground: "#ffffff",
        size: 128,
        font:"Glyphicons Halflings"
    }

第三步：现在我只需要将Unicode字符传递给JS脚本，它就会即时生成图标图片。HTML如下所示：

<img src="data:image/png;base64," data-src="holder.js/140x140/text:&#xe093;/blueGlyph">

生成了以下的动态生成图片:

选择并以正确的格式传递 Unicode 字符以便它被解释和绘制的关键是使用 HTML 方法传递 Unicode 字符。例如，&#x*{UNICODE HERE}*; 或根据上面的示例 "&#xe093 ;"。

如果您想要尝试一下，可点击这里查看相关的编辑页面。

- Samuel Hawksby-Robinson

---

这太棒了，我会考虑将其作为 Holder 的默认部分。 - imsky

@imsky先生，很高兴认识您。我很高兴您喜欢它。我想让图像在某些图像上进行抗锯齿处理，在一些字符的边缘有一些非常明显的像素化。这是fiddle链接 - Samuel Hawksby-Robinson

这对我来说显示为“矩形”（缺失字符），我认为你需要在其他地方托管示例。 - imsky

@Samyoul，那个解决方案不起作用。你能给我们提供另一个可行的例子吗？ - wpsidi

Answer 2

我在网上搜寻了很久，但没有找到解决方法。就像imsky所说的那样，这会出现一个“矩形”（缺失字符）。因此，我尝试创建自己的解决方案，但这并没有使用holder.js创建图像。

<div class="col-xs-6 col-md-3">
   <a href="#" class="thumbnail">
       <span class="big-icon glyphicon glyphicon-glass"></span>
   </a>
</div>

然后是 CSS 样式：

<style>
.big-icon{
   margin:10px;
   font-size:100px;
}
.thumbnail{
   text-align:center;
}
</style>

这是结果：

但我仍在寻找解决方案：如何在Holder.js图像中使用Bootstrap Glyphicons。任何帮助将不胜感激。

谢谢

- wpsidi

---

Holder 的 SVG 渲染器需要额外的工作来显示 Web 字体。2.4 版本将具有完整的 Web 字体支持，请查看此问题：https://github.com/imsky/holder/issues/73 - imsky

Answer 3

但是既然解决方案已经存在，为什么你还感到困惑呢？只需删除所有与holder.js相关的更改，回归基础，并将这些行放在文档末尾，看看变化......

 $(function() {
        $('img').each(function() {
            var img = $(this);
            img.error(function() {
                img.replaceWith('<span class="glyphicon glyphicon-user" style=" background-color: #eee;  font-size: 100pt"></span>');
            });
        });
    });

如果需要更多帮助，可以发送邮件到[e-mail]联系我。

- Ranjeet Rana