如何使用 JQuery 的 .css() 函数更改字体系列?
How to Change Font-family using JQuery's .css() function?
我已经看过 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);
}
每当我 运行 函数时,除了字体之外的所有内容都会改变。我做错了什么,我需要做什么?
我将你的东西粘贴到一个 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")
交换东西。
我已经看过 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);
}
每当我 运行 函数时,除了字体之外的所有内容都会改变。我做错了什么,我需要做什么?
我将你的东西粘贴到一个 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")
交换东西。