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

【问题标题】：How do I apply a local custom font to Stripe Elements?如何将本地自定义字体应用于 Stripe Elements？
【发布时间】：2018-04-26 17:09:07
【问题描述】：

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

【问题讨论】：

在 fonts-on-the-web 笔记上，而不是看起来像捆绑问题的解决方案，你不想使用原始 .otf 文件，你想要woff or woff2
你有没有找到答案。我也有同样的问题
@jgerstle，抱歉回复缓慢。我从来没有弄清楚。不得不承认失败，很遗憾。
还是没有解决办法？我收到相同的错误消息。

标签： javascript reactjs fonts stripe.js

【解决方案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");
}

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

【讨论】：

这真的可以在您的机器之外工作吗？ stripe 元素使用 iFrame，它无法访问父上下文的导入字体。我觉得这可能有效，因为在您的机器上本地安装了一种字体，其字体名称是 iFrame 所引用的。其他用户不会出现这种情况。

【解决方案2】：

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

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

【讨论】：