Question

我一直在关注所有教程，在Chrome扩展程序中使用webfont，但它们都没有为我工作，它仍然是同样丑陋的字体。

我已将此字体下载为zip（https://fonts.google.com/specimen/Raleway?selection.family=Raleway），并在assets/fonts/下保存了Raleway-Regular.ttf

我还将文件添加到web_accessible_resources。

"web_accessible_resources": [
    "assets/fonts/Raleway-Regular.ttf"
]

在style.css中，我在顶部

中有以下代码

@font-face {
    font-family: 'UniqueNameFont';
    font-style: normal;
    font-weight: 700;
    src: url('chrome-extension://<id_hidden>/assets/fonts/Raleway-Regular.ttf'); 
}

* {
    font-family: 'UniqueNameFont';
    box-sizing: border-box;
}

文件的路径是正确的，我已经检查过了。另外，我在控制台日志中没有出现任何错误。

现在，我的扩展程序有一个阴影dom，它将我的扩展保留在那里，然后我动态添加style.css文件和html。像这样......

// Add stylesheet
    var link = document.createElement("link")
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = chrome.runtime.getURL('style.css');
    shadow.appendChild(link);

    // Add content to shadow
    page = page.replace(/baseuri/g, extensionOrigin);
    shadow.innerHTML += page;

除了字体外，所有样式都有效。我猜它可能与动态添加内容有关，但我发现它非常奇怪，因为元素的样式很好。

我还尝试过使用Google字体提供的@import，我可以在“网络”标签中看到它加载了文件，但由于一些奇怪的原因，它不会影响任何内容。

Answer 1

当我使用Google Web Font Loader库时，它似乎很有用，它非常直接。

var gwebfont = document.createElement("script");
    gwebfont.src = "https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js";

    var callback = function (){ 
        var s = document.createElement('script');
        s.type = 'text/javascript';
        var code = "WebFont.load({google: { families: ['Open Sans', 'Open Sans:light', 'Open Sans:semi-bold', 'Open Sans:bold'] } });";
        try {
          s.appendChild(document.createTextNode(code));
          shadow.appendChild(s);
        } catch (e) {
          s.text = code;
          shadow.appendChild(s);
        }
    }
    gwebfont.onload = callback;
    shadow.appendChild(gwebfont);

然后您只需在样式表中添加字体系列

 * {
    font-family: 'Open Sans', sans-serif;
}

Webfont无法在Chrome扩展程序中使用

1 个答案: