7

我正在尝试使用.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值可能是本地字体的相对路径，所以我很困惑为什么会收到此错误。任何见解将不胜感激！

4

2 回答 2

0

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

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

于 2020-10-08T04:06:27.350 回答
0

我正在使用 Vue，我最初在这里得到了一个关于成功require声明 for的答案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.

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

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

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

于 2019-11-06T23:45:30.547 回答