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

Question

这个问题对于设计师来说是纯粹的。在我的 html 页面上，我在标题中调用字体，如下所示：

<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>没有办法绕过它，让它看起来像页面的其余部分，如何？

标签： htmlcssfontsfont-facewebfonts

Answer 1

如果元素没有使用您设置的字体系列，则意味着它们被某些东西覆盖，这可能是另一个 CSS 文件或浏览器默认设置。

您的浏览器的开发工具可以向您显示元素应用了哪些样式以及它们来自哪个 CSS 文件。

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

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