الحد الأقصى لحجم الخط يمكن أن تجعل الصفحة

Question

ما هو أقصى حجم الخط الذي يمكن تقديمه في صفحة ويب؟

هل تعتمد على الجهاز، أو التطبيق (المتصفح)؟

Answer 1

نعم.

يحتوي كل جهاز على بعض الخطوط من الخطوط والأحجام الخطية التي يدعمها. بالنسبة لكمبيوتر سطح المكتب، كلا المجموعتين كبيرة جدا، ولكن بالنسبة للهاتف أو جهاز صغير آخر، فقد تكون المجموعات محدودة إلى حد ما. بالنسبة للجهاز باستخدام شاشة نصية فقط، قد يكون هناك خط واحد فقط بحجم واحد.

Answer 2

يختلف عن المتصفح إلى المتصفح. على سبيل المثال Mac / IE4 + لا يجعل الخطوط المحددة> 255Px.opera 5 Freaks بعد 510px.mozilla يبدو قادرا على التعامل مع القيم حتى 9362px، والتي تحدث فقط أن تكون حد Netscape 4 أيضا.

Answer 3

في Firefox 3.6، يبدو أن الحد الأقصى لحجم الخط العملي 2000px. قبعات الطول / الارتفاع المحسوب في ~ 2657px، وزيادة أخرى لا تغير الشاشة.

يبدو أن Safari 5 & Chrome 6 (متصفحات Webkit) تسمح بأحجام تصل إلى (ولكن لا تضم) 1،000،000 بكسل، وبعد ذلك لا يقدم النص على الإطلاق.

Answer 4

إذا كنت تستخدم SVG المضمنة، فسيقوم Chrome بتقييد حجم الخط إلى 8000PX. سيعمل التعليمات البرمجية التالية مضمنة من Firefox (V 59). سيتم تقديم Chrome (V 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>

Answer 5

ربما كلاهما. يعتمد أيضا على حجم الشاشة التي يتم عرض صفحة الويب التي يتم عرضها. أي طلب معين تريد أن تعرف هذا؟