كيف يمكنني الحصول على حجم الخط الافتراضي بالبكسل باستخدام JavaScript أو JQuery؟

Question

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

ولكن كيف يمكنني الحصول على حجم الخط الافتراضي للبيئة الحالية (بالبكسل) باستخدام JavaScript أو JQuery؟

يعتبر،

Answer 1

هناك بعض المواقف التي يمكن أن تكون مفيدة-

function getDefaultFontSize(pa){
 pa= pa || document.body;
 var who= document.createElement('div');

 who.style.cssText='display:inline-block; padding:0; line-height:1; position:absolute; visibility:hidden; font-size:1em';

 who.appendChild(document.createTextNode('M'));
 pa.appendChild(who);
 var fs= [who.offsetWidth, who.offsetHeight];
 pa.removeChild(who);
 return fs;
}

تنبيه (getDefaultFontSize())

Answer 2

أعتقد أن مبدأ M هو أسطورة.على الأقل الوثائق التالية من http://www.w3.org/TR/CSS21/syndata.html يثبت أن الحسابات المستندة إلى مبدأ M معقدة للغاية وغير ضرورية.

تساوي وحدة "EM" القيمة المحسوبة لخاصية "حجم الخط" للعنصر الذي يتم استخدامه عليه.الاستثناء هو عندما يحدث "EM" في قيمة خاصية "حجم الخط" نفسها ، وفي هذه الحالة يشير إلى حجم الخط للعنصر الأصل.يمكن استخدامه للقياس العمودي أو الأفقي.(تسمى هذه الوحدة أيضًا في بعض الأحيان العرض الرباعي في النصوص المطبعية.)

من هذه الوثائق ما يلي صحيح.

1. بدون تكبير السلف، 1em يساوي تمامًا حجم خط البكسل.

2. نظرًا لأن تكبير السلف باستخدام ems والنسبة المئوية يعمل بطرق محددة جيدًا، فستقوم حلقة بسيطة بحساب أحجام الخطوط الدقيقة، بافتراض:لا يوجد C.S.S؛وبعض الأسلاف لديه حجم خط محدد بوحدات مطلقة.

3. نظرًا لأن ems يقيس العرض، يمكنك دائمًا حساب حجم خط البكسل الدقيق عن طريق إنشاء div يبلغ طوله 1000 ems وتقسيم خاصية عرض العميل الخاصة به على 1000.يبدو أنني أتذكر أن ems يتم اقتطاعها إلى أقرب ألف، لذا تحتاج إلى 1000 ems لتجنب الاقتطاع الخاطئ لنتيجة البكسل.

4. ربما يمكنك إنشاء خط يفشل فيه مبدأ M نظرًا لأن em يعتمد على سمة حجم الخط وليس على الخط الفعلي.لنفترض أن لديك خطًا غريبًا حيث يكون M هو 1/3 حجم الأحرف الأخرى ولديك حجم خط يبلغ 10 بكسل.أعتقد نوعًا ما أن حجم الخط هو ضمان لارتفاع الحد الأقصى للأحرف وبالتالي لن يكون M 10 بكسل وجميع الأحرف الأخرى 30 بكسل.

Answer 3

وخدعة واحدة رأيت / استخدمت في الماضي هو تقديم بعض النصوص (ويقول 50 حرفا التعسفي، أو السيدة) ومن ثم قياس حجم الحاوية المقدمة وتفعل الرياضيات لمعرفة الطول والعرض ل حرف واحد. هل هذا ما كنت تريد الذهاب ل؟ يمكنك القيام بما جعل في الخلفية وبالتالي فإن المستخدم لا يرى ذلك.

Answer 4

وعن طريق مسج (على افتراض أن كنت تريد أن حجم الخط لعنصر معين):

وvar originalFontSize = $('#your_element_id_here').css('font-size')؛

إذا كنت تستخدم النموذج وكذلك مسج، فأنت تريد أن استخدام بادئة مسج بدلا من الدولار:

var originalFontSize = jQuery('#your_element_id_here').css('font-size');

وهذا سيعود قيمة كسلسلة مثل ذلك: 16px

.

Answer 5

ويمكن القيام بذلك باستخدام هذا السطر من التعليمات البرمجية:

const fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])

1. window.getComputedStyle(document.body) - للحصول على كافة الأنماط للجسم
2. getPropertyValue('font-size') - للحصول على قيمة سلسلة بحجم الخط، على سبيل المثال: (16 بكسل)
3. match(/\d+/)[0]) - للحصول على جزء رقم فقط، مثال: (16) - السلسلة
4. Number(...) - لتحويل جزء الرقم إلى رقم، مثال: (16) - العدد

Answer 6

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

وإذا كان لديهم حجم الخط على أكبر - انها لانهم أعمى، والعكس بالعكس. أود أن أوصى وضع الافتراضات والتي توصي "قرار / الحجم. ما لم يعتمد التطبيق على ذلك -. السماح للمستخدم التعامل معها

Answer 7

وهذا يعمل في FF.

<script>
function getStyle(el,styleProp)
{
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

function GetSt()
{
    var font_size = getStyle("div2","fontSize"); 
    alert ( font_size );
}

</script>
<div id="div1" style="height: 100px;font-size: 20px;">
<div id="div2" style="font-size: 2em;">
test
</div>
</div>
<button onclick="GetSt();">Click</button>

Answer 8

وأعتقد أن هذا هو ما كنت تبحث عن:

function getDefaultFontSize () {
// this will return the default* value assigned to the style: fontSize
defsize=(document.body.style.fontSize)
alert('The default font size of your browser is: "' + defsize + '"');
}

* إذا كان الجسم لديه decleration حجم الخط مختلفة في أي مكان آخر في رمز (وربما في بعض المغلق) وظيفة ستعود تلك القيمة. على سبيل المثال:

<style>body{font-size:20px;}</style>
<script>function getDefaultFontSize () {
defsize=(document.body.style.fontSize)
} </script>

ما سبق سيعود قيمة حجم الخط من 20px.

---

اختبارها بشكل كامل ويعمل بالنسبة لي (الكروم 22.0.1229.94 م وفايرفوكس 13.01).