Пользовательский шрифт не загружен в элемент полосы - PullRequest
Новая
       23

Пользовательский шрифт не загружен в элемент полосы

1 голос
/ 20 апреля 2020

Я указываю пользовательский шрифт для элемента полосы в соответствии с документацией . Но полосовой шрифт отличается от другого ввода (тот же пользовательский шрифт).

Я создал простую страницу с двумя входами. Первый - html <input>, второй - ввод полосовых элементов. Я указываю пользовательский шрифт для ввода html и для ввода полосы. Но шрифт ввода полосы отличается (второй - второй):

first - common input, second stripe input

Вот код js для создания элемента полосы: 

var elements = stripe.elements({
    fonts: [
        {
            cssSrc: 'http://db.onlinewebfonts.com/c/0abeb2471faeb5269db428b9eac2075e?family=GT+Walsheim+Pro+Regular',
        },
    ],
});
var elementStyles = {
    base: {
        fontFamily: 'GT Walsheim Pro Regular',
        fontSize: '25px',
    },
};
var cardNumber = elements.create('cardNumber', {
    style: elementStyles,
});
cardNumber.mount('#example-card-number');

Полный код воспроизведения доступен на github repo . У вас есть идеи, почему шрифт ввода выглядит иначе?

1 Ответ

1 голос
/ 20 апреля 2020

Пользовательские шрифты в Stripe должны быть загружены через HTTPS. Ни файл определения font-face, ни базовые файлы пользовательских шрифтов не обслуживаются надежно: 

<b>http://</b>db.onlinewebfonts.com/c/0abeb2471faeb5269db428b9eac2075e?family=GT+Walsheim+Pro+Regular
@font-face {font-family: "GT Walsheim Pro Regular";
    src: url("<b>http://</b>db.onlinewebfonts.com/t/0abeb2471faeb5269db428b9eac2075e.eot"); /* IE9*/
    src: url("<b>http://</b>db.onlinewebfonts.com/t/0abeb2471faeb5269db428b9eac2075e.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("<b>http://</b>db.onlinewebfonts.com/t/0abeb2471faeb5269db428b9eac2075e.woff2") format("woff2"), /* chrome firefox */
    url("<b>http://</b>db.onlinewebfonts.com/t/0abeb2471faeb5269db428b9eac2075e.woff") format("woff"), /* chrome firefox */
    url("<b>http://</b>db.onlinewebfonts.com/t/0abeb2471faeb5269db428b9eac2075e.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/
    url("<b>http://</b>db.onlinewebfonts.com/t/0abeb2471faeb5269db428b9eac2075e.svg#GT Walsheim Pro Regular") format("svg"); /* iOS 4.1- */
}

Исправление заключается в том, чтобы обслуживать как файл font-face, так и ресурсы базового шрифта, используя HTTP. В качестве быстрого примера, чтобы увидеть, как он работает, вы можете взять один из файлов woff и предоставить его Stripe следующим образом: 

  var elements = stripe.elements({
    fonts: [
      {
        family: "GT Walsheim Pro Regular",
        src:
          "url(https://db.onlinewebfonts.com/t/0abeb2471faeb5269db428b9eac2075e.woff)",
        weight: "500",
      },
    ],
  });

Обратите внимание, что я обновил протокол с одного из ресурсов до https:// .

С этим изменением шрифты правильно загружаются в iframe, как показано ниже:

enter image description here

Надеюсь, это поможет!

...