Question

我的网络服务器上托管有cloud.typography字体。当我尝试使用datasource_delimiter="_datasource" logFileName=${1} errorLogLines=($(grep -i "_datasource" $logFileName)) for errorLogLine in ${errorLogLines[@]} do if [[ "$errorLogLine"~="jdbc:mondrian:DataSource=([a-zA-Z0-9]+)_datasource" ]] then # what should I put here? fi done将其链接到条纹时，我的字体没有显示，并且默认为Helvetica。我也没有收到任何JavaScript错误。

这是我的JavaScript代码：

stripe.elements()

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

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);

我也尝试过将我的字体作为字体家族对象导入。

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.

请帮助。

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不支持CORS请求的本地主机。

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

OR

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

Answer 2

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

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

您还必须在CSS中导入webfont。

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

条纹自定义字体

2 个答案: