页面可以呈现的最大字体大小答案

【问题标题】：Maximum font size a page can render页面可以呈现的最大字体大小
【发布时间】：2009-04-15 07:05:24
【问题描述】：

网页中可以呈现的最大字体大小是多少？

它取决于机器还是应用程序（浏览器）？

【问题讨论】：

标签： html browser font-size

【解决方案1】：

它因浏览器而异。例如，Mac/IE4+ 不呈现指定 >255px 的字体。Opera 5 在 510px 之后出现异常。Mozilla 似乎能够处理高达 9362px 的值，这恰好是 Netscape 4 的限制也是。

【讨论】：

@KristianJ。七年后的现在甚至更老了。

【解决方案2】：

是的。

每个设备都有一些它支持的字体和字体大小。对于台式计算机，这两个集合都非常大，但对于电话或其他小型设备，这两个集合可能相当有限。对于带有纯文本屏幕的设备，一种尺寸可能只有一种字体。

【讨论】：

【解决方案3】：

在 Firefox 3.6 中，最大实用字体大小似乎是 2000 像素。计算出的高度/行高上限约为 2657 像素，进一步增加不会改变显示。

Safari 5 和 Chrome 6（Webkit 浏览器）似乎允许最大（但不包括）1,000,000 像素的大小，在此之后文本根本不会呈现。

【讨论】：

【解决方案4】：

如果您使用内联 SVG，Chrome 会将字体大小限制为 8000px 。以下代码将在 firefox (V 59) 内联工作。 Chrome (V 66) 将呈现以下 inline-svg 不可读。

<svg id="diagrammChart"
           width="100%"
           height="100%"
           viewBox="-400000 0 1000000 550000"
           font-size="27559"
           overflow="hidden"
           preserveAspectRatio="xMidYMid meet"
>
<g class="hover-check">
    <text class="hover-toggle" x="-16800" y="36857.506818182" opacity="1" height="24390.997159091" width="953959" font-size="27559">
        <set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.touchstart"
             end="ExampShow56TestBarRect1.touchend">
        </set>
        <set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.mouseover"
             end="ExampShow56TestBarRect1.mouseout">
        </set>
        Heinz: -16800
    </text>
    <rect class="hover-rect" x="-16800" y="12466.509659091" width="16800" height="24390.997159091" fill="darkred">
        <set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.mouseover"
             end="ExampShow56TestBarRect1.mouseout">
        </set>
        <set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.touchstart"
             end="ExampShow56TestBarRect1.touchend">
        </set>
    </rect>
    <rect id="ExampShow56TestBarRect1" x="-384261" y="0" width="953959" height="48781.994318182"
          opacity="0">
    </rect>

</g>
</svg>

【讨论】：

【解决方案5】：

可能两者兼而有之。它还取决于查看网页的显示器的大小。您想了解任何特定的应用程序吗？

【讨论】：

实际上我需要开发一个 JavaScript WYSIWYG 编辑器，为此我必须获得更多关于字体及其渲染的知识。今天我刚刚在 MS word 中插入了一个字体大小为 2000 的文本，它给了我一个警告，指出字体大小应该在 1 到 1638 之间。
如果文本的字体大小值很大，我的编辑器会损坏，因为我需要像在 MS Word 中那样在编辑器中实现分页。
但是您的编辑器的预期用途是什么？可能不是需要超大字体大小的应用程序......所以在这种情况下，您可以将允许的字体大小限制在合理的范围内（就像 Word 显然将其限制为 1638 一样），对吧？
但是我们不能阻止用户复制具有大字体大小值的文本，然后将其粘贴到我们的编辑器中......