如何使用 JQuery 的 .css() 函数更改字体系列？

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 和 a 标签还没有 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

我将你的东西粘贴到一个粘贴箱中并对其进行了修改，因此它使用内置字体更改了字体，它工作正常。链接：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") 交换东西。