حجم الخط حسب عرض الكتلة

مثالان على تعيين حجم الخط وموضعه في الكتلة بالنسبة لعرضه. أحدهما لـ JS ، إذا لم يكن الحظر هو العرض الكامل للشاشة ، والآخر لـ CSS ، إذا كان ممتلئًا.
في البداية ، لدينا صورة يوجد عليها النص في المكان الصحيح ، والتي لا تتداخل مع أجزاء معينة منه. تم تعيين جميع قيم هذا التصميم لحجم كتلة يبلغ 1170 بكسل.

مثال بأبعاد دقيقة

حجم الخط

HTML 1

<div dir="rtl" class="fontsize">
    <div class="text">حجم الخط</div>
    <img src="https://i.ibb.co/c3x4CHN/font-size.jpg" /> 
  </div>

منشورات قد تفيدك

Css 2

.fontsize {
    position: relative;
}
.fontsize img {
    width: 100%;
}
.fontsize .text {
    width: 100%;
    position: absolute;
    font-family: 'Roboto', sans-serif;  
    color: #337AB7;
    font-size: 48px;
    top: 40px;
    left: 130px;
}

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

مثال بأبعاد عبر JAVASCRIPT

حجم الخط

JAVASCRIPT 3

function fontsize() {
    let block = document.querySelector('.fontsize');
    let text = document.querySelector('.fontsize .text');
    let w = block.offsetWidth;
    text.style.fontSize = w/24 + "px";
    text.style.top = w/38 + "px";
    text.style.left = w/9 + "px";
}
window.onload = fontsize;
window.onresize = fontsize; 

تظل HTML و CSS كما هي (في CSS ، يمكنك إزالة الفائض ، فهذه هي خصائص font-size وtop وleft التي قمنا بتعيينها من خلال JS). الآن ، إذا غيرت الكتلة حجمها ، فسيقوم النص أيضًا بذلك وفقًا للنسب الضرورية ، والتي يتم تعيينها بالعين.

إذا كان عرض الكتلة يساوي عرض الشاشة ، فيمكنك الاستغناء عن JS وتعيين جميع الأحجام بناءً عليه.

مثال على تحجيم CSS إذا كان عرض الكتلة يساوي الشاشة

حجم الخط

يظل HTML لهذا المثال كما هو ، ولا نحتاج إلى أي JS ، والأبعاد في CSS ستكون:

.fontsize .text {
    font-size: 4vw;
    top: 4vw;
    left: 12vw;    
}

حيث يتم أيضًا تعيين حجم النص وموضعه بالعين على أي دقة شاشة.

كيف كان المقال؟