我的字体在按钮和输入标签上的工作方式不同

Question

这个问题纯粹是给设计师的。 在我的 html 页面上，我这样调用 header 中的字体：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=BioRhyme&display=swap">
<link rel="stylesheet" type="text/css" href="css/fonts.css">

我的 fonts.css 文件如下所示：

* {
    font-family: 'BioRhyme', serif;
}

但是我的字体在 <button> 和 <input> 上看起来不一样，有没有办法绕过它并使它看起来像页面的其余部分？

Answer 1

如果元素未使用您设置的字体系列，则表示它们被某些内容覆盖，这可能是另一个 CSS 文件或浏览器默认值。

您的 browser's dev tools 可以告诉您哪些样式正在应用于某个元素以及它们来自哪个 CSS 文件。

您还可以使用 !important 修饰符覆盖其他样式表。

* {
    font-family: 'BioRhyme', serif !important;
}