Using a custom font on a button

StackOverflow https://stackoverflow.com/questions/18954045

题

I am currently working on a userscript that adds features via buttons for Cookie Clicker. I nearly have it finished but i would like the game font to be used as the button font but I have no idea how to do this, I know it is possible as I saw it about two years ago but I can't remember where. The font that i want used is "font-family:\"Kavoon\""

The part of the script that is relevant is as follows:

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;
}

and here is an example of how one of the buttons are set out like:

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

I would be very appreciative if someone could come up with some ideas or a solution!

Thanks, Daniel

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

EDIT: DONE! pulled an allnighter to get this done and I'm finished, I learnt a lot and ended up with my own solution, please, if you are in the same situation as I was, use the updated method that Brock Adams posted on Ravi Hamsa's post.

Thanks to all of you for your help! Daniel

有帮助吗？

解决方案

Add this line into your head tag.

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

this will make "Kavoon" ready to use in your page, then you can use font-family:Kavoon in your style.

Update: To add the <link> in a userscript environment, use this code:

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);


Then Activate the style with code like this:

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

In fact, you should be using GM_addStyle(), which is supported by all major userscript engines, not that addStyleSheet() function.

其他提示

In order to use your font, you must include the web font. A quick Google search yielded your exact font (good news): http://www.google.com/fonts/specimen/Kavoon

First, place this in your <head> element. This tells the browser to download the font to the local machine to use it on your web page.

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

Then, select your element, and add the font family to it.

.my-btn {
  font-family: 'Kavoon', cursive;
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top