Question

我在ASP MVC网站上看到一个问题，导航到该页面后，似乎在大约1-2秒后设置了不同的字体权重。

例如，导航到页面后，我的h1标题会立即显示：

但是大约一秒钟之后，它看起来像这样：

我在这里不明白的是，当我只是在bootstrap（helvetica neue）中使用默认字体时，我没有看到这个问题。

但是，一旦我尝试使用Roboto字体，我就会遇到这个问题，我将其用于<head>：

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

这在我的样式表中：

body {
    font-family: 'Roboto', sans-serif;
}

我没有任何影响font-weight或font-size的其他代码（除了默认引导样式中存在的代码）。

这里发生了什么？这是字体本身的一些问题吗？

更新

我能够通过覆盖bootstrap.css font-weight规则来解决这个问题，例如：

h1,
h2,
h3,
h4,
h5,
h6,
.jumbotron p {
    font-weight: 400;
}

但是，我仍然看到<strong>等标签的问题，默认引导程序为：

b,
strong {
  font-weight: bold;
}

所以我也可以覆盖上面那个，但是后来我失去了拥有<strong>标签的能力，实际上失去了对不同标签完全不同font-weights的能力，这当然是不理想。

Answer 1

这里的问题是我导入了这个样式表：

@import url('https://fonts.googleapis.com/css?family=Roboto&subset=cyrillic,cyrillic-ext');

实际上，我想要更多的内容：

@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext');

其中应包括我可能需要的所有font-weight。

我选择字体here

后，通过使用customize选项找到了这个