javascript - Stripe 自定义排版字体

Question

我的网络服务器上托管了一个 cloud.typography 字体。当我尝试使用 stripe.elements() 将它链接到 stripe 时，我的字体没有显示，它默认为 Helvetica。我也没有收到任何 javascript 错误。

这是我的javascript代码:

var elements = stripe.elements({
    fonts: [
        {
            cssSrc: 'localhost:8080/static/fonts/######/#################.css',
        },
    ],
});
var baseStyle = {
    fontFamily: 'Gotham Narrow A, Gotham Narrow B, sans-serif',
    fontSize: '16px',
    lineHeight: '1.5',
    fontWeight: '300',
    color: '#2d3138',
    '::placeholder': {
        color: '#8f95a3'
    }
};
var invalidStyle = {
    fontFamily: 'Gotham Narrow A',
    fontSize: '16px',
    lineHeight: '1.5',
    fontWeight: '300',
    color: '#e70000'
};
var style = {
    base: baseStyle,
    invalid: invalidStyle
};
var styles = {style: style};
var card = elements.create('cardNumber', styles);

如果我尝试使用它给我的 css 链接直接链接到排版，我会收到以下错误:

Failed to load https://cloud.typography.com/#######/#######/css/fonts.css: 
Redirect from 'https://cloud.typography.com/#######/#######/css/fonts.css' 
to 'https://myhostedwebsite.com/fonts/######/#################.css' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' 
header is present on the requested resource. Origin 'http://localhost:8080' 
is therefore not allowed access.

我还尝试将我的字体导入为字体系列对象。

var elements = stripe.elements({
    fonts: [
        {
            family: 'Gotham Narrow A',
            src: 'url(https://myhostedwebsite.com/fonts/######/#################.eot)',
            style: 'normal',
            weight: '300',
        },
    ],
});

请帮忙。

Answer 1

编辑

@Michael 发现他必须将 stripe.com 添加到 cloud.typography 项目仪表板上的启用域列表中。现在 Stripe 元素使用的是 cloud.typography 字体。当使用 --disable-web-security 标志运行 chrome 时，这是有效的。但是，当使用 chrome 扩展程序时，这些结果不起作用。

---

你的错误说:

Failed to load https://cloud.typography.com/#######/#######/css/fonts.css: 
Redirect from 'https://cloud.typography.com/#######/#######/css/fonts.css' 
to 'https://myhostedwebsite.com/fonts/######/#################.css' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' 
header is present on the requested resource. Origin 'http://localhost:8080' 
is therefore not allowed access.

Chrome 不支持本地主机的 CORS 请求。

您可以使用 Allow-Control-Allow-Origin: * Chrome 扩展来解决这个问题。该扩展将为 CORS 添加必要的 HTTP header 。

或

使用 --disable-web-security 标志启动 chrome