Stripe payments 条带元素中未加载自定义字体

我正在根据为条带元素指定自定义字体。但条带输入字体与其他输入字体不同（相同的自定义字体）

我用两个输入创建了一个简单的页面。第一个是html

，第二个是条带元素输入。我正在为html输入和条带输入指定自定义字体。但条带输入字体不同（条带输入是第二个）：

下面是创建条带元素的js代码：

var elements = stripe.elements({
    fonts: [
        {
            cssSrc: 'http://db.onlinewebfonts.com/c/0abeb2471faeb5269db428b9eac2075e?family=GT+Walsheim+Pro+Regular',
        },
    ],
});
var elementStyles = {
    base: {
        fontFamily: 'GT Walsheim Pro Regular',
        fontSize: '25px',
    },
};
var cardNumber = elements.create('cardNumber', {
    style: elementStyles,
});
cardNumber.mount('#example-card-number');

---

完整的复制代码可在。你知道为什么输入字体看起来不同吗？

条纹中的自定义字体必须通过HTTPS加载。字体面定义文件和基础自定义字体文件均未安全提供：

http://db.onlinewebfonts.com/c/0abeb2471faeb5269db428b9eac2075e?family=GT+Walsheim+Pro+Regular 注意，我将协议从一个参考资料更新为

https://

通过此更改，字体将正确加载到iframe中，如下所示：

---

希望这有帮助

谢谢，它通过https工作！你知道它是否适用于相对url吗？我的意思是，如果网站架构将是httpsYes，它应该！每： @font-face {font-family: "GT Walsheim Pro Regular"; src: url("http://db.onlinewebfonts.com/t/0abeb2471faeb5269db428b9eac2075e.eot"); /* IE9*/ src: url("http://db.onlinewebfonts.com/t/0abeb2471faeb5269db428b9eac2075e.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("http://db.onlinewebfonts.com/t/0abeb2471faeb5269db428b9eac2075e.woff2") format("woff2"), /* chrome firefox */ url("http://db.onlinewebfonts.com/t/0abeb2471faeb5269db428b9eac2075e.woff") format("woff"), /* chrome firefox */ url("http://db.onlinewebfonts.com/t/0abeb2471faeb5269db428b9eac2075e.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/ url("http://db.onlinewebfonts.com/t/0abeb2471faeb5269db428b9eac2075e.svg#GT Walsheim Pro Regular") format("svg"); /* iOS 4.1- */ }

  var elements = stripe.elements({
    fonts: [
      {
        family: "GT Walsheim Pro Regular",
        src:
          "url(https://db.onlinewebfonts.com/t/0abeb2471faeb5269db428b9eac2075e.woff)",
        weight: "500",
      },
    ],
  });