Javascript 缺陷自定义字体在IE10和IE11中并不总是有效_Javascript_Html_Css_Internet Explorer_Font Face

Javascript 缺陷自定义字体在IE10和IE11中并不总是有效

javascript html css internet-explorer

Javascript 缺陷自定义字体在IE10和IE11中并不总是有效,javascript,html,css,internet-explorer,font-face,Javascript,Html,Css,Internet Explorer,Font Face,我没有完全测试，但我相信除了IE10+之外，每个浏览器都能正确处理这个问题。令人惊讶的是，IE9确实工作正常复制错误的代码这是重现此错误所需的最少代码 <!DOCTYPE html> <html> <head> <style type="text/css"> @font-face { font-family: 'SassoonInfant';

我没有完全测试，但我相信除了IE10+之外，每个浏览器都能正确处理这个问题。令人惊讶的是，IE9确实工作正常

复制错误的代码

这是重现此错误所需的最少代码

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            @font-face {
                font-family: 'SassoonInfant';
                src: url('../fonts/SassoonInfant.eot');
                src: url('../fonts/SassoonInfant.eot?#iefix') format('embedded-opentype'),
                     url('../fonts/SassoonInfant.woff') format('woff'),
                     url('../fonts/SassoonInfant.ttf') format('truetype'),
                     url('../fonts/SassoonInfant.svg') format('svg');
                font-weight: normal;
                font-style: normal;
            }
        </style>
    </head>
    <body>
        <div style="font-family: arial;">
            <div style="font-family: SassoonInfant;">
                I'm already here in the SassoonInfant font, this makes no difference, unless the parent of this div is also SassoonInfant!
            </div>
        </div>
        <div style="font-family: arial;">
            <div style="font-family: aoeuaoeu;"><!--any invalid font-family-->
                This text will be Times New Roman (the default), in any case. Thus it is similar to what happens to the dynamically added element.
            </div>
        </div>
        <div id="container" style="font-family: SassoonInfant;"></div>
        <script>
            (function() //-> window.onload does not make a difference
            {
                var txt = document.createElement('div');
                setTimeout(function(){
                    // the following three statements have to be in this exact order (and at least these three within the timeout):
                    txt.style.fontFamily = 'SassoonInfant, verdana';
                    txt.innerHTML = 'This text is <b>not</b> SassoonInfant when you define a font-family for it in any element if any parent also has this custom font as font-family. IE sucks!';
                    document.getElementById('container').appendChild(txt);
                }, 400);
            })();
        </script>
    </body>
</html>


@字体{
字体系列：“SassoonInfant”；
src:url（'../font/SassoonInfant.eot'）；
src:url（'../font/SassoonInfant.eot？#iefix'）格式（'embedded-opentype'），
url（'../fonts/SassoonInfant.woff'）格式（'woff'），
url（'../fonts/SassoonInfant.ttf'）格式（'truetype'），
url（'../font/SassoonInfant.svg'）格式（'svg'）；
字体大小：正常；
字体风格：普通；
}
我已经在这里使用了SassoonInfant字体，这没有什么区别，除非这个div的父级也是SassoonInfant！
在任何情况下，此文本都将是Times New Roman（默认文本）。因此，它与动态添加的元素类似。
（function（）//->window.onload没有任何区别
{
var txt=document.createElement（'div'）；
setTimeout（函数（）{
//以下三条语句的顺序必须完全相同（在超时时间内至少有这三条语句）：
txt.style.fontFamily='SassoonInfant，verdana'；
txt.innerHTML='如果任何父级也将此自定义字体作为字体系列，则在任何元素中为其定义字体系列时，此文本都不是SassoonInfant。即，糟糕！'；
document.getElementById（'container'）.appendChild（txt）；
}, 400);
})();

错误导致IE11

此错误的结果是，动态添加的子项具有与其父项相同的

字体系列

自定义字体，将使该子项中的字体恢复为默认字体（也可以是“verdana”，如：

字体系列：SassoonInfant，verdana；

是该子项的属性），忽略整个文档/样式表中的任何其他

字体系列

属性

可视化结果如下所示（如果没有

，verdana

第三个包含文本的容器也将使用Times New Roman）：

观察结果

这应该适用于任何自定义字体，它不是SassoonInfant特有的。另外，
```
@font-face
```
在跨浏览器时也能正常工作
计时是必要的：复制此错误需要超时，我想只有在已加载字体的情况下添加嵌套元素时才会出现超时
```
txt.style.fontFamily
```
，
```
txt.innerHTML
```
，
```
appendChild（txt）
```
的顺序对重现错误很重要。所有这些语句都需要在timeout函数中
DOM树中已经有了父级和子级，并且都使用了
```
font-family:SassoonInfant
```
将解决这个bug。进一步嵌套没有任何区别，动态添加的元素中的额外嵌套也没有任何区别。从而改变了
字体系列：arial
从
到
字体系列的第一个子项：SassoonInfant将修复此错误

创建txt -元素时没有区别，但必须动态创建。因此，将document.getElementById（'textcontainer'）与#textcontainer 一起使用将解决此错误此错误的行为与在IE10+中为字体系列设置未定义的自定义的行为非常相似（或等同），如的第二个子项所示

问题这个错误的根本原因是什么？尽管我已经提供了解决这个bug的一些条件，但是有没有更好的解决方案是全球性的呢。像一些属性一样，您可以添加到或@font-face 来解决这个问题跟进虽然它可能与IE的hasLayout -属性有关（但是添加zoom:1；并没有真正的帮助），因此从技术上讲它不是一个bug。应该报告吗