在每个网站(书签)中更改Dyslexic的font-family

时间:2013-08-20 11:22:15

标签: javascript css3 font-face

我的目标很简单(我认为): 正如标题所示,我想要一个书签来改变开放阅读障碍网络字体中每个网站的字体。

因为字体在我的服务器上,我需要在页面的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'); }" ) );
    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是一种非常有效的字体格式)


好的,这是脚本中的第一个更改(只是用我想要的font-family设置每个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支持。

1 个答案:

答案 0 :(得分:0)

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