Максимальный размер шрифта, который может отображать страница

StackOverflow https://stackoverflow.com/questions/750594

  •  09-09-2019
  •  | 
  •  

Вопрос

Каков максимальный размер шрифта, который может быть отображен на веб-странице?

Зависит ли это от компьютера или приложения (браузера)?

Это было полезно?

Решение

ДА.

Каждое устройство имеет определенный набор шрифтов и размеров шрифтов, которые оно поддерживает.Для настольного компьютера оба набора очень велики, но для телефона или другого небольшого устройства они могут быть довольно ограниченными.Для устройства с текстовым экраном может быть только один шрифт одного размера.

Другие советы

Это отличается от браузера к браузеру.Например, 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>

Вероятно, и то, и другое.Это также зависит от размера монитора, на котором просматривается веб-страница.Какое-либо конкретное приложение, для которого вы хотите это знать?

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top