如何使用 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

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

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

现在，处理此问题的一种可能更简单的方法是使用 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() 函数更改字体系列？

How to Change Font-family using JQuery's .css() function?

jquery

css

font-family