フォントサイズにパーセントを使用していますか？

Question

最近、フォントのサイズを変更する方法についてよく読んだことがありますが、古いブラウザではサイズ変更が適切でないため、pxを容赦しない犯罪として使ってしまう（大丈夫です。

過去にpxであったことは、シンプルで理解しやすく、デザインで指定されている正確なフォントサイズを達成するのが簡単だから、今はpxを使うことに疑問を持っています。

私はjQueryを使って作成したテキストリサイズ機能が必要なため、最近emでプロジェクトを使用しました。しかし、私はそれがemサイズが指定された両方でお互いの内部にある場合、emが増幅する方法のために非常にイライラしていることが分かりました。

フォントのサイズ変更に％いくつかの大きなウェブサイトがこの技術（すなわち、Yahoo）を使用しているのを見て、私が理解しているところでは、信じられないほど厄介な増幅事態がなければ、それらのすべての利点があるようだ。

要するに、CSSでフォントサイジングに％を使用する際に問題があるかどうかは不思議です。フォントリサイズの点でPXを使用するよりも良いでしょうか？そして、目立つドローバックはありますか？

謝罪質問の前に宣伝文が少しくらいの場合：/私はまだ種類の多分このフォントサイズを変更するスクリプトを作成するより多くの意味を行います全体のQAの事

Answer 1

に慣れます。 私はあなたの望むものとまったく同じスクリプトを作っていましたが、それ以上見つけることはできません。

擬似コード：

var fontSize = 15; // (em) input 
var fontResize = -1;// (em)input 
fontSize = fontSize+fontResize; //current div 

for(every inherent parent classname == 'classname-em') 
document.classnameParentSize[numberofclass] = classnameChildSize[numberOfClass]/100*90; 

だから、言葉で説明します。スクリプトはいくつかのフォントのサイズを変更する必要があります。それが完了すると、それらのフォントのサイズを変更する親divもありますが、サイズが固有のサイズよりも10％小さくなります。困惑すると、正しい変換ができます。また、パディングと境界線の幅を避けるようにしてください。

Answer 2

FitTextと呼ばれるjQueryプラグインがあります。パーセンテージに基づいてテキストのサイズを変更します。何らかの理由でビジターがJavaScriptを無効にしている場合は、通常のように表示されるので、妥当なPXまたはEMバックアップを設定してください。

これはjQueryに依存しているため、あなたのページにそれを含める必要があります（まだ持っていない場合）。参照用

---

jquery.fittext.js：

/*global jQuery */ 
/*! 
* FitText.js 1.0 
* 
* Copyright 2011, Dave Rupert http://daverupert.com 
* Released under the WTFPL license 
* http://sam.zoy.org/wtfpl/ 
* 
* Date: Thu May 05 14:23:00 2011 -0600 
*/ 

(function($){ 

    $.fn.fitText = function(kompressor, options) { 

     var settings = { 
     'minFontSize' : Number.NEGATIVE_INFINITY, 
     'maxFontSize' : Number.POSITIVE_INFINITY 
     }; 

      return this.each(function(){ 
       var $this = $(this);    // store the object 
       var compressor = kompressor || 1; // set the compressor 

     if (options) { 
      $.extend(settings, options); 
     } 

     // Resizer() resizes items based on the object width divided by the compressor * 10 
       var resizer = function() { 
        $this.css('font-size', Math.max(Math.min($this.width()/(compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); 
       }; 

       // Call once to set. 
       resizer(); 

       // Call on resize. Opera debounces their resize by default. 
     $(window).resize(resizer); 

      }); 

    }; 

})(jQuery); 

Answer 3

あなたは "ラッパー" 内部1EMのようなものを言うとき、あなたは非常によく似サイズを有しますので、この

body { 
    margin: 0px; 
    padding: 0px; 
    font-size: 62.5%; 
} 

body>#wrapper { 
    font-size:1em; 
} 

を使用してみてください10px。これは、移行

P.のお手伝いをします

3em == 30px 
.5em == 5px 
8.5em == 85px 

：ここでは例のテーブルですd：もちろん、あなたは体の後にラッパータグが必要です

Answer 4

私が経験した限りウェブデザインの標準は、体のフォントサイズを設定するためにパーセントを使用してからemsを使用してその後のフォントサイジング。 bodyタグの外側のパーセンテージを悪影響を及ぼすことなく使用することができますが、多くの開発者がemを使いやすくすることができます（誰でも自由に私をチェックできます）。

emsを使用して本文のフォントサイズを設定すると危険が生じます。古いブラウザーでは、特にズームしたときにテキストがチョークされ、誤って表示されます。

Answer 5

CSS3では、rem（ルートem）を使用してください。サイジングは、親要素のサイズに影響されません。