كيف يتم حساب حجم الخط؟

Question

لديّ وظيفة JS معقدة مع معادلة أحتاج فيها فعلاً إلى فهم مقدار المساحة في أحجام خطوط البكسل.

لقد لاحظت أن بعض أحجام الخط مختلفة اعتمادًا على الخط.

كيف يتم حساب حجم الخط؟ إذا تم تعيينه إلى 12px, ، في CSS ، ماذا يفعل 12px يعني؟ هل هذا 12px واسع؟ عالٍ؟ أم أنه قياس البيكسل قطري؟

Answer 1

انظر المواصفات:

يتوافق حجم الخط مع مربع EM ، وهو مفهوم يستخدم في الطباعة.
لاحظ أن بعض الأحبار قد تنزف خارج مربعاتها EM.

Answer 2

الارتفاع هو المقياس القياسي

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

_{(مصدر: Banzaimonkey.net)}

الخطوط بترتيب المظهر: Times New Roman ، Courier New ، Calibri ، Consolas.

عرض

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

الخطوط

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

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

وبالتالي ، فإن أفضل طريقة لمعرفة كيفية عرض الخط في سياق معين هي تقديمه ورؤية.

القضايا التحجيم

هناك بعض التحذيرات لأحجام الخطوط عندما تتعامل مع الأشياء على الويب.

للويب

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

تحتوي قائمة بصرف النظر (قبل قفز القرش) على بعض المقالات الجيدة حول توحيد أحجام الخطوط ومساعدتك في الحصول على بعض مستوى التشابه بين المتصفحات:

• القياس يهم
• أحجام الخطوط النسبية
• نص تغيير الحجم
• إعداد النوع على الويب إلى شبكة أساسية

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

طباعة مقابل وحدات البكسل

نظرًا لأن البكسلات ليست عادةً مقياسًا طبيعيًا للخطوط (يتم استخدام قياسات مختلفة للطباعة) ، فقد تجعل خوارزميات التلميح الخطوط بمنتجة بكسل أو اثنين ، وخاصة بأحجام صغيرة ، من أجل الاحتفاظ على شكل الأحرف.

في الواقع ، غالبًا ما تختلف خوارزمية التلميح تمامًا بأحجام صغيرة ، وفي العمل المهني ربما تستخدم خطًا مختلفًا بالكامل للأحجام التي تقل عن 12pt.

البكسلات هي أيضًا نسبة إلى حجم العرض ، لذا فإن 12 بكسل سيكون حجمًا فعليًا مختلفًا على هذه العروض:

• شاشة 20 "في 1680x1050
• 22 "شاشة في 1680x1050
• شاشة iPhone
• شاشة بلاك بيري
• إلخ.

TL ؛ د

لذلك باختصار ، إنه معقد. font-size يشير إلى الارتفاع اللازم لعرض سلسلة الشخصيات ، ولكن في الإنترنت البرية والصوفية ، هناك دائمًا استثناءات.

Answer 3

هذه إجابة تكميلية. لقد وجدت الرسم البياني من هذا الموقع مفيد جدا للحصول على فهم صورة كبير.

Answer 4

لكل المواصفات (http://www.w3.org/tr/css2/fonts.html)

يتوافق حجم الخط مع مربع EM ، وهو مفهوم يستخدم في الطباعة. لاحظ أن بعض الأحبار قد تنزف خارج مربعاتها EM.

أوضح حجم مربع EM: http://www.emdpi.com/emsquare.html

Answer 5

يجب أن تستخدم .getClientRects() إذا كنت بحاجة إلى معرفة مقدار المساحة التي يتم تشغيلها/سيستغرقها عرض النص على الشاشة.

التفاعل الفعلي بين ما تحدده وما هو الحجم الذي ستحصل عليه معقد إلى حد ما. تضع مواصفات CSS3 بشكل أكثر وضوحًا من مواصفات CSS2 المقتبسة في إجابات أخرى:

تشير هذه الخاصية إلى الارتفاع المرغوب في الحروف الرسومية من الخط. بالنسبة للخطوط القابلة للتطوير ، فإن حجم الخط هو عامل مقياس يتم تطبيقه على وحدة EM للخط.

في الأساس ، يمكنك التحكم في حجم "Square". يتم تعريف أشكال الخط بالنسبة لهذا ، ولكن بالتأكيد يمكن أن تبتعد خارج/داخل هذا المربع (في بعض الأحيان بشكل كبير).

وهذا فقط للمبتدئين! حتى لو افترضت خطًا يتطابق بشكل وثيق مع هذا المربع-هل ستضرب طول السلسلة بهذا الحجم؟ ما لم يتم وضعه أحاديًا ونصك هو ASCII فقط ، فلديك الكثير للقلق بشأن: عروض الأحرف المتغيرة ، و kerning و ligatures ، وسلوك التفاف ، وبالطبع تحذيرات أخرى "طول السلسلة" مثل علامات التبويب ، و Unicode الجمع بين الأحرف ورموز التحكم .