使用百分比字体大小?

时间:2012-04-25 21:05:46

标签: css font-size

我最近读过很多关于调整字体大小的文章,其中大部分都是使用px作为一种不可饶恕的犯罪而嘲笑(好吧,也许不是那么糟糕,你明白了),因为它在旧浏览器中没有正确调整大小。 / p>

我真的希望有一个我自己使用的标准,过去曾经是px,只是因为它简单易懂,并且很容易实现设计中指定的确切字体大小 - 但我是现在怀疑使用px。

我最近在一个项目中使用了em,因为它需要使用jQuery创建的文本大小调整功能。但是我发现它非常令人沮丧,因为如果你有两个元素并且指定了一个em大小(希望有意义),em会放大它们的方式

所以我想知道使用%进行字体大小调整,我看到有几个大网站使用这种技术(即雅虎),据我所知,似乎它具有em的所有优点而没有令人难以置信的烦恼放大的东西。

简而言之,我只是想知道在CSS中使用%进行字体大小调整是否存在任何问题?在字体大小调整方面,它比使用PX更好吗?有没有明显的退款?

道歉,如果问题前面的问题有点多:/我仍然习惯于整个QA事情

5 个答案:

答案 0 :(得分:16)

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

通过在:root伪元素上设置字体大小来设置根字体大小,如下所示:

:root {
    font-size: 16px;
}

答案 1 :(得分:7)

尝试使用此

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:当然,你需要一个身体后面的包装标签

答案 2 :(得分:3)

据我所知,网页设计的标准是使用百分比设置正文中的字体大小,然后使用ems更改字体大小。您可以在body标签之外使用百分比而没有不良副作用,但我认为许多开发人员发现ems更容易使用(任何人都可以自由地检查我)。

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

答案 3 :(得分:-2)

这可能会使制作字体大小调整脚本更有意义。 我制作了一个完全按照你的意愿制作的剧本,但我再也找不到了。

<强>的伪代码:

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%。有些令人费解的是你会得到正确的转换。还要尽量避免填充和边框宽度。

答案 4 :(得分:-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 );