[英]Stripe Elements Google Web Font Not Working
我无法让 Stripe Elements 使用 Google 的 Lato。 我知道还有其他类似的问题,但我没有看到任何适用的问题。 我尝试修复了一段时间但没有运气
var windowHash = getWindowHash();
var stripe = Stripe(stripePubKey);
var elements = stripe.elements({
fonts: [
{
family: "'Lato'",
src: 'local("Lato"), local("lato"), url(https://fonts.gstatic.com/s/lato/v13/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format("woff2")',
weight: 300,
style: "normal",
unicodeRange: "U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF"
}
]
});
var card = elements.create('card', {
iconStyle: 'solid',
hidePostalCode: true,
style: {
base: {
iconColor: '#3cacce',
color: '#424B54',
lineHeight: '36px',
fontWeight: 300,
fontFamily: '"Lato", sans-serif',
fontSize: '13pt',
fontStyle: "normal",
'::placeholder': {
color: '#969696'
},
},
invalid: {
iconColor: '#b32903',
color: '#b32903',
}
},
classes: {
focus: 'is-focused',
empty: 'is-empty',
},
});
在其他地方:
card.mount('.cardElement');
关于如何让它正确显示的任何提示?
更新:
发现问题了! 我试图在 Lato Light 中加载,但由于添加了正常的 Lato,使用 300 wight 不起作用。 添加 Lato Light 字体使其工作。
您现在可以使用cssSrc选项:
let stripe = Stripe('pk_test_JYjfAwsv9ODbL7mm1qObrIXZ')
let elements = stripe.elements({
fonts: [
{
cssSrc: 'https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600'
}
]
})
然后,您可以在创建卡时在样式选项中引用它:
let card = elements.create('card', {
style: {
base: {
fontFamily: 'Montserrat'
}
}
})
card.mount('#card-element')
原因:必须使用
latin
链接和unicode范围。 不是 Lato字体的latin-ext
字体 (latin和latin-ext)
使用以下字体参数
fonts: [
{
family: '"Lato"',
src: 'local("Lato Regular"), local("Lato-Regular"), url(https://fonts.gstatic.com/s/lato/v13/MDadn8DQ_3oT6kvnUq_2r_esZW2xOQ-xsNqO47m55DA.woff2) format("woff2")',
weight: 300,
style: 'normal',
unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215'
}
]
如果你使用 Elements 组件,你可以指定 cssSrc 选项来导入外部字体,像这样..(代码是用打字稿写的)
组件外
const ELEMENT_OPTIONS: StripeElementsOptions = {
fonts: [
{
cssSrc:
"https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;900",
},
],
};
组件内部
<Elements stripe={stripePromise} options={ELEMENT_OPTIONS}>
<StripeCheckoutForm />
</Elements>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.