无法更改类的字体系列

Cannot change font-family for class

本文关键字：字体 系列      更新时间：2023-09-26

>我有以下html

<!doctype html>
<head>
  <meta charset="utf-8">
  <title>Hello</title>
  <link rel="stylesheet" href="css/styles.css?v=1.0">
  <script src="js/jquery-1.11.2.js"></script>
  <script src="js/script.js"></script>
  <link href='http://fonts.googleapis.com/css?family=Herr+Von+Muellerhoff' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>
<h1 class = "hidden">Hello</h1>
</body>
</html>

链接的 CSS 如下

body{
    font-size: small;
}
h1.hidden
{
    font-family: 'Herr Von Muellerhoff', cursive;
}

当.hidden附加到h1时，字体不会改变，但是如果没有.hidden字体会变成谷歌加载的字体，这是为什么？不确定这段代码是否重要，但这是链接到 html 文件的 javascript：

$(document).ready(function(){
    $(document).ready(function () {
    $('h1.hidden').fadeIn(5000).removeClass('hidden');
});
});
代码会

立即删除类hidden，而不是在淡入淡出完成后删除。因此，发生的情况很可能是您没有机会看到CSS的实际效果。

要在淡入淡出完成后删除类，请使用

$('h1.hidden').fadeIn(5000, function() { $(this).removeClass('hidden') });

最后，你真的不需要将一个$(document).ready嵌套在另一个里面。

尝试在 .hidden 类中添加 ！important。 

h1.hidden
{
    font-family: 'Herr Von Muellerhoff', cursive !important;
}
相关文章：