Html2canvas: FontAwesome图标并非仅在Firefox中呈现

创建于 2013-12-18 · 20评论 · 资料来源: niklasvh/html2canvas

FontAwesome http://fontawesome.io/图标在chrome中可以很好地渲染，但在Firefox中效果不佳。它只是渲染一个盒子。
rendering font awesome icons

Bug Firefox

资料来源

akhil-uddemarri

最有用的评论

在版本'html2canvas 1.0.0-alpha.12'中仍然发生fontawesome的问题

dpadula 于 2018-10-30

👍7

所有20条评论

您可以在jsfiddle上设置示例吗？

niklasvh 于 2013-12-23

http://jsfiddle.net/3ub69/

akhil-uddemarri 于 2013-12-24

使用自定义图标字体遇到相同的问题。它适用于Safari和Chrome，但不适用于Firefox和IE。

Enome 于 2014-01-06

做了一些挖掘，使其可以在Firefox 26和IE 11中工作。问题是以下几行：

https://github.com/niklasvh/html2canvas/blob/master/src/Parse.js#L951

我将尽力解释为什么会这样。我的某些假设可能是错误的，请随时纠正我。

似乎在非webkitbrowser中，由getComputedStyles返回的对象仅在对象上设置了数字属性{ 0: 'fontFamily' } { fontFamily: 'fontawesome' } ，在原型上设置了键值对for in带环Object.hasOwnProperty它留出的值对如此看来没有CSS样式被复制。

要解决它，您可以将Object.keys() ，filter方法和forEach方法替换为for in循环。

for (var prop in elStyle) {
  if (indexedProperty(prop) && prop !== 'cssText') {
    // Prevent assigning of read only CSS Rules, ex. length, parentRule
    try {
      elps.style[prop] = elStyle[prop];
    } catch (e) {
      h2clog(['Tried to assign readonly property ', prop, 'Error:', e]);
    }
  }
}

我之所以检查prop !== 'cssText'是因为在Firefox中，它始终是一个空字符串（错误？）。看来，如果将空字符串复制到伪元素上，它将再次重置fontFamily。

希望这可以帮助。

Enome 于 2014-01-06

@Enome这非常好，尽管我还没有测试，请发送“请求”。

谢谢！：+1：

brcontainer 于 2014-01-07

@Enome是否曾经就此主题提出过拉取请求？我目前正在使用他的代码作为解决方法。

fpslater 于 2014-08-21

@fpslater我从未提出过拉取请求。如果我没记错的话，我没有尝试转换html-> canvas，而是开始使用svg。

Enome 于 2014-08-22

FontAwesome也无法在Chrome和PhantomJS等Webkit浏览器中为我渲染

kmdavis 于 2014-11-10

@kmdavis您是否尝试过html2canvas v0.5？

niklasvh 于 2014-11-25

我们目前正在使用html2canvas v0.5.0-alpha

kmdavis 于 2014-11-25

您能否在jsfiddle上提供一个简单的示例，在该示例中可以复制该问题，或者http://jsfiddle.net/3ub69/52/对您不起作用？

niklasvh 于 2014-11-25

我也有这个问题。如何升级到html2canvas v0.5？我问这个问题很愚蠢，但在此仓库中看不到这样的分支或标签。

提前致谢。

sweetleon 于 2015-01-16

PS我正在通过带有gem 'rails-assets-html2canvas和以下bower.json文件的rails-assets使用html2canvas：

{
  "name": "My-App",
  "dependencies": {
    "html2canvas": "https://github.com/niklasvh/html2canvas"
  }
}

sweetleon 于 2015-01-16

根据我在https://rails-assets.org/components上看到的信息，只有<= 0.4.1的版本可用于rails-assets。因此，我只是将最新的dist / html2canvas.js添加到我的app/assets/javascripts/vendor/文件夹中，并将暂时使用它。感谢您制作这个非常有用的库！

sweetleon 于 2015-01-16

@sweetleon尝试将html2canvas.js文件交换为我在此处修改的文件。它为我工作。

https://github.com/fpslater/fix-html2canvas-webkit-font-conversion

fpslater 于 2015-01-19

@sweetleon哦，没关系，您已经找到了解决方法;-)

fpslater 于 2015-01-19

我遇到了同样的问题