And*_*ith 7 html font-face internet-explorer-9 internet-explorer-10
我有以下HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link href='https://fonts.googleapis.com/css?family=Bitter:400' rel='stylesheet' type='text/css'/>
<style type="text/css">
h1 {
font-family: Bitter;
font-weight: normal;
}
</style>
</head>
<body>
<h1>Why is this different?</h1>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
在Windows 7上的IE9中查看时,Bitter将加载并正确应用font-face:
但是当在Windows 8上的IE10中查看时,它不是,回到默认的font-face(Times New Roman):

由于两个浏览器都使用相同的Document Mode(因为X-UA-Compatible元标记)我会认为它们都会有Bitter字体或失败并回退到Times New Roman字体.但是,一个正在运行(Windows 7上的IE9),另一个正在运行(Windows 8上的IE10)
这是一个已知问题或记录的功能吗?
Bra*_*ult 13
更新.
由于IE的性质,这似乎是一个复杂的问题.根据您的具体情况,为了涵盖可能出现的不同问题,这里的参与者似乎已经从这些研究中得出了相应的选项.
注意:请务必清除页面中可能包含的任何缓存,以确保它们已正确加载/提供.
选项1:
将兼容性元标记更改为
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />.
通过更改IE=8为EmulateIE8您导致兼容模式遵循DOCTYPE,这反过来导致IE正确加载CSS文件中的字体首选项.
选项2:
检查您使用的文件格式是否以IE可以使用和理解的格式提供.
@font-face {
font-family: 'Bitter';
font-style: normal;
font-weight: 400;
src: url(https://themes.googleusercontent.com/static/fonts/bitter/v4/XexqN1a_o27MhVVdJFKAcA.eot);
src: local('Bitter-Regular'), url(https://themes.googleusercontent.com/static/fonts/bitter/v4/XexqN1a_o27MhVVdJFKAcA.eot) format('embedded-opentype'), url(https://themes.googleusercontent.com/static/fonts/bitter/v4/SHIcXhdd5RknatSgOzyEkA.woff) format('woff');
}
Run Code Online (Sandbox Code Playgroud)
查看此内容时需要注意的重要事项是字体的文件格式.现在,就IE字体支持而言,它有点像这样:
选项3:
如果你在这里达到这个选项那么你可能正在处理IE有时糟糕的采用和Web标准的实现可能正在发生的事情是IE9在IE8模式下显示页面,但也增加了它自己对.woff格式的支持.另一方面,IE10正在使用它实际支持的文件格式在IE8模式下正确显示页面.因此,我的结论是IE10实际上正确显示页面,而IE9试图掩盖糟糕的标准支持.
另外一个想法,因为你在下面的评论中也提到它似乎现在正在工作,可能谷歌错误地提供了错误的格式,因为浏览器是IE10但是在IE8模式下显示内容.如果是这种情况,那么IE8的"正确"显示将意味着IE10可接受的.woff文件不适用于IE8.
边注:
这种事情是所有Web开发人员遇到麻烦的最大原因之一.IE竞争指出非常糟糕的支持和不正确的实施,但仍然处于劣势,因为IE预装在市场上很大比例的PC上,因为大多数运行特定的操作系统.这是接受,实施和使用标准和最佳实践的一个非常有力的论据.
如果字体在IE8本身实际上不起作用,那么听起来IE10具有比IE9更好的兼容性引擎 - 因为它实际上正确地描绘了IE8呈现的内容.
为什么IE9 Compat 8实际上显示了字体,为什么字体在IE8中不起作用?我想把它归结为字体文件问题.@font-face似乎很困扰问题 - 字体属性设置似乎有时是其中之一.请参阅:为什么其中一个字体在IE8中呈现,但其他字体不呈现?.
在下载字体,通过Font Squirrels生成器,并使用我自己的@font-face代码在本地托管字体文件集时,您已经报告该字体在IE10 Compat 8中工作.我可以确认它在所有Compat模式下也适用于IE9,以及IE7/8.
Bitter字体在IE10 compat模式下工作,Font Squirrel生成字体文件/代码.
看到你已经说过其他谷歌字体在IE9/10 Compat模式8下工作,我认为它真的密封了问题在于字体文件本身 - 以及IE似乎随机场合及其属性的问题.Font Squirrel生成器似乎可以解决大多数人遇到问题的@font-face问题 - 但是你可以看到为什么IE8中有一个这样的font-face渲染,但其他人没有?,情况并非总是如此.
因为这不是兼容性问题 - 它根本不适用于IE8 - 看起来你唯一的选择是在本地托管字体.
如果你想要更好地控制你的字体以及在字体加载或失败时操纵元素CSS的能力,请参阅:如何知道字体(@ font-face)是否已被加载?
| 归档时间: |
|
| 查看次数: |
7850 次 |
| 最近记录: |