Question

我有以下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，字体将更改为Google加载的字体，为什么会这样？不确定这段代码是否重要，但这是链接到html文件的javascript：

$(document).ready(function(){

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

});

Answer 1

您的代码会立即删除课程hidden ，而不会在淡入淡出完成后删除。所以，最有可能的是你没有机会看到CSS正在运行。

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

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

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

Answer 2

尝试使用.hidden类中的font-family添加！important。

h1.hidden
{
    font-family: 'Herr Von Muellerhoff', cursive !important;
}

无法为类更改font-family

2 个答案: