条纹自定义排版字体

Question

我的网络服务器上托管了一个 cloud.typography 字体。当我尝试使用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);

如果我尝试使用它给我的 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 项目仪表板上的已启用域列表中。现在条纹元素正在使用 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 不支持 localhost 的 CORS 请求。

您可以使用Allow-Control-Allow-Origin: * Chrome 扩展程序来解决此问题。该扩展将为 CORS 添加必要的 HTTP 标头。

或

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

Answer 2

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

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

您还必须在 CSS 中导入 webfont。

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