عند إنشاء موقع ويب ، من المهم التفكير في اختيار الخطوط المناسبة التي لن يتم دمجها مع التصميم فحسب ، بل تضمن أيضا راحة قراءة المحتوى. ومع ذلك ، قبل تضمين الخطوط على الموقع ، يجدر معرفة طريقة الاتصال الأكثر فعالية وصحة — باستخدام علامة الارتباط أو قاعدة الاستيراد.
الطريقة الأولى والأكثر شيوعا لتضمين الخطوط هي استخدام علامة الارتباط. باستخدام هذه العلامة ، يمكنك توصيل الخطوط من مصادر خارجية ، مثل خطوط جوجل أو الخادم الخاص بك. ميزة هذه الطريقة هي البساطة وسهولة الاستخدام ، فضلا عن القدرة على تعيين خيارات خطوط مختلفة لعناصر الصفحة المختلفة.
ومع ذلك ، في بعض الحالات ، قد يتسبب استخدام علامة الارتباط في حدوث مشكلات في تحميل الخطوط ، خاصة إذا كانت كبيرة. في مثل هذه الحالات ، يجب عليك استخدام قاعدة الاستيراد ، والتي تسمح لك بتعيين الخط كقاعدة نمط كس. لاستخدام هذه القاعدة ، تحتاج إلى إضافتها إلى ملف النمط وتطبيقها على العناصر المطلوبة. تتيح لك طريقة توصيل الخطوط هذه إدارة عملية التحميل بمرونة أكبر وتضمن تحميل الصفحة بشكل أسرع.
نتيجة لذلك ، يعتمد الاختيار الصحيح لكيفية تضمين الخطوط على الموقع على الموقف المحدد ومتطلبات المشروع. كل طريقة لها مزاياها وعيوبها ، والتي يجب أن تؤخذ في الاعتبار عند تصميم موقع على شبكة الإنترنت. الشيء الرئيسي هو أن الخطوط يجب أن تكون قابلة للقراءة ومتناغمة مع تصميم الصفحة ، مما يخلق انطباعا لطيفا للمستخدمين.
- أنواع اتصال الخط على الموقع
- ربط الخطوط عبر أنماط كس
- استخدام علامة الارتباط لتوصيل الخطوط
- إيجابيات وسلبيات استخدام علامة الارتباط
- ربط الخطوط عبر الاستيراد إلى كس
- الطريقة التي من الأفضل أن تختار?
أنواع اتصال الخط على الموقع
هناك طريقتان مختلفتان لتوصيل الخطوط على الموقع:
:
. على سبيل المثال:
، يمكنك تعيين نمط النص باستخدام كس.
:
، يجب تحديد ارتباط إلى ملف الخط داخل ملف كس. على سبيل المثال:
@استيراد رابط ('https://fonts.googleapis.com/css2?family=Roboto:wght@400; 700 & عرض = مبادلة');
، قد تتأخر تنزيلات الخطوط بسبب سلوك حظر المتصفح.
ربط الخطوط عبر أنماط كس
يمكن توصيل الخطوط بموقع ويب باستخدام أنماط كس. تسمح لك الطرق التالية باختيار الطريقة الأنسب لتوصيل الخطوط بموقعك.
- استخدام خاصية وجه الخط: تسمح هذه الخاصية لمطوري الويب بتحديد خطوط مخصصة لاستخدامها على الموقع. للقيام بذلك ، حدد المسار إلى ملف الخط واسم الخط الذي سيتم استخدامه في أنماط كس.
- استخدام الخدمات الخارجية: هناك العديد من الخدمات التي توفر خطوطا للاستخدام على مواقع الويب. في الوقت نفسه ، يحتاج مطور الويب إلى توصيل الخط عن طريق تحديد رمز الارتباط أو الاستيراد باستخدام أنماط كس.
- استخدام مجموعات الخطوط الجاهزة: توفر بعض المكتبات والأنظمة مجموعات خطوط جاهزة يمكن توصيلها بموقعك باستخدام أنماط كس الخاصة.
عند اختيار طريقة اتصال الخط ، يجب أن تأخذ في الاعتبار جودتها وتوافقها مع الأجهزة والمتصفحات المختلفة ، بالإضافة إلى سرعة تحميل الصفحة. من المهم أيضا مراقبة ترخيص استخدام الخطوط وإعداد عرضها بشكل صحيح.
استخدام علامة الارتباط لتوصيل الخطوط
السمات :
- .
- .
- : يحدد المسار إلى ملف ورقة الأنماط الذي يحتوي على قواعد التنسيق ، بما في ذلك تعريف الخط.
لتوصيل الخط:
بعد تحديد المسار إلى ملف ورقة الأنماط الذي يحتوي على قواعد الخط المحدد ، ستدخل التغييرات حيز التنفيذ على صفحة الويب.
من وثيقة أتش تي أم أل.
إيجابيات وسلبيات استخدام علامة الارتباط
- مزايا استخدام علامة الارتباط:
- سرعة تحميل الصفحة: تسمح علامة الارتباط للمتصفح بتحميل الموارد الخارجية ، مثل الخطوط ، إلى جانب بقية محتوى الصفحة بالتوازي ، مما يمكن أن يحسن سرعة التحميل الإجمالية.
- سهولة الاستخدام: علامة الارتباط سهلة الاستخدام وتسمح لك بتحديد عنوان ملف الخط المراد توصيله في سمة هريف. يتيح لك ذلك التحكم بالضبط في الخط الذي سيتم استخدامه على موقعك.
- التوافق عبر المتصفح: علامة الارتباط مدعومة جيدا من قبل جميع المتصفحات الحديثة وتسمح لك بتحقيق التوحيد في عرض الخطوط على الأجهزة والأنظمة الأساسية المختلفة.
- التحقق والتصحيح: عند استخدام علامة الارتباط ، يمكنك بسهولة التحقق من أن الخطوط متصلة بشكل صحيح باستخدام أدوات مطور متصفح الويب.
- عيوب استخدام علامة الارتباط:
- الاعتماد على خادم خارجي: عند استخدام علامة الارتباط ، فأنت تعتمد اعتمادا كليا على توفر وأداء الخادم الخارجي حيث يتم تخزين ملفات الخطوط. إذا كان الخادم غير متوفر أو بطيء الاستجابة ، فقد يتسبب ذلك في تأخير تنزيل الخطوط على موقعك.
- اختيار خط محدود: قد لا تكون بعض الخطوط متاحة للاتصال عبر علامة الارتباط بسبب قيود حقوق النشر أو لأسباب أخرى. في مثل هذه الحالات ، قد تحتاج إلى استخدام طريقة اتصال خط أخرى ، مثل @وجه الخط أو الاستيراد.
- القدرة على منع المحتوى: إذا لم يتمكن المتصفح من تنزيل ملفات الخطوط إلى العنوان المحدد ، فيمكنه حظر عرض محتوى النص حتى تتوفر ملفات الخطوط. نتيجة لذلك ، قد يرى المستخدمون خطوط بديلة أو عرض نص غير صحيح على موقعك.
ربط الخطوط عبر الاستيراد إلى كس
Для начала нужно создать стилевой файл с расширением .css, в котором будет описано правило @font-face для каждого подключаемого шрифта. Например:
@font-face {
font-family: 'Open Sans';
src: url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap') format('woff2');
font-weight: normal;
font-style: normal;
}
هنا يمكنك تحديد اسم الخط (الخط الأسرة) ، معلمات التحميل (سرك) وإعدادات إضافية أخرى ، إذا لزم الأمر. يستخدم هذا المثال الخط بلا مفتوحة ، والتي يتم الحصول عليها من خلال الخطوط جوجل.
بعد ذلك ، تحتاج إلى توصيل ملف كس الذي تم إنشاؤه إلى مستند هتمل. للقيام بذلك ، يمكنك استخدام قاعدة استيراد @داخل العلامة
هنا يمكنك تحديد المسار إلى ملف كس الذي تم إنشاؤه داخل وظيفة استيراد@. في هذه الحالة ، إذا كان الملف في نفس الدليل مثل مستند هتمل ، فقط اسم الملف " الأنماط.المغلق " محدد. إذا كان الملف موجودا في دليل آخر ، فأنت بحاجة إلى تحديد المسار من المجلد الجذر للموقع.