تحديد سلسلة من عائلات الخطوط باستخدام خاصية Font-Family للعميل

بناء جملة الخاصية الخط - عائلة

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

يتضمن نمط الأبتك الأسهل الأبسط الذي يمكنك استخدامه عائلة عائلة واحدة فقط:

ص {font-family: Arial؛ }

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

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

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

فصل عدة أسطر الخط مع فاصلة في الخط

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

font-family: Pussycat، Algerian، Broadway؛

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

استخدم Generic Fonts Last

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

يجب دائمًا إنهاء قائمة الخطوط (حتى إذا كانت قائمة عائلة واحدة أو الخطوط الآمنة للويب فقط) باستخدام خط عام. هناك خمسة يمكنك استخدامها:

قد يتم تغيير المثالين أعلاه إلى:

font-family: Arial، sans-serif؛ font-family: الهرة ، الجزائري ، برودواي ، الخيال ؛

بعض أسماء العائلة الخطية هي عبارة عن اثنين أو أكثر من الكلمات

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

font-family: "Times New Roman"، serif؛

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

المقالة الأصلية لجنيفر كرينين. تم التعديل في 12/2/16 بواسطة جيريمي جيرار