自定义字体未加载到Stripe元素中

Question

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

我创建了具有两个输入的简单页面。第一个是html <input>，第二个是条纹元素输入。我正在为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');

完整复制代码可从github repo获得。您有什么想法为什么输入字体看起来会有所不同？

Answer 1

Stripe中的自定义字体必须通过HTTPS加载。不能安全地提供字体定义文件或基础自定义字体文件：

http://db.onlinewebfonts.com/c/0abeb2471faeb5269db428b9eac2075e?family=GT+Walsheim+Pro+Regular

@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- */
}

解决方法是使用HTTP提供字体文件和基础字体资源。作为一个快速的示例，您可以使用其中的woff文件之一，并将其​​提供给Stripe，如下所示：

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

请注意，我已将协议从一种资源更新为https://。

进行此更改后，字体将正确加载到iframe中，如下所示：

希望这会有所帮助！