Faire tout le texte avec la police Helvetica avoir la police Arial dans jQuery

Question

J'ai besoin de magie jQuery qui va chercher tout le texte sur une page avec une police donnée (disons Helvetica), et changer la police de seulement ce texte à autre chose (dit Arial).

Answer 1

Cela devrait fonctionner, je l'ai vérifié sur mon site et il a changé de police correctement.

 
$('body').filter(function() { 
    return ($(this).css('font-family').indexOf('Helvetica')>-1); 
}).css('font-family', 'Arial'); 

Answer 2

Si tout a été défini par CSS, avez-vous déjà pensé fraie vos propres définitions @font-face, outrepassant Helvetica?

Par exemple, si tout est défini pour rendre Helvetica, comme dans cette déclaration:

* { 

    font-family: Helvetica; 

} 

Vous pouvez alors ajouter une instruction @ font-face à votre feuille de style, qui ressemble maintenant à ceci:

@font-face { 

    font-family: 'Helvetica'; 

    src: local('Anivers-Regular'), 
     local('Anivers Regular'), 
     url('typeface.Anivers.Regular.otf') format('truetype'); 

} 

Il fonctionne sur en ligne de style des éléments tels que <h4 style="font-family: Helvetica;">aw</h4> aussi. De cette façon, tout ce qui est Helvetica serait rendu automatiquement dans (par exemple,) Anivers, et cet extrait fonctionne avec ou sans guillemets. Répertorie le nom PostScript, le nom complet + le style, puis un URI pour la compatibilité entre les navigateurs. Si le repli est sur Helvetica, cette magie CSS fonctionnerait. De plus, vous bénéficiez de la gestion des performances gratuites puisque le navigateur, au lieu de votre script, effectue la substitution pour vous. Malheureusement, Internet Explorer déteste les fichiers .otf sans raison apparente et vous auriez besoin d'un utilitaire appelé ttf2eot au cas où.

-

Ceci est une bidouille horrible et il vivra dans votre code de production trop longtemps. À propos, quel est le scénario et pourquoi voudriez-vous le faire - en substituant une fonte plus belle à une fonte inférieure?

Si par la suite vous changiez d'avis et que vous souhaitiez utiliser la "vraie" Helvetica ailleurs, vous devrez la changer de nom sous un autre nom. Travail fastidieux n'est-ce pas.

Answer 3

Ce n'est pas vraiment une réponse, mais comme je ne peux pas encore commenter les réponses des autres, je place mes commentaires ici dans une réponse.

La réponse du penseur ci-dessus ne fonctionnera pas (ou du moins il y a des cas où cela ne fonctionnera pas).

code de Penseur est la suivante (je copie ici au cas où il peut modifier sa réponse):

$('body').filter(function() { 
return ($(this).css('font-family').indexOf('Helvetica')>-1); 
}).css('font-family', 'Arial'); 

Qu'est-ce que ce code va faire est de changer la police Arial pour une famille de polices qui contient Helvetica. Cela inclut les familles de polices où Helvetica est utilisée comme solution de repli, et donc très probablement n'est pas toujours affiché.

Vous pouvez également lire les réponses et commentaires dans le post suivant:

Changing Body Font-Size based on Font-Family with jQuery

qui contient un code similaire avec une discussion.

Answer 4

C'est ce que je l'utilise dans mon extension Google Chrome:

var replacement = "Helvetica"; 
var toReplace = new RegExp("[\\'\\\"\\s]*(Arial|Some|Other|Fonts)[\\'\\\"\\s]*(?=,|$)", "gi"); 

function replaceFont (toReplace, replacement) { 
    // Adjust style sheets 
    if (document.styleSheets) { 
     for (var i = 0; i < document.styleSheets.length; i++) { 
      var styleSheet = document.styleSheets[i]; 

      if (styleSheet.cssRules) { 
       for (var j = 0; j < styleSheet.cssRules.length; j++) { 
        var cssRule = styleSheet.cssRules[j]; 

        // Replace in font-family attribute 
        if (cssRule.style.fontFamily.match(toReplace)) 
         cssRule.style.fontFamily = cssRule.style.fontFamily.replace(toReplace, replacement); 

        // Replace in font attribute 
        if (cssRule.style.font.match(toReplace)) 
         cssRule.style.font = cssRule.style.font.replace(toReplace, replacement); 
       } 
      } 
     } 
    } 

    // Adjust inline styles 
    $('body').find('*').each(
     function (i) { 
      if ($(this).css('font-family').match(toReplace)) 
       $(this).css('font-family', $(this).css('font-family').replace(toReplace, replacement)); 

      if ($(this).css('font').match(toReplace)) 
       $(this).css('font', $(this).css('font').replace(toReplace, replacement)); 
     } 
    ); 

    // Adjust font tag properties 
    $('body').find('font').each(
     function (i) { 
      if ($(this).attr('face').match(toReplace)) 
       $(this).attr('face', $(this).attr('face').replace(toReplace, replacement)); 
     } 
    ); 

} 

code complet est here.