在按钮上使用自定义字体

Using a custom font on a button

本文关键字：自定义 字体 按钮      更新时间：2023-09-26

我目前正在研究一个用户脚本，该脚本通过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();
                })
            }
        }

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

谢谢丹尼尔

......

......

编辑：完成！ 拉了一个通宵来完成这个，我已经完成了，我学到了很多东西，最终得到了我自己的解决方案，如果你和我的情况相同，请使用布洛克亚当斯在拉维哈姆萨的帖子上发布的更新方法。

感谢大家的帮助！丹尼尔

将此行添加到您的 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()函数。

为了使用您的字体，您必须包含 Web 字体。快速的谷歌搜索产生了你的确切字体（好消息）：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;
}
相关文章：