フォントHelveticaのすべてのテキストをjQueryのフォントArialにする

Question

特定のフォント（Helveticaと言う）を持つページのすべてのテキストを検索し、そのテキストのみのフォントを他のものに変更するjQueryの魔法が必要ですArialと言う）。

Answer 1

これはうまくいくはずです。私は自分のサイトでそれをチェックして、フォントを正しく変更しました。

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

Answer 2

すべてがCSSを経由して定義されている場合、あなたがこれまでのHelveticaをオーバーライドし、独自の@font-face定義を産卵の考えたことはありますか？この文のように例えば

、すべてがヘルベチカでレンダリングするように定義されている場合、：

* { 

    font-family: Helvetica; 

} 

それから今、このようになります。これは、あなたのスタイルシートにする@ font-face文を追加することがあります。

@font-face { 

    font-family: 'Helvetica'; 

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

} 

<h4 style="font-family: Helvetica;">aw</h4>のようなインラインスタイルの要素でも機能します。

このようにして、HelveticaはすべてAniversで自動的にレンダリングされ、このスニペットは二重引用符の有無にかかわらず動作します。 PostScript名、フルネーム+スタイル、そしてブラウザ間の互換性のためのURIをリストします。フォールバックがHelveticaにある場合、このCSSマジックが機能します。さらに、スクリプトの代わりにブラウザが代用するので、この方法で無駄なパフォーマンスのオーバーヘッドが発生します。

残念ながら、Internet Explorerは明白な理由で.otfファイルを嫌うので、場合によってはttf2eotというユーティリティが必要になります。

-

これは醜いハックです、あまりにも長い間、本番コードに生きます。

ちなみに、どのようなシナリオがありますか？これをやりたいと思うのはなぜでしょうか？よりよく見える書体を下位のものに置き換えてください。

後であなたの心が変わり、 "本物の" Helveticaを別の場所で使用したい場合は、別の名前でそれを振りかざす必要があります。退屈な仕事はそうではありません。

Answer 3

これは実際の回答ではありませんが、私はまだ他の人の回答にコメントすることができないので、ここで回答に答えています。

上記のThinkerの回答はうまくいきません（少なくとも動作しない場合があります）。

次のように考える人のコードは、（私は彼が彼の答えを編集することができる場合には、ここでそれをコピーしています）です：このコードは何をするか

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

はのためにどの任意のフォントファミリをMS Pゴシックフォントを変更では、 Helveticaを含む。これには、Helveticaがフォールバックとして使用されているフォントファミリが含まれているため、常に表示されるとは限りません。

また、次のポストで回答やコメントを読むことができます：

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

議論と一緒に類似したコードが含まれています。

Answer 4

これは私が私の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)); 
     } 
    ); 

} 

完全なコードがhereです。