كيف يمكنك تحديد أحجام الخط في CSS بحيث أنها تطابق نماذج بالأحجام الطبيعية والسماح تغيير حجم؟
https://stackoverflow.com/questions/213128
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
ونحن الوقوع في مشاكل مع كيفية تحديد أحجام الخطوط. إذا كان لنا أن تحديد أحجام الخط باستخدام حزب العمال، فإنها لا تبدو دائما نفس عبر المتصفحات / المنصات. إذا كان لنا أن تحديد أحجام الخط باستخدام بكسل، يمكن للمستخدمين IE6 لا تغيير حجم النص.
المحلول
مقال عن قائمة بصرف النظر (نوفمبر 2007) استكشاف هذا في العمق في مختلف المتصفحات واختتم:
<اقتباس فقرة>وكان أظهرت تحجيم النص وخط الطول في نظم الإدارة البيئية، مع نسبة مئوية محددة في الجسم (والتحذير اختياري لسفاري 2)، لتوفير معلومات دقيقة والنصوص يمكن تغيير حجم في جميع المتصفحات في الاستعمال الشائع اليوم. هذا هو أسلوب يمكنك وضعها في حقيبة عدتك واستخدام ذلك أفضل الممارسات لتحديد حجم النص في CSS الذي يرضي كلا المصممين والقراء.
لقطات الشاشة لكيفية هذه التقنية تبدو في المتصفحات الأكثر شعبية. هنا هو رمز كانوا:
<style type="text/css">`
body {
font-size:100%;
line-height:1.125em;
}
.bodytext p {
font-size:0.875em;
}
.sidenote {
font-size:0.75em;
}
</style>
<!--[if !IE]>-->
<style type="text/css">
body {
font-size:16px;
}
</style>
<!--<[endif]-->
نصائح أخرى
وعلى عكس ما قد أجاب الآخرين، يجب أن لا تستخدم أي وقت مضى بكسل لأحجام الخط. إنترنت إكسبلورر 6 لا يزال لديه قطعة كبيرة من الكعكة سوق المتصفحات وقطعا لن تغيير حجم النص الذي تم تحديده مع حجم بكسل (كما ذكر في السؤال). يجب أن نسعى جاهدين دائما لاستخدام "م" ليالي.
ويمكنني استخدام تقنية مشابهة لما اقترح آخرون هنا حيث أنا "إعادة تعيين" أنماط المغلق في جميع المجالات لإزالة أي تضارب المتصفح مع تحجيم الخط وتحديد المواقع. أحب إعادة تعيين اريك ماير إعادة تحميل أساليب كقاعدة. هل يمكن أيضا استخدام إعادة ياهو طريقة المغلق إذا أراد أن يحفر إلى أن مكتبة كاملة.
وبعد ذلك، يمكنني استخدام أوين بريغز "عاقل المغلق الطباعة قالب . قد تلاحظ أنه لم يتم تحديثه منذ عام 2003 لكنها لا تزال صلبة تماما مع المتصفحات اليوم.
وبمجرد الحصول على هذه القاعدة، انها مسألة بسيطة من تغيير نسبة الخط على علامة <body> التي من شأنها بسهولة حجم كل الخطوط عبر موقع الويب الخاص بك بنفس الطريقة.
وللالصبر، وهنا المغلق إعادة تعيين اريك ماير وأوين بريغز "المهروسة الطباعة المغلق معا (تحليل من خلال <لأ href =" http://floele.flyspray.org/csstidy//css_optimiser.php "يختلط =" نوفولو noreferrer "> هذا ممتاز المغلق المنسق ):
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;}
:focus{outline:0;}
body{line-height:1;font-family:verdana, arial, helvetica, sans-serif;font-size:76%;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:400;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
a{text-decoration:none;font-weight:700;color:#000;}
a:hover{text-decoration:underline;}
h1{font-size:2em;font-weight:400;margin-top:0;margin-bottom:0;}
h2{font-size:1.7em;font-weight:400;margin:1.2em 0;}
h3{font-size:1.4em;font-weight:400;margin:1.2em 0;}
h4{font-size:1.2em;font-weight:700;margin:1.2em 0;}
h5{font-size:1em;font-weight:700;margin:1.2em 0;}
h6{font-size:.8em;font-weight:700;margin:1.2em 0;}
img{border:0;}
ol,ul,li{font-size:1em;line-height:1.8em;margin-top:.2em;margin-bottom:.1em;}
p{font-size:1em;line-height:1.8em;margin:1.2em 0;}
li > p{margin-top:.2em;}
pre{font-family:monospace;font-size:1em;}
strong,b{font-weight:700;}
ويجب عليك دائما استخدام وحدات النسبية لحجم الخط، مثل م.
وقال ذلك، كنت أبدا للحصول على تحجيم الخط بكسل الكمال، على خاصة إذا كنت تحاول تطابق نموذج بالحجم الطبيعي رسومية، ولكن حتى مجرد متصفح لمتصفح، الأمور سوف تختلف في تقديم النص.
وأنت تسير دائما لدينا مشكلة مطابقة نماذج بالأحجام الطبيعية إلا إذا كنت تستخدم بكسل. http://www.456bereastreet.com/archive/200602/setting_font_size_in_pixels/ < br> و أنا لا أشعر أن هناك شيئا خطأ ولا سيما مع استخدام بكسل لصفحات الويب الخاصة بك. وخاصة منذ ما يقرب من جميع المتصفحات الحديثة - باستثناء بكت - استخدام التكبير في مقابل النص تغيير الحجم بشكل افتراضي.
ما زلت قد التمسك ما يشير ناثان لأنها تسمح لك أكثر تصميم وخفة الحركة، كما يمكنك نطاق أحجام الخطوط في الموقع بأكمله بسرعة عن طريق تغيير واحد منهم فقط. ولكن إذا كنت كسولا أو تريد حقا بقعة على، ثم لم يكن لديك لكنهم يخشون من بكسل.
