條紋元素谷歌網絡字體不工作

我無法使用谷歌的拉託條紋元素。我知道還有其他類似的問題，但我沒有看到任何適用的問題。我嘗試了一段時間，沒有運氣條紋元素谷歌網絡字體不工作

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被添加了，所以使用300Wight並不起作用。添加Lato Light字體使其工作。

來源

2017-07-05 Clinton Skakun

原因：不得不使用latin鏈接和Unicode範圍。 不是latin-extfont face對拉託字體（拉丁語和-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' 
    } 
    ]

來源

2017-07-05 09:27:08 Zico

太棒了！除了重量似乎不適合我，總是相同的結果，無論我設置爲什麼，但哦，小vicotry ... – james

詹姆斯，你必須使用正確的字體重量字體類型。我使用了Lato Light，還有Lato Regular和其他一些更大膽更輕的產品。 –

我很想知道這些URL何時到期。 – Gajus

您現在可以使用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')

來源：https://stripe.com/docs/stripe-js/reference

來源

2017-11-24 07:55:09 Vidar

這絕對是自從創建它以來更容易的解決方案。 – Sia

條紋元素谷歌網絡字體不工作

回答

相關問題