Question

我已经看过了here并且我尽可能地使用了那里给出的东西，但它确实没有帮助。

我尝试了this，但它也没有帮助。

这是我的JQuery（没有完成案例，但我拥有的是我需要的案例）：

$(document).ready(function(){
    $("#sub").click(function(){
    var initial = $('#name').val().substr(0, 1);
    var name = $('#name').val();
        switch(initial) {
            case "K":
            $("body").css("background-image", "url(background2.png)");
            $("div").css("background-color", "#eee5e5");
            $(".img").css("display", "none");
            $(".me").css("padding-top", "100px");
            $(".me").css("padding-bottom", "100px");
            $(".me").css("color", "#570000");
            $("p").css("font-family", "rebel");
            $("a").css("font-family", "rebel");
            $("#h1").css("font-family", "highway");
            break;
        }
    });
});

CSS中我的＃h1（我的p和标签已经没有css）：

#h1{
    background-color:#ef6d3a;
    border-style:solid;
    border-color:white;
    border-width:3px;
    font-family:hobo;
    margin-top:10px;
    margin-bottom:0px;
    width:1224px;
    right: 10;
}

我导入的字体：

@font-face{
    font-family:peignot;
    src:url(peignot.ttf);
}
    @font-face{
    font-family:binner;
    src:url(ufonts.com_binner.ttf);
}
    @font-face{
    font-family:rebel;
    src:url(rb.ttf);
}
@font-face{
    font-family:highway;
    src:url(hth.ttf);
}
@font-face{
    font-family:hobo;
    src:url(ufonts.com_hobo.ttf);
}

每当我运行该函数时，除字体外的所有内容都会发生变化。我做错了什么，我需要做什么？

Answer 1

我将你的东西粘贴到一个pastebin中并对其进行修改，以便使用内置字体更改字体，并且工作正常。链接：http://jsbin.com/xijejelala/edit?html,css,js,console,output

根据Kris Oye的评论，让我相信你的字体文件没有正确解析。使用F12开发人员工具并转到网络选项卡并刷新，然后检查您的文件是否在尝试加载时不是404。

现在，处理此问题的一种更简单的方法是使用CSS执行此操作：

body.initial-k #h1 { /* styles for #h1 */ }
body.initial-k p { ... }
body.initial-d #h1 {}
body.initial-d p {}

然后使用$("body").removeClass("initial-k").addClass("initial-d")来交换周围的事物。

如何使用JQuery的.css（）函数更改Font-family？

1 个答案: