Question

使用此作为参考 https://stripe.com/docs/elements/reference#stripe-elements

我尝试创建自定义字体src以传递给我的条带元素：

var elements = stripe.elements(
    {
        font: {
            family:'Effra',
            src: "url('https://cuddlecompanions.org/wp-content/themes/diamondphoenix/fonts/effra.eot')"
        }
    }
);

var style = {
    base: {
        fontFamily: 'Effra'  
    }
}

但字体未按计划显示..

任何帮助将不胜感激：

Answer 1

谢谢大家的帮助。我得到了条纹IRC的帮助。它可能是缺少的逗号，也切换到ttf。无论如何希望这可以帮助某人：

var elements = stripe.elements({
    fonts: [
        {
            family: 'Effra',

            src: 'local("Effra"), local("effra"), url(https://cuddlecompanions.org/wp-content/themes/diamondphoenix/fonts/effra.ttf) format("truetype")',
            unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215',
        },
    ]
});


<style>
@font-face {
font-family: 'Effra';
font-weight: 400;
src: local("Effra"), local("effra"), url(https://cuddlecompanions.org/wp-content/themes/diamondphoenix/fonts/effra.ttf) format("truetype");
unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
} 
</style>

Answer 2

stripe.elements接受一个选项对象。

stripe.elements([options])

<强>字体
自定义字体数组从元素对象创建的元素可以使用。

似乎它期待一个数组。

尝试更改为

var elements = stripe.elements(
    {
        fonts: [{
            family:'Effra',
            src: "url('https://cuddlecompanions.org/wp-content/themes/diamondphoenix/fonts/effra.eot')"
        }]
    }
);

Answer 3

我认为这是格式化错误，你遗漏了一些逗号。

  var elements = stripe.elements({
           fonts: [
                {
                family:'Effra',
                src: "url('https://cuddlecompanions.org/wp-content/themes/diamondphoenix/fonts/effra.eot')",
                },
            ]
        });

Answer 4

这是我的工作示例（它对我有效）。

var stripe = Stripe('pk_test_........'); // paste your stripe public key here

var elements = stripe.elements({
  fonts: [
    {
      // integrate your font into stripe
      cssSrc: 'https://fonts.googleapis.com/css?family=Montserrat:400,500',
    }
  ]
});

const style = {
  base: {
    color: '#32325d',
    fontFamily: 'Montserrat, sans-serif',  // set integrated font family
    fontSmoothing: 'antialiased',
    fontSize: '17px',
    '::placeholder': {
      color: '#e5286a'
    }
  }
};

this.card = elements.create('card', {
  style: style,
  hidePostalCode: true,
});
this.card.mount(this.cardInfo.nativeElement);

使用Stripe自定义字体src

4 个答案: