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

Question

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

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

因为它是 Wordpress，客户端将能够在 TinyMCE 中添加标题并根据具体情况更改字体系列，因此使用一个类来应用草书字体，该字体也应用 text-transform:正常；也out了。

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

因此，例如，我想要任何 font-family:"Cinzel"; 的 header 也应用 text-transform:uppercase; ，但任何带有 font-family:"Dancing Script"; 的标题都需要保持 text-transform:normal;。

Answer 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>