Question

我正在使用2个字体，希望使用jQuery在它们之间切换，我的字体名称是'ArvoBold'，当我使用时：

css('font-family','ArvoBold')

它更改为名为ArvoBold的非现有字体（无引号）！我试图让它适用：

css("font-family","'ArvoBold'")

但它似乎不起作用。我也试过创建一个变量：

var fontvar="'"+"ArvoBold"+"'";
css('font-family',fontvar);

并且没有成功，因为在元素的CSS上（使用谷歌Chrome的检查员）它一直使用ArvoBold而不是'ArvoBold'。

有人可以帮帮我吗？

提前致谢！

约翰

Answer 1

不确定您的确切实现，但这可以通过转义字符串中的单引号来实现：

$(".font-face").css("font-family","\'ArvoBold\'");

为什么需要单引号？

快速测试在内容div中转义单引号输出'ArvoBold'：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>   
<style>
#content{border:solid 1px red;width:100px;height:100px;text-align:center;}
</style>
</head>

<body>

<div id="content"></div>

<script type="text/javascript">
$(document).ready(function(){
$("#content").html("\'ArvoBold\'");
});
</script>

</body>
</html>

Answer 2

您需要定义选择器并更正css()括号。

Here is working jsFiddle.

var fontvar = 'ArvoBold';
$('.mySelector').css({'font-family':fontvar});

注意：不要忘记使用$(document).ready()。

Answer 3

在CSS中，你可以写

font-family: Arial;

以及

font-family: 'Arial';

它具有相同的含义。因此可以预期在

'ArvoBold'

引号被解释为字符串分隔符，而不是字符串的一部分。

您可以尝试转义引号，即

font-family: "\'ArvoBold\'"

虽然，我必须重复BoltClock的问题：为什么你的字体名称有引号？

jQuery CSS font-family不使用引号

3 个答案: