javascript - Stripe 元素谷歌网络字体不工作

Question

我无法让 Stripe Elements 使用 Google 的 Lato。我知道还有其他类似的问题，但我没有看到任何适用的问题。我尝试修复了一段时间但没有成功

var windowHash = getWindowHash();
var stripe = Stripe(stripePubKey);
var elements = stripe.elements({
  fonts: [
    {
      family: "'Lato'",
      src: 'local("Lato"), local("lato"), url(https://fonts.gstatic.com/s/lato/v13/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format("woff2")',
      weight: 300,
      style: "normal",
      unicodeRange: "U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF"
    }
  ]
});

var card = elements.create('card', {
  iconStyle: 'solid',
  hidePostalCode: true,
  style: {
    base: {
      iconColor: '#3cacce',
      color: '#424B54',
      lineHeight: '36px',
      fontWeight: 300,
      fontFamily: '"Lato", sans-serif',
      fontSize: '13pt',
      fontStyle: "normal",
      '::placeholder': {
        color: '#969696'
      },
    },
    invalid: {
      iconColor: '#b32903',
      color: '#b32903',
    }
  },
  classes: {
    focus: 'is-focused',
    empty: 'is-empty',
  },
});

还有别的地方:

card.mount('.cardElement');

关于如何让它正确显示的任何提示？

更新:

发现问题了!我试图在 Lato Light 中加载，但因为添加了普通的 Lato，所以使用 300 wight 不起作用。添加 Lato Light 字体使其发挥作用。

Answer 1

您现在可以使用 cssSrc 选项:

let stripe = Stripe('pk_test_JYjfAwsv9ODbL7mm1qObrIXZ')
let elements = stripe.elements({
  fonts: [
    {
      cssSrc: 'https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600'
    }
  ]
})

然后你就可以在创建卡片的样式选项中引用它了:

let card = elements.create('card', {
  style: {
    base: {
      fontFamily: 'Montserrat'            
    }
  }
})
card.mount('#card-element')

来源:https://stripe.com/docs/stripe-js/reference