OpenSans Semibold Normal 显示为 Italic

Question

我对从 Google Web 字体导入的 Open Sans 字体有疑问。 OpenSans Semibold (600) normal 突然出现在我所有以斜体呈现的网页上。我尝试将字体样式强制为正常等，但结果相同。将字体粗细更改为 500 或 800 后，它恢复为正常样式。

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff) format('woff');
}

JSFiddle

甚至 Google 字体显示为斜体。

Answer 1

我不确定这个问题，因为你的 fiddle 似乎工作正常，但是你可以像这样简化你的 SCSS 代码。

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);

p {
    font-family: 'Open Sans';

    &.weight300 { font-weight: 300 }
    &.weight400 { font-weight: 400 }
    &.weight600 { font-weight: 600 }
}

Answer 2

看起来 fiddle 工作正常，所以您可能有另一种风格影响它。我会与 DOM 检查员一起检查。您还可以检查未关闭的标签，有时这些标签也可以从其他代码中引入样式。如果这不起作用，您可以尝试使用 !important 或 jQuery 作为最后的手段强制执行

<script>

      $( ".element-in-question" ).css( "font-style", "normal" );

</script>

这很奇怪，因为如果没有导入斜体，我认为斜体不会工作，而且我在您的代码中也没有看到它。

Answer 3

同样的问题，是和我本地安装的Open Sans冲突。首先尝试禁用本地安装的字体。

OpenSans Semibold Normal 显示为 Italic

OpenSans Semibold Normal displayed as Italic

css

webfonts

font-face