Question

IE 11未正确显示Google字体中指定的字体粗细。我无法在JSFiddle

中复制问题

使用Google字体时，如果我只指定一个重量，则会正确显示字体粗细，即如果我使用以下链接导入字体，则会引入简易版本。

<link href="https://fonts.googleapis.com/css?family=Oswald:300" rel="stylesheet">

如果像这样更改链接：

<link href="https://fonts.googleapis.com/css?family=Oswald:400" rel="stylesheet">

引入常规体重。

但是，如果我尝试导入两个权重IE 11只显示较重的字体，尽管我在CSS中指定了字体粗细。 Chrome会按照应有的方式显示简易版本。

链接：

<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">

CSS：

.light {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 16px;
}
.regular {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 16px;
}

HTML：

<p class="light">This Is A Test Of Google Fonts Displayed in IE 11</p>
<p class="regular">This Is A Test Of Google Fonts Displayed in IE 11</p>

Chrome屏幕截图：

IE屏幕截图：

测试用例的完整本地HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Font Test Page</title>
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<style>
.light {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 16px;
}
.regular {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 16px;
}
</style>

</head>

<body>
<p class="light">This Is A Test Of Google Fonts Displayed in IE 11
</p>
<p class="regular">This Is A Test Of Google Fonts Displayed in IE 11
</p>
</body>
</html>

Answer 1

根据我可以使用... 的说明Internet Explorer 6-11不支持font-weight:<number>语法：（来源：https://caniuse.com/#feat=mdn-css_properties_font-weight_number）

该浏览器的解决方案是为所有需要的粗细使用不同名称的字体定义。

IE 11无法从Google字体正确显示字体权重

1 个答案: