在按钮上使用自定义字体答案

【问题标题】：Using a custom font on a button在按钮上使用自定义字体
【发布时间】：2013-09-23 07:41:40
【问题描述】：

我目前正在开发一个通过 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 的帖子上发布的更新方法.

感谢大家的帮助！丹尼尔

【问题讨论】：

见下面@Ravi Hamsa 的更新答案。此外，接受答案并酌情对答案发表评论。

标签： javascript html css fonts userscripts

【解决方案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()函数。

【讨论】：

谢谢，这真的很有帮助，并且会在这种情况下对其他人有所帮助，但我在看到这个之前就完成了抱歉。我会编辑我的帖子，告诉他们使用这种方法，因为我不是特别喜欢我的方法，有点乱。谢谢！

【解决方案2】：

为了使用您的字体，您必须包含网络字体。快速的谷歌搜索得到了你的确切字体（好消息）：http://www.google.com/fonts/specimen/Kavoon

首先，将它放在您的 <head> 元素中。这告诉浏览器将字体下载到本地机器上以在您的网页上使用它。

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

然后，选择您的元素，并将字体系列添加到其中。

.my-btn {
  font-family: 'Kavoon', cursive;
}

【讨论】：