使用百分比作为字体大小？

Posted 2023-03-06

【中文标题】使用百分比作为字体大小？

【英文标题】：Using percent for font size?

【发布时间】：2012-05-06 14:49:07

【问题描述】：

我最近读过一些关于调整字体大小的文章，其中大部分都嘲笑使用 px 是一种不可原谅的罪行（好吧，也许没那么糟糕，你明白了），因为它在旧版浏览器中无法正确调整大小。

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

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

所以我想知道使用 % 来调整字体大小，我已经看到几个大网站使用这种技术（即 Yahoo），据我了解，它似乎具有 em 的所有优点，而没有令人难以置信的烦人放大的东西。

简而言之，我只是想知道在 CSS 中使用 % 来调整字体大小是否有任何问题？在字体大小调整方面会比使用 PX 更好吗？有什么明显的缺点吗？

如果问题前的简介有点多，我深表歉意：/ 我还是有点习惯整个 QA 的事情

【问题讨论】：

我可能错了，但我认为使用% 很容易出现与em 完全相同的缺陷。如果您有两个div 元素，一个在另一个元素中，每个元素都有一个font-size: 110%，那么它的计算方式将与font-size: 1.1em 完全相同。除非我真的弄错了。

我会很快尝试一些 htmling 来检查，我以前没有听说过，但如果它是真的，那就太糟糕了。 . .我想使用 % 的主要原因是它没有这样做！

@Sean Dunwoody：你的小提琴有缺陷。您对em 和% 使用了不同的值。如果我使值相等（1em：100%），则结果为：jsfiddle.net/BoltClock/gHe5S/1

CSS3 定义了一个新的新单位“rem”，它是基于根 (html) 字体大小的 em。(w3.org/TR/css3-values/#rem-unit) 支持远非普遍，但它确实涵盖了 IE9、Safari 5 、Chrome、Firefox 3.6+ 和 Opera 11.60+。 （来源：snook.ca/archives/html_and_css/font-size-with-rem）

***.com/q/132685/340760

【参考方案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%。有了一些令人费解的问题，您将获得正确的转换。还要尽量避免填充和边框宽度。

【参考方案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 );

【讨论】：

问题是关于在 CSS 中使用不同的字体大小测量，而不是关于适合文本。

【参考方案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: 当然，你需要在 body 后面加上一个 wrapper 标签

【参考方案4】：

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

如果你使用ems来设置body字体大小，危险就来了；较旧的浏览器会阻塞并错误地显示文本，尤其是在缩放时。

【参考方案5】：

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

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

:root 
    font-size: 16px;

【讨论】：

这就是我实际采取的行动！有些人似乎说他们更喜欢em 而不是rem，但我一直不明白为什么...... ems 对我来说似乎总是过于复杂。

这个答案可以通过添加定义为 root 的注释来进一步改进（不检查，我假设它是body），也许还有浏览器支持问题（如果有的话）。

html 文档中的:root 元素是html 元素，而不是body。