在按鈕上使用自定義字體

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() ，所有主要的用戶腳本引擎都支持GM_addStyle() ，而不是addStyleSheet()函數。

Answer 2

為了使用您的字體，您必須包括網絡字體。 快速的Google搜索產生了您的確切字體（好消息）： 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;
}

在按鈕上使用自定義字體

問題描述

2 個解決方案

解決方案1
2 已采納 2013-09-23 07:46:34

解決方案2
2 2013-09-23 07:48:42

在按鈕上使用自定義字體

問題描述

2 個解決方案

解決方案1 2 已采納 2013-09-23 07:46:34

解決方案2 2 2013-09-23 07:48:42

解決方案1
2 已采納 2013-09-23 07:46:34

解決方案2
2 2013-09-23 07:48:42