如何将本地自定义字体应用于 Stripe Elements？

Question

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

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

• react-stripe-elements
• Stripe.js 和元素

---

这是我尝试通过react-stripe-elements文档中指定的fonts prop 传递我想要的字体来使用它的地方：

<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，我最初在这里有一个关于使用src的require语句获得成功的答案，但事实证明我根本不需要向stripe.elements传递任何内容。 相反，我有这个：

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

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

这是重要的部分： fontFamily的值与我通过 Sass 文件导入的文件名匹配。 对于这个例子，我会有：

@font-face {
  font-family: "My Font";
  src: url("~@/assets/fonts/Font-Name.otf") format ("OpenType");
}

我不确定为什么会这样，但希望您可以这样做。

Answer 2

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

我只是在寻找相同的东西并且它起作用了。 由于没有 https，它在本地无法运行，但在生产中运行良好。