代码之家  ›  专栏  ›  技术社区  ›  abalter

字体名称有空格时如何使用jquery设置CSS字体系列

  •  2
  • abalter  · 技术社区  · 7 年前

    font-family 使用jquery的属性 css 方法,并在字体名称有空间时遇到问题。

    不管我如何引用或不引用字体名称,元素的结尾都是:

    <h1 style="font-family: "Comic Sans"">Title Text</h1>
    

    嵌套双引号。

    var font_family = 'Arial Black';
    var $title_template = $('<h1>Title Text</h1>');
    var $title;
    
    console.log(font_family)
    $title = $title_template.clone().css({'font-family': font_family});
    $('body').append($title)
    
    font_family = "'Arial Black'";
    console.log(font_family);
    $title = $title_template.clone().css({'font-family': font_family});
    $('body').append($title)
    
    font_family = '"Arial Black"';
    console.log(font_family);
    $title = $title_template.clone().css({'font-family': font_family});
    $('body').append($title)
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <h1 style="font-family: 'Arial Black'">Title Text</h1>
    1 回复  |  直到 7 年前
        1
  •  2
  •   Benjamin Ray    7 年前

    如果您正在浏览器中的开发人员选项中查看字体,不要担心它看起来像嵌套不好的引号: <h1 style="font-family: "Arial Black"">Title Text</h1> . 这就是浏览器选择呈现该元素的样式属性的方式。实际上正在应用样式,并且字体系列设置正确。

    如果您查看dom元素的属性(例如在chrome devtools中),您将看到字体系列的值是 "Arial Black" . 因为字体名称中有空格,所以有多余的引号。如果您将JS的第一行从 var font_family = 'Arial Black var font_family = 'Arial' ,字体系列的值将简单地显示为 Arial (不带引号)。

    PS-为了让“Comic Sans”出现,我不得不使用“Comic Sans MS”,即臭名昭著的字体的正确名称。