使用百分比字体大小？

Question

我最近阅读了一些关于调整字体大小的公正信息，其中大部分都是用px作为不可饶恕的犯罪（好吧，也许不是那么糟糕，你明白了），因为它在旧版浏览器中没有正确调整大小。

我真的很想拥有一个我自己使用的标准，过去一直是px，只是因为它很简单，易于理解，并且很容易实现设计中指定的确切字体大小 - 但是，现在怀疑使用px。

我最近在项目中使用了em，因为它需要我使用jQuery进行文本大小调整的功能。但我发现它非常令人沮丧，因为如果你有两个元素内的两个元素指定的EM大小（希望是有道理的），他们放大的方式

所以我想知道如何使用％进行字体大小调整，我已经看到一些大型网站使用这种技术（即雅虎），从我的理解来看，它似乎具有所有的优点，而没有令人难以置信的烦人放大的事情。

所以简而言之，我只是想知道在CSS中使用％来设置字体大小是否有问题？在字体大小调整方面，它会比使用PX更好吗？有没有明显的缺点？

道歉，如果这个问题之前Blurb的是一个有点多：/我还是那种习惯了整个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

尝试使用此

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

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

所以，当你这样说的 “包装” 中1EM你就会有一个大小非常相似， 10px的。这里有一个示例表：

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

这将帮助你在过渡

P.d：当然，你需要一个包装标签后身体

Answer 4

在网页设计中的标准，据我所知，它是使用百分比来设置正文中的字体大小，然后使用EMS来改变之后的字体大小。您可以使用身体标签以外的百分比而不会产生不良副作用，但我认为许多开发人员发现易于使用ems（任何人都可以*地检查我）。

如果您使用ems设置机身字体大小，则会出现危险;旧的浏览器窒息并错误地显示文本，尤其是在缩放时。

Answer 5

在CSS3中，使用rem（root em）。大小不会受到父元素的em大小的影响。