Google 字体 URL 导致 Stripe 阻止该字体。我怎样才能让 Stripe 接受它？答案

【问题标题】：Google Font URL is causing Stripe to block the font. How can I get Stripe to accept it?Google 字体 URL 导致 Stripe 阻止该字体。我怎样才能让 Stripe 接受它？
【发布时间】：2022-01-04 18:16:36
【问题描述】：

我在我的网页上使用了一种字体，我希望让 Stripe Elements 与该样式相匹配。我已在配置中将字体添加为 CSS 源，但它出错了，并告诉我它有一个无效字符。我怀疑它是实际字体文件 URL 中的 ~，因为它不存在于任何有效的字体 URL 中。似乎也没有关于此错误的任何信息，因为搜索它不会产生任何结果。开发目前正在本地完成，但会在某个时候推送到服务器。 Stripe 目前在加载本地字体时遇到问题，因为它们必须通过 HTTPS 提供服务。除了使用 ngrok 之类的东西来加载字体之外，还有什么办法吗？

另外，我不确定这是否重要，但这里是字体的 URL。它被称为 Lexend。 https://fonts.gstatic.com/s/lexend/v7/~CggKBkxleGVuZBAHIAUqAggA.woff2

还有错误

Invalid src value in font configuration value: https://fonts.gstatic.com/s/lexend/v7/~ChUKBkxleGVuZDoLCPTQnbsHFQAAlkMQByAFKgIIAA==.woff2. This value contains invalid characters.

【问题讨论】：

标签： css fonts stripe-payments

【解决方案1】：

您应该切换到使用cssSrc 方法和使用此模式的谷歌字体源 URL：

var elements = stripe.elements({
  fonts: [
    {cssSrc: 'https://fonts.googleapis.com/css?family=Lexend'}
  ],
});

在这里查看：https://jsfiddle.net/5yz4z2yn/104/ 您可以在所有 3 个位置将 Indie+Flower 替换为 Lexend 以查看它的工作原理。

【讨论】：

【解决方案2】：

原来要加载字体，您必须使用 HTTPS。起初我怀疑这一点，但我不确定。

【讨论】：