条纹自定义排版字体

Question

我的网络服务器上托管了一个 cloud.typography 字体。当我尝试 link 它使用 stripe.elements() 进行条带化时，我的字体没有显示，它默认为 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);

如果我尝试 link 使用 css link 直接排版，我会收到以下错误：

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 的项目仪表板上的启用域列表中。现在条纹元素使用 cloud.typography 字体。这在 chrome 是运行且带有 --disable-web-security 标志时有效。但是，当使用 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 Headers。

或

使用 --disable-web-security 标志开始 chrome

Answer 2

这里有一个示例，演示了如何从第三方页面（从您不一定控制的另一个域）加载字体。

https://jsfiddle.net/5yz4z2yn/104/

您还必须在 CSS 中导入网络字体。

@import url('https://fonts.googleapis.com/css?family=Indie+Flower');

条纹自定义排版字体

Stripe custom typography font

javascript

webfonts

stripe-payments

cloud.typography