时间戳

首页 > 解决方案 > 在 Vue 中使用 Stripe 时如何应用自定义字体？vue-stripe-elements-plus

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

问题描述

我正在使用vue-stripe-elements-plus NPM 模块，但看不到如何添加自定义字体？

标签： vue.jsstripe-paymentscustom-font

解决方案

这个插件使用你传递给你创建的第一个元素的选项来创建 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',
      },
    },
  },

条带组件：

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

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

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

推荐阅读