Максимальный размер шрифта, который может отображать страница
Вопрос
Каков максимальный размер шрифта, который может быть отображен на веб-странице?
Зависит ли это от компьютера или приложения (браузера)?
Решение
ДА.
Каждое устройство имеет определенный набор шрифтов и размеров шрифтов, которые оно поддерживает.Для настольного компьютера оба набора очень велики, но для телефона или другого небольшого устройства они могут быть довольно ограниченными.Для устройства с текстовым экраном может быть только один шрифт одного размера.
Другие советы
Это отличается от браузера к браузеру.Например, Mac / IE4 + не отображает шрифты, указанные > 255px.Opera 5 уродует после 510px.Mozilla, похоже, может обрабатывать значения до 9362px, что также является пределом Netscape 4.
В Firefox 3.6 максимальный практический размер шрифта составляет 2000 пикселей.Вычисленная высота / line-height ограничивается значением ~ 2657px, и дальнейшее увеличение не приводит к изменению отображения.
Safari 5 и Chrome 6 (браузеры Webkit), похоже, допускают размеры до (но не включая) 1 000 000 пикселей, после чего текст вообще не отображается.
Если вы используете встроенный SVG, Chrome ограничит размер шрифта 8000 пикселей .Следующий код будет работать встроенным в firefox (версия 59).Chrome (версия 66) сделает нечитаемым следующий встроенный 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>
Вероятно, и то, и другое.Это также зависит от размера монитора, на котором просматривается веб-страница.Какое-либо конкретное приложение, для которого вы хотите это знать?