CSS:حجم الخط:يرث * 70%؟

Question

هل هناك طريقة لتحديد حجم الخط للفصل الدراسي ليكون، على سبيل المثال، 70% من حجم الخط الموروث؟

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

<div style="font-size: 26px;">
Push this: <input class="button" type="submit" value="Go">
</div>
<div style="font-size: 10px;">
Push this too: <input class="button" type="submit" value="Go">
</div>

في كلتا الحالتين، أود أن يكون حجم خط الزر حوالي 70% من حجم خط الامتداد أو div الموجود بالزر.

هل يمكنني القيام بذلك باستخدام CSS خالص؟

Answer 1

تعمل EMs مثل النسب المئوية حيث يكون حجم الخط الأساسي دائمًا 1em و.7em سيكون 70% من ذلك (وبنفس الطريقة فإن 1.2em سيكون مكافئًا لـ 120% من حجم الخط الأساسي).لكي يعمل هذا بشكل صحيح، على الرغم من أنك تحتاج إلى تحديد حجم الخط الأساسي على نص المستند.من خلال التجربة وجدت أن حجم الخط:77%؛يمنحك حجمًا أساسيًا لطيفًا في جميع المتصفحات (أي أنه يجعل عرض 1em بحجم "عادي" وقابل للقراءة).قد ترغب في تجربة قيم أخرى تتراوح بين 75% و80% اعتمادًا على عائلة الخطوط التي تريد استخدامها.ضع في اعتبارك أيضًا أن أحجام الخطوط النسبية يتم توريثها بشكل تراكمي - على سبيل المثال:

<style>
small { font-size: .8em; }
span.tiny { font-size: .8em } 
</style>

<small>This text is 80% of base size where as 
    <span class="tiny">this text is 80% of 80% (or 64%) of base size</span>
</small> 

يعمل هذا لصالحك حيث ستحتاج فقط إلى إعطاء فئة الزر الخاصة بك حجم خط يبلغ .7em لتحقيق ما تريده (سيكون حجم الخط للأزرار دائمًا 70٪ من الكائن الأصلي).ترميز سعيد!

تحرير 2014:

تجدر الإشارة إلى أن دعم المتصفح لوحدة Root EM أصبح الآن جيدًا جدًا* لدرجة أنك إذا لم تكن تستخدمه بالفعل، فمن المفيد النظر فيه.يرتبط Root EM (rem) بحجم خط الجذر (المستند)، وعلى عكس EM "العادي"، فهو لا يتأثر بالتداخل - فهو يرتبط دائمًا بحجم الخط الجذر.بينما emلا تزال ملفات s مفيدة جدًا لمعظم أحجام النصوص، وذلك على وجه التحديد لأنها يفعل احترام التعشيش، و rem يعد أمرًا رائعًا لأشياء مثل الهوامش والحشو، والتي قد لا ترغب في تغيير حجمها من خلال التداخل (وهذا سبب شائع للهوامش اليسرى غير المحاذاة)، ولكنك يفعل تريد تغيير الحجم مع الجذر html حجم الخط (عادةً ما يستخدم تساؤلات الإعلام).

يمكنك قراءة المزيد عن EMs مقابل.حركة العين السريعة على ديزاين شاك.

*) IE8 هو المتصفح الشائع الوحيد (~5%) الذي لا يدعمه - إذا كنت بحاجة إلى دعم IE8، فما عليك سوى تضمين حجم مكافئ بالبكسل قبل ال rem تصريح.

Answer 2

في CSS، إذا كنت تعطي وحدة نسبية، فمن افتراضيا نسبة إلى الحجم الذي يرث. وهذا يعني، هل يمكن أن تحدد حجم الخط من زر باسم "70٪".

وهناك أيضا اثنين من وحدات النسبية أخرى يدوية لأحجام الخط: م والسابقين. 1 م هو عرض الحرف "M" (1)، بحكم ارتفاع الحرف "س" - من الواضح أن ورثت أيضا

ويجب عدم استخدام بكسل كخط الحجم، كما في المثال الخاص بك. بكسل لا طاعة DPI الشاشة. على سبيل المثال على الشاشة، <م> على حد سواء 10px 26px وستكون صغيرة. يجب عليك استخدام "حزب العمال" بدلا من ذلك، أو حتى تبدأ مع 'م.

Answer 3

وجرب:

font-size: 0.7em;

وإليك بعض مزيد من المعلومات: كيفية حجم النص في CSS في قائمة بصرف النظر

Answer 4

<input style="font-size: 70%" class="button" type="submit" value="Go">