我的目标很简单(我认为): 正如标题所示,我想要一个书签来更改 Open-dyslexic 网络字体中每个网站的字体。
因为字体在我的服务器上,所以我需要在页面的 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”部分,字体实际上会改变(例如,如果尝试设置字体系列:衬线,一切正常)。
我想问题出在我添加到页面的新字体方面。看起来新字体并没有真正加载。
或者也许是扩展名? (但是 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 支持。
最佳答案
正如我们在评论中讨论的那样,我建议使用 Paul Irish's post如果您打算将其发布给其他人,以便全面获得正确的功能。同样使用 Chrome,我注意到您的字体文件作为 application/x-font-otf
返回,但是 this post建议您应该使用 font/opentype
或 application/x-font-opentype
。如果 Firefox 有这方面的问题,我不会感到惊讶。
关于javascript - 在每个网站(书签)中更改 Dyslexic 的字体系列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18333735/