使用字体大小百分比?

我最近阅读了一些有关调整字体大小的文章,大多数是使用px作为不可饶恕的犯罪(好吧,也许不是那么糟糕,你明白了),因为它在旧的浏览器中不能正确resize。

我真的想拥有一个我自己使用的标准,过去一直是px,因为它简单,易于理解,并且相当容易实现devise中指定的确切字体大小 – 但是现在我怀疑使用PX。

我最近在项目中使用了em,因为它需要使用jQuery进行文本大小调整function。 但是我发现这很令人沮丧,因为如果你有两个元素在一起,并且指定了em的大小(希望是有道理的)

所以我想知道使用%进行字体大小调整,我已经看到一些大的网站使用这种技术(即雅虎),从我的理解来看,它似乎具有所有的优点,而没有令人难以置信的烦人放大的东西。

所以简而言之,我只是想知道在CSS中使用%进行字体大小是否有问题? 在字体大小调整方面比使用PX更好吗? 有什么明显的缺点?

道歉,如果在问题之前blurb是一点点:/我还是习惯整个质量保证的事情

在CSS3中,使用rem (root em )。 大小不会受父元素的em大小的影响。

尝试使用这个

 body { margin: 0px; padding: 0px; font-size: 62.5%; } body>#wrapper { font-size:1em; } 

所以,当你在“包装器”里面说一些像1em这样的东西时,你的尺寸就会和10px非常相似。 这是一个示例表格:

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

这将有助于你的转变

钯:当然,你需要一个身体后的包装标签

据我所知,网页devise中的标准是使用百分比来设置正文中的字体大小,然后使用ems改变字体大小。 您可以使用身体标签以外的百分比而不会产生不良的副作用,但是我认为许多开发人员发现ems更易于使用(任何人都可以自由地对此进行检查)。

如果使用ems来设置正文字体大小,会带来危险。 旧的浏览器窒息并错误地显示文本,特别是在缩放时。

有一个名为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 ); 

也许这会使字体resize的脚本更有意义。 我已经做了一个脚本,做你想要的,但我不能再find它了。

伪代码:

 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%。 有些困惑,你会有正确的转换。 也尽量避免填充和边框宽度。