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

Question

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

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

• react-stripe-elements
• Stripe.js & Elements

---

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

<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 语句的答案 src ，但事实证明我根本不需要向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，它在本地不起作用，但在生产中可以完美运行。