Question

我正在尝试使用项目目录中的本地.otf文件中的字体，以便在Stripe Elements提供的信用卡表单的输入内设置文本样式。

由于这是一个React项目，我一直在使用react-stripe-elements库。我一直在引用以下文档：

我试图通过fonts文档中指定的react-stripe-elements道具传递我想要的字体来尝试使用我想要的字体：

<Elements
  fonts={[
    {
      family: 'geog',
      src: 'url(../../../shared/styles/fonts/Geogtq-Rg.otf)',
      style: 'normal',
      weight: '400',
    },
  ]}
>
  <StripeCCForm />
</Elements>

使用此代码，我收到以下错误：

Invalid src value in font configuration: ../../../shared/styles/fonts/Geogtq-Rg.otf. URLs have to start with 'https://' or 'data:'

我的印象是src值可能是本地字体的相对路径，所以我很困惑为什么我收到此错误。任何见解将不胜感激！

Answer 1

我正在使用Vue，我最初在这里获得了关于require的{{1}}语句成功的答案，但事实证明，我不必将任何内容传递给{{ 1}}。相反，我有这个：

src

这是重要的部分：stripe.elements的值与我通过Sass文件导入的文件名 相匹配。对于此示例，我将拥有：

const stripeStyle = {
  style: {
    base: {
      fontFamily: 'Font-Name',
      // fontSize, etc. if applicable
    },
  },
};

const elements = stripe.elements();
this.cardNumber = elements.create('cardNumber', stripeStyle);
// etc.

我不确定为什么会这样，但是希望您有可能以这种方式进行处理。

Answer 2

此问题已在此处解决：https://github.com/stripe/react-stripe-elements/issues/285

我只是在搜索相同的东西，所以奏效了。由于没有https，因此无法在本地使用，但在生产环境中效果很好。

如何将本地自定义字体应用于条带元素？

2 个答案: