تلعب الخطوط دورا مهما في تصميم صفحة الويب ويمكن أن تؤثر بشكل كبير على مظهرها وشعورها. ربط الخطوط هي واحدة من الخطوات الرئيسية في إنشاء بنية نمط باستخدام منهجية تعديل عنصر كتلة (بيم). يتيح لك الاتصال الصحيح للخطوط جعل صفحتك أكثر قابلية للقراءة ومعبرة وفريدة من نوعها.
أساس توصيل الخطوط بواسطة بيم هو استخدام خصائص كس الصحيحة وأسماء الفئات الصحيحة. ومع ذلك ، هناك العديد من التوصيات المهمة التي يجب اتباعها عند العمل مع الخطوط. أولا ، تحتاج إلى تحديد الخطوط التي سيتم استخدامها على موقعك بوضوح. اختر الخطوط التي تتناسب مع الجو العام للموقع والمهام التي يحلها.
لا تستخدم الكثير من الخطوط المختلفة في نفس الصفحة ، فقد يؤدي ذلك إلى إدراك بصري فوضوي وغامض.
بعد تحديد الخطوط ، تحتاج إلى توصيلها بشكل صحيح بمشروعك. للقيام بذلك ، استخدم قواعد كس الخاصة مثل @الخط الوجه. تسمح لك بتنزيل الخطوط من مصادر خارجية أو من دليل محلي. من المهم أن تتذكر أنه عند توصيل الخطوط من مصادر خارجية ، من الضروري التحقق من توفرها وسلامة الروابط على الخوادم.
أخيرا ، لا تنس تحديد قواعد التصميم للعناصر المختلفة لصفحة الويب الخاصة بك. استخدام الطبقات بيم ومعدلات لهيكلة رمز كس بطريقة واضحة ومنطقية. سيساعدك هذا الأسلوب في الحفاظ على الشفرة نظيفة ومرتبة ، بالإضافة إلى تسهيل المزيد من العمل مع الخطوط المتصلة.
- كيفية توصيل الخطوط باستخدام بيم: المبادئ والتعليمات الأساسية
- الخطوة 1: اختيار الخطوط المناسبة للمشروع
- الخطوة 2: تنزيل الخطوط وتثبيتها على الخادم
- الخطوة 3: إنشاء بنية كتلة الخط بيم
- الخطوة 4: ربط الخطوط باستخدام الأنماط و @وجه الخط
كيفية توصيل الخطوط باستخدام بيم: المبادئ والتعليمات الأساسية
ويستند اتصال الخطوط في مشروع بيم (كتلة ، عنصر ، معدل) على مبدأ الفصل بين المسؤولية والنمطية. هذا يسمح لك بتبسيط وتحسين إدارة الخطوط بشكل كبير.
الخطوات الأساسية لربط الخطوط في مشروع بيم:
| خطوة | الوصف |
|---|---|
| الخطوة 1 | اختيار وتنزيل الخطوط بتنسيقات.ووف و .2 |
| الخطوة 2 | تحديد هيكل نظام الملفات |
| الخطوة 3 | إنشاء كتلة للخطوط في ملف نمط |
| الخطوة 4 | تعيين المسارات الصحيحة لملفات الخطوط في أنماط الكتلة |
| الخطوة 5 | استخدام كتلة الخط التي تم إنشاؤها في الكتل والعناصر الضرورية |
تعليمات مفصلة لكل خطوة:
الخطوة 1: حدد الخطوط وتنزيلها بتنسيقات.ووف و .2
أولا ، تحتاج إلى تحديد الخطوط الضرورية وتنزيلها بتنسيقات.ووف و .2. في هذه التنسيقات ، سيكون للخطوط حجم مضغوط ودعم جيد من قبل متصفحات الويب.
الخطوة 2: تحديد بنية نظام الملفات
.
الخطوة 3: إنشاء كتلة للخطوط في ملف نمط
أو اسم آخر مناسب ، ويجب أن يكون له الهيكل المناسب. فمثلا:.الخطوط { }
الخطوة 4: تعيين المسارات الصحيحة لملفات الخطوط في أنماط الكتلة
داخل الكتلة
@font-face {
Шаг 5: Использование созданного блока шрифтов в нужных блоках и элементах
لاستخدام الخطوط في الكتل والعناصر الضرورية ، تحتاج إلى إضافة فئة كتلة الخط إليها. على سبيل المثال:
. بلدي كتلة {
بعد هذه التعليمات البسيطة ، سوف تكون قادرة على كفاءة وسهولة الاتصال واستخدام الخطوط في مشاريع بيم.
الخطوة 1: اختيار الخطوط المناسبة للمشروع
قبل اختيار الخطوط ، من المهم مراعاة تفاصيل المشروع وأسلوبه والجمهور المستهدف. على سبيل المثال ، بالنسبة لموقع الشركة الذي يستهدف الأطفال ، فإن الخطوط الأكثر مرحا واسترخاء مناسبة ، بينما بالنسبة لمواقع الأعمال الجادة ، من الأفضل اختيار خطوط أكثر كلاسيكية واحترافية.
تتمثل الطريقة الشائعة عند اختيار الخطوط في استخدام مجموعة من الخطوط تتكون من خط رئيسي والعديد من الخطوط المساعدة. يستخدم الخط الرئيسي عادة للعناوين والنص الرئيسي ، بينما يمكن استخدام الخطوط المساعدة للهجات أو العناوين الفرعية.
عامل مهم آخر هو توافر الخطوط. قد لا تتوفر بعض الخطوط لبعض الأجهزة أو المتصفحات. عند اختيار الخطوط ، يوصى باستخدام خطوط الويب التي يمكن تحميلها مباشرة إلى الخادم واستخدامها بواسطة صفحة الويب.
بعد تحديد الخطوط المناسبة ، تحتاج إلى التحقق من توافقها مع الأجهزة المستهدفة والمتصفحات. سيساعد التحقق من الأجهزة والمتصفحات المختلفة في التأكد من عرض الخطوط المحددة بشكل صحيح وتبدو جيدة على الأنظمة الأساسية المختلفة.
الخطوة 2: تنزيل الخطوط وتثبيتها على الخادم
بمجرد تحديد الخطوط المناسبة لمشروعك ، فإن الخطوة التالية هي تنزيلها وتثبيتها على الخادم الخاص بك.
عادة ما يتم توفير الخطوط بأحد التنسيقات التالية: تروتايب (.تف) ، أوبن (.أوتف) ، تنسيق الخط المفتوح على شبكة الإنترنت (.وف) أو تنسيق الخط المفتوح على شبكة الإنترنت 2 (.2). يمكن تقديم خط واحد بعدة تنسيقات ، مما يسمح بدعمه في متصفحات وأجهزة مختلفة.
لتنزيل الخطوط الضرورية ، ستحتاج إلى العثور على مستودع الويب الخاص بهم أو الموقع الرسمي للمطور ، حيث يتم تقديمها للتنزيل مجانا أو مقابل رسوم.
بعد تنزيل ملفات الخطوط ، يجب وضعها على الخادم الخاص بك ، في دليل مخصص لذلك. كقاعدة عامة ، يوصى بإنشاء مجلد منفصل للخطوط داخل مجلد المشروع الخاص بك.
الآن بعد أن الخطوط موجودة فعليا على الخادم ، يمكنك البدء في ربطها في ملف كس الخاص بك لاستخدامها في المشروع الخاص بك.
الخطوة 3: إنشاء بنية كتلة خط بيم
من أجل الاتصال بشكل صحيح واستخدام الخطوط وفقا لمنهجية بيم ، فمن الضروري إنشاء بنية كتلة الخط. هذا سيجعل من السهل تنظيم وتوصيل خطوط مختلفة في المشروع.
يجب أن تكون بنية كتلة الخط كما يلي:
الخطوط/
- _اسم الخط/
تسمح لك هذه البنية بتنظيم ملفات الخطوط بشكل صحيح ، كما تسهل عملية توصيل الخطوط في ملف هتمل.
الخطوة 4: ربط الخطوط باستخدام الأنماط و @وجه الخط
من أجل توصيل الخطوط إلى مشروع بيم ، يمكننا استخدام بناء الجملة كس خاص @الخط الوجه. تسمح لك هذه القاعدة بتعيين الخطوط الخاصة بك لاستخدامها على صفحة الويب.
أولا ، تحتاج إلى تحميل ملفات الخطوط إلى خادم المشروع. عادة ما يتم تقديم الخطوط بتنسيقات مختلفة (على سبيل المثال،.ووف,.2,.الصناديق) بحيث تكون متاحة لمتصفحات مختلفة. يمكن وضع ملفات الخطوط في مجلد المشروع ، على سبيل المثال ، في مجلد الخطوط.
ثم ، نقوم بإنشاء وتوصيل أنماط ملف كس باستخدام العلامة
في ملف كس نفسه ، نستخدم قاعدة @الخط الوجه. نقوم بإنشاء قاعدة منفصلة لكل تنسيق خط. داخل القاعدة ، حدد معرف الخط ورابط إلى ملفه:
@الخط الوجه {}
/ * مثال */@الخط الوجه {
عائلة الخط: "روبوتو";