Question

我的html文件中的<head>标记包含此链接调用：

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

然后我继续说：

<style>
    body {
        font-family: 'Lato', sans-serif;
    }

    .textTime {
        font-weight: 700;
    }
</style>

然后我的身体继续这样说：

<div class="textTime">
    from 6am to 6am
</div>

它被渲染成这样：

但是，如果我将font-weight属性更改为font-weight: 400;而不是700，则会像这样呈现：

所以我的问题是，字体被渲染为Lato，只有当权重为400而不是700时，它才会被渲染为其他东西。

这样做是因为它使用的是CSS2，而不是CSS3，我无法改变它。

我该如何解决这个问题？

Answer 1

使用自定义字体时，您需要为要使用的每个重量添加每种字体类型。

您看到Lato或其他字体版本损坏的原因是您要么为这些字体权重定义了另一种字体，要么您看到浏览器呈现的Lato版本将基于Lato 400并向上或向下缩放取决于它，它看起来与你的意图完全不同。