使用 jQuery 将 CSS 属性应用于具有特定字体系列的标题？答案

【问题标题】：Using jQuery to apply CSS properties to headers with a specific font family?使用 jQuery 将 CSS 属性应用于具有特定字体系列的标题？
【发布时间】：2016-04-26 05:21:49
【问题描述】：

我正在开发一个自定义 Wordpress 主题，其中包括 2 种不同的字体，用于整个网站的标题标签。一种字体是草书，需要具有正常的text-transform 属性。其他字体需要一直显示在text-transform:uppercase;。

我不能将text-transform:uppercase; 应用于所有标题标签，因为它也会应用于草书字体——我不想要。

由于它是 Wordpress，客户端将能够在 TinyMCE 中添加标题并根据具体情况更改字体系列，因此使用一个类来应用也适用于 text-transform:normal; 的草书字体也被淘汰了。

我想知道是否有一种方法可以使用 jQuery 将“文本转换”属性应用于具有特定字体系列的任何内容？

因此，例如，我希望将 font-family:"Cinzel"; 的任何标头也应用 text-transform:uppercase;，但任何带有 font-family:"Dancing Script"; 的标头都需要保留 text-transform:normal;。

【问题讨论】：

标签： jquery css wordpress fonts

【解决方案1】：

您可以根据字体系列过滤标题标签，然后应用文本转换

$('header').filter(function() {
    return $(this).css('font-family').replace("'",'') === 'Cinzel';
}).css('text-transform', 'uppercase');

.cinz {font-family : "Cinzel"}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="cinz">this should be uppercase</header>
<header>this shouldn't</header>

【讨论】：

在过滤器回调中传递一个变量不是更好吗？ .filter(function(x) { return x.css... 或者使用$(this) 有什么好处？
@BenjaminDowns - 没关系