时间戳

首页 > 解决方案 > 有没有办法在 iframe 中使用我网站上的字体

css - 有没有办法在 iframe 中使用我网站上的字体

问题描述

我有一个接受付款的网站，它是用react

我正在使用一个信用卡处理器，它提供一个 iframe 嵌入到我的网站中以安全地捕获信用卡，代码如下所示。

<iframe data-field-id="card-number" src='URL_TO_PROCESSOR_DOMAIN...'/><.iframe>

它在页面上显示信用卡号的输入，它们还提供了一种将自定义样式传递给这样的输入的方法。

let style = {
    "border-color": "red",
    "font-size": "20px"
    ...
}

然后你调用他们提供的函数

setFieldStype("card-number", style)

将样式应用于生成的输入。

但是，我希望也将font-family我使用的输入传递给输入，但它不应用它，我这样尝试过。

let style = {
    "border-color": "red",
    "font-size": "20px"
    "font-family": "my custom font"
}

但它不起作用，因为 iframe 无法访问我的自定义导入字体。

有没有办法在 iframe 中使用我的网站导入的字体？

标签： cssreactjsiframefont-face

解决方案

这仅适用于设置了适当的 CORS 标头。我们可以将一个<link/>元素附加到您的 iframe 并为其传递字体文件。

const applyStyle =  () => {
        const linkTag = ele.createElement("link");
        linkTag.id = "custom-link";
        linkTag.href = " link to font... /fonts/custom-font.css";
        linkTag.rel = "stylesheet";
        ele.head.appendChild(linkTag);
 }

推荐阅读