javascript - 在按钮上使用自定义字体

Question

我目前正在开发一个用户脚本，它通过按钮为 Cookie Clicker 添加功能。我快完成了，但我想将游戏字体用作按钮字体，但我不知道该怎么做，我知道这是可能的，因为我大约两年前看到过它，但我不记得在哪里。我想使用的字体是 "font-family:\"Kavoon\""

相关脚本部分如下:

function addStyleSheet() {
    var stylesClassName = options.panelId + '-styles';
    var styles = document.getElementsByClassName(stylesClassName);
    if (styles.length <= 0) {
        styles = document.createElement('style');
        styles.type = 'text/css';
        styles.className += ' ' + stylesClassName;
        styles.font = superFont
        document.body.appendChild(styles);
    }
    var css = '#' + options.panelId + '{position:fixed;top:0;right:0;background:#000;color:#fff;padding:5px;z-index:9999;}#' + options.panelId + ' button{margin-left: 5px;}#' + options.panelId + ' button.active:after{content:"*";color:red;}';
    styles[(typeof document.body.style.WebkitAppearance == "string") ? "innerText" : "innerHTML"] = css;
}

这里是其中一个按钮如何设置的示例:

var options = {
    panelId: 'cookie-cheater',
    intervalDelay: 1,
    buttons: {
        'bigCookie': {
            label: 'Autoclick Big Cookie',
            action: function () {
                toggleAutoAction('bigCookie', function () {
                    Game.ClickCookie();
                })
            }
        }

如果有人能提出一些想法或解决方案，我将不胜感激!

谢谢，丹尼尔

................................................ ..................................................... ..................................................... ...................

编辑:完成!通宵达旦地完成了这项工作，我完成了，我学到了很多东西并最终得到了我自己的解决方案，如果你和我处于同样的情况，请使用 Brock Adams 在 Ravi Hamsa 的帖子上发布的更新方法.

感谢大家的帮助!丹尼尔

Answer 1

将此行添加到您的 head 标签中。

<link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css'>

这将使“Kavoon”准备好在您的页面中使用，然后您可以使用font-family:Kavoon以你的风格。

---

更新:添加 <link> 在用户脚本环境中，使用这段代码:

var D           = document;
var linkNode    = D.createElement ('link');
linkNode.type   = "text/css";
linkNode.rel    = "stylesheet";
linkNode.href   = "http://fonts.googleapis.com/css?family=Kavoon";

var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
targ.appendChild (linkNode);

然后使用如下代码激活样式:

GM_addStyle ("button {margin-left: 5px; font-family: 'Kavoon', cursive;}");

事实上，您应该使用 GM_addStyle() , 所有主要用户脚本引擎都支持，而不是 addStyleSheet()功能。