Verwenden von jQuery zum Anwenden von CSS-Eigenschaften auf Kopfzeilen mit einer bestimmten Schriftfamilie?

Question

Ich arbeite an einem benutzerdefinierten Wordpress-Design, das 2 verschiedene Schriftarten für Header-Tags auf der gesamten Website enthält. Die eine Schriftart ist kursiv und muss normale text-transform Eigenschaften haben. Die andere Schriftart muss immer in text-transform:uppercase; angezeigt werden.

Ich kann text-transform:uppercase; nicht auf alle Header-Tags anwenden, weil es auch für die kursive Schriftart gilt - was ich nicht will.

Da es Wordpress ist, kann der Client Header in TinyMCE hinzufügen und die Schriftfamilie von Fall zu Fall ändern. Daher wird auch eine kursive Schriftart verwendet, die auch text-transform:normal; gilt.

Ich frage mich, ob es eine Möglichkeit gibt, mit jQuery die Eigenschaft 'text-transform' auf alles mit einer bestimmten Schriftfamilie anzuwenden?

So zum Beispiel möchte ich jeden Header haben, die font-family:"Cinzel"; auch haben text-transform:uppercase; auf sie angewendet, aber alle Header mit font-family:"Dancing Script"; müssen text-transform:normal; bleiben.

Answer 1

Sie könnten nur die Header-Tags filtern basierend auf font-family, und wenden Sie dann den Text-Transformation

$('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>