在Vue中使用Stripe时如何应用自定义字体? vue-stripe-elements-plus。

问题描述 投票:0回答:1

我用的是 vue-stripe-elements-plus-----。 NPM模块,我看不到如何添加自定义字体?

vue.js stripe-payments custom-font
1个回答
0
投票

这个插件使用你传入的选项来创建vue元素的第一个元素。

它在Stripe时将样式对象传递给样式选项。创造 元素。

它通过了 elements 属性到Stripe的 元素功能.

在这里你可以添加一个 CustomFontSource 对象。

请注意,就像在这个例子中一样,如果你想使用Google字体,你必须去提供的URL,并抓取@fontface描述符内的URL。你可能最好自己托管字体,因为我担心这些URL会随着时间的推移而改变。

  stripeOptions: {
    elements: {
      fonts: [{
        family: 'Lexend Deca',
        src: 'url(https://fonts.gstatic.com/s/lexenddeca/v1/K2F1fZFYk-dHSE0UPPuwQ5qnJy_YZ2ON.woff2)',
        unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
        style: 'normal',
        weight: '400',
        display: 'swap',
      }],
    },
    style: {
      base: {
        color: 'red',
        fontFamily: '"Lexend Deca", sans-serif',
        fontSize: '18px',
        fontWeight: '400',
        fontSmoothing: 'antialiased',
      },
    },
  },

Stripe组件。

          <card-number
            :stripe="stripeId"
            :options="stripeOptions"
          />

          <card-expiry
            :stripe="stripeId"
            :options="stripeOptions"
          />

          <card-cvc
            :stripe="stripeId"
            :options="stripeOptions"
          />
© www.soinside.com 2019 - 2024. All rights reserved.