在每个网站（书签）中更改 Dyslexic 的字体系列

Question

我的目标很简单（我认为）： 正如标题所示，我想要一个书签来更改 Open-dyslexic web-font 中每个网站的字体。

因为字体在我的服务器上，所以我需要在页面的 CSS 中添加一个新的 font-face 定义。

在那之后，我能想到的最简单的事情就是为标签设置新的字体系列。

但是在这里我遇到了第一个问题。什么都没有发生。

!function ()
{
    var newStyle = document.createElement( 'style' );
    newStyle.appendChild( document.createTextNode( "@font-face { font-family: 'OpenDyslexicRegular'; src: url('http://www.andrearastelli.net/font/OpenDyslexic-Regular.otf') format('opentype'); }" ) );
    document.head.appendChild( newStyle );
    console.debug( document.body.style.fontFamily );
    document.body.style.fontFamily = 'OpenDyslexicRegular, tahoma, verdana, arial, sans-serif';
    console.debug( document.body.style.fontFamily );
}();

这是我的代码，如果我删除“OpenDyslexicRegular”部分，字体实际上会改变（例如，如果尝试设置 font-family: serif，一切正常）。

我想问题是我添加到页面中的新字体。看起来新字体并没有真正加载。

或者也许是扩展名？ （但CANIUSE/ttf 表明 otf 是一种非常有效的字体格式）

---

好的，这是脚本中的第一个更改（只是为每个 DOM 元素设置我想要的字体系列）

!function ()
{
    var newStyle = document.createElement( 'style' );
    newStyle.appendChild( document.createTextNode( "" +
        "@font-face { " +
        "font-family: 'OpenDyslexicRegular'; " +
        "src: url('http://www.andrearastelli.net/font/OpenDyslexic-Regular.otf') format('opentype'); " +
        "}" ) );
    document.head.appendChild( newStyle );
    var allDomElement = document.getElementsByTagName('*');
    for (var i=0; i<allDomElement.length; i++){
        allDomElement[i].style.fontFamily = 'OpenDyslexicRegular';
    }
    // document.body.style.fontFamily = 'OpenDyslexicRegular, tahoma, verdana, arial, sans-serif';
}();

我之前描述的问题只发生在 Firefox 上（我暂时没有测试过 IE 或 Safari）。

---

这是一个更高级的版本，在 CSS 中具有不同的字体格式。

!function ()
{
    var newStyle = document.createElement( 'style' );
    newStyle.appendChild( document.createTextNode( "" +
        "@font-face { " +
        "font-family: 'OpenDyslexicRegular'; " +
        "src: url('http://www.andrearastelli.net/font/OpenDyslexic-Regular.otf') format('opentype'); " +
        "src:   url('http://www.andrearastelli.net/font/opendyslexic-regular-webfont.woff') format('woff')," +
        "       url('http://www.andrearastelli.net/font/opendyslexic-regular-webfont.ttf') format('truetype')," +
        "       url('http://www.andrearastelli.net/font/opendyslexic-regular-webfont.svg#opendyslexicregular') format('svg');"+
        "}" ) );
    document.head.appendChild( newStyle );
    var allDomElement = document.getElementsByTagName('*');
    for (var i=0; i<allDomElement.length; i++){
        allDomElement[i].style.fontFamily = 'OpenDyslexicRegular';
    }
    // document.body.style.fontFamily = 'OpenDyslexicRegular, tahoma, verdana, arial, sans-serif';
}();

因为使用 firefox 这也不起作用。我正在考虑放弃对 FF 的支持。

Answer 1

正如我们在 cmets 中讨论的那样，如果您要将其发布给其他人，我建议您使用 Paul Irish's post，以便全面获得正确的功能。同样使用 Chrome，我注意到您的字体文件以application/x-font-otf 的形式返回，但this post 建议您应该使用font/opentype 或application/x-font-opentype。如果 Firefox 有这个问题，我不会感到惊讶。