Maximum font size a page can render

问题

What is the maximum font size that can be rendered in a web page?

Does it depend on the machine, or the application (browser)?

回答1:

Yes.

Every device has some set of fonts and font sizes it supports. For a desktop computer both sets are very large, but for a phone or other small device, the sets may be fairly limited. For a device with a text-only screen, there might only be one font at one size.

回答2:

It differs from browser to browser.For example Mac/IE4+ doesn't render fonts specified >255px.Opera 5 freaks after 510px.Mozilla appears to be able to handle values up to 9362px, which just happens to be Netscape 4's limit as well.

回答3:

In Firefox 3.6, the maximum practical font-size appears to be 2000px. The computed height/line-height caps out at ~2657px, and further increases do not change the display.

Safari 5 & Chrome 6 (Webkit browsers) seem to allow sizes up to (but not including) 1,000,000 pixels, after which the text does not render at all.

回答4:

If you use inline SVG, Chrome will restrict the font-size to 8000px . The following-code will work inline of firefox (V 59). Chrome (V 66) will render unreadable the following 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:

Probably both. It also depends on the size of the monitor on which the web page is viewed. Any particular application for which you want to know this?

来源：https://stackoverflow.com/questions/750594/maximum-font-size-a-page-can-render

标签

html

browser

font-size