带有条纹的自定义字体 src答案

【问题标题】：Custom font src with Stripe带有条纹的自定义字体 src
【发布时间】：2017-10-05 01:59:16
【问题描述】：

以此为参考 https://stripe.com/docs/elements/reference#stripe-elements

我正在尝试创建自定义字体src 以传递给我的条纹元素：

var elements = stripe.elements(
    {
        font: {
            family:'Effra',
            src: "url('https://cuddlecompanions.org/wp-content/themes/diamondphoenix/fonts/effra.eot')"
        }
    }
);

var style = {
    base: {
        fontFamily: 'Effra'  
    }
}

但是字体没有按计划显示..

任何帮助将不胜感激：

【问题讨论】：

标签： javascript css stripe-payments

【解决方案1】：

stripe.elements 接受一个选项对象。

stripe.elements([options])

字体
从元素对象创建的自定义字体元素数组可以使用。

它似乎需要一个数组。

尝试更改为

var elements = stripe.elements(
    {
        fonts: [{
            family:'Effra',
            src: "url('https://cuddlecompanions.org/wp-content/themes/diamondphoenix/fonts/effra.eot')"
        }]
    }
);

【讨论】：

感谢您的回复。但是没有运气..在外部 { } 之前也尝试了 [ ] .. Effra 用作 iframe 中的字体系列，只是没有用任何东西定义（src .... 简单地用斜体尝试，什么都没有）任何帮助将不胜感激

【解决方案2】：

我认为这是格式错误，您缺少一些逗号。

  var elements = stripe.elements({
           fonts: [
                {
                family:'Effra',
                src: "url('https://cuddlecompanions.org/wp-content/themes/diamondphoenix/fonts/effra.eot')",
                },
            ]
        });

【讨论】：

【解决方案3】：

感谢大家的帮助。我在 Stripe 的 IRC 上得到了帮助。可能是缺少逗号，并且还切换到了 ttf。无论如何希望这可以帮助某人：

var elements = stripe.elements({
    fonts: [
        {
            family: 'Effra',

            src: 'local("Effra"), local("effra"), url(https://cuddlecompanions.org/wp-content/themes/diamondphoenix/fonts/effra.ttf) format("truetype")',
            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',
        },
    ]
});


<style>
@font-face {
font-family: 'Effra';
font-weight: 400;
src: local("Effra"), local("effra"), url(https://cuddlecompanions.org/wp-content/themes/diamondphoenix/fonts/effra.ttf) format("truetype");
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;
} 
</style>

【讨论】：

嗨伙计，你知道如何将我的本地字体添加到 stripe.elements 吗？我收到此错误：字体配置中的 src 值无效：/static/my-local-path/my-font.woff。 URL 必须以 'https://' 或 'data: 开头
@Giancarlos 因为字体是在 iFrame 中加载的，所以您需要指定完整路径。 yoursite.com/static/my-local-path/my-font.woff.
如果我有一个以 localhost 开头的本地路径怎么办？我无法让它工作......
GOTCHA：如果您正在使用热模块重新加载，并且为此更改了配置，则在刷新页面之前它不会更新。我的代码是正确的，但我认为它不起作用 - 我只需要刷新页面就可以了。

【解决方案4】：

这是我的工作示例（它适用于我）。

var stripe = Stripe('pk_test_........'); // paste your stripe public key here

var elements = stripe.elements({
  fonts: [
    {
      // integrate your font into stripe
      cssSrc: 'https://fonts.googleapis.com/css?family=Montserrat:400,500',
    }
  ]
});

const style = {
  base: {
    color: '#32325d',
    fontFamily: 'Montserrat, sans-serif',  // set integrated font family
    fontSmoothing: 'antialiased',
    fontSize: '17px',
    '::placeholder': {
      color: '#e5286a'
    }
  }
};

this.card = elements.create('card', {
  style: style,
  hidePostalCode: true,
});
this.card.mount(this.cardInfo.nativeElement);

【讨论】：