我有以下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');
});
});
最佳答案
您的代码hidden 立即删除类，而不是在淡入淡出完成之后。因此，很可能您没有机会看到 CSS 的运行情况。
要在淡入淡出完成后删除类，请使用
$('h1.hidden').fadeIn(5000, function() { $(this).removeClass('hidden') });
最后，您真的不需要将 $(document).ready 嵌套在另一个中。
关于javascript - 无法更改类的字体系列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28121210/