تلعب الخطوط دورا مهما في تصميم موقع الويب. يمكنهم المساعدة في إنشاء أسلوب فريد وتعزيز الانطباع البصري. ومع ذلك ، في بعض الأحيان لا تفي الخطوط القياسية بمتطلبات المشروع. في مثل هذه الحالات ، يمكنك استخدام تقنية اتصال الخط عبر خاصية وجه الخط.
الخط الوجه يسمح لك لاستخدام الخطوط المخصصة على صفحة ويب عن طريق تحميل الخطوط من الخادم. نتيجة لذلك ، سيتم عرض النص بالخط المحدد ، حتى إذا لم يكن مثبتا على جهاز الكمبيوتر الخاص بالمستخدم.
أولا ، تحتاج إلى تنزيل ملفات الخطوط بالتنسيق الذي نحتاجه (عادة هذا .ووف,.2,.صندوق النقد الدولي أو .أوتف). بعد ذلك ، يجب تحميل هذه الملفات إلى الخادم ، بعد إنشاء مجلد منفصل لها مسبقا في دليل المشروع.
ملاحظة: من المهم التحقق من اتفاقية ترخيص الخط للتأكد من السماح باستخدامه على صفحة الويب.
- اختيار الخط المناسب
- تنزيل خط
- وضع الخط على الخادم
- إنشاء ملف كس للخط
- توصيل خط عبر ملف كس
- التحقق من عملية الخط على صفحة ويب
اختيار الخط المناسب
عند اختيار الخط ، يجب مراعاة العوامل التالية:
1. موضوع الموقع والغرض منه: يجب أن يتطابق الخط مع السمة وأن ينقل الحالة المزاجية المقصودة. على سبيل المثال ، الخطوط الكلاسيكية والمحايدة مناسبة لمواقع الويب التجارية ، ويمكن استخدام المزيد من الخطوط التجريبية للمشاريع الإبداعية.
2. سهولة القراءة: يجب أن يكون الخط سهل القراءة حتى مع حجم خط صغير. انتبه إلى شكل الحروف والفترات الفاصلة بينها ووجود الحروف المركبة (مجموعات خاصة من الحروف).
3. متوافق مع الأجهزة المختلفة: إذا أمكن ، اختر الخطوط التي تعرض جيدا على الأجهزة وأنظمة التشغيل المختلفة. قد يتم عرض بعض الخطوط بشكل مختلف في متصفحات مختلفة أو قد لا يتم دعمها على بعض الأجهزة ، لذا فإن الأمر يستحق المراجعة.
4. عدد الخطوط: قد يكون الكثير من الخطوط المختلفة على الصفحة مربكا ويزيد من سوء إدراك المحتوى. اختر 2-3 عائلات خطوط (على سبيل المثال ، للعناوين والنص الأساسي) والتزم بها.
5. الترخيص: انتبه إلى نوع ترخيص الخط الذي يمكنك استخدامه على موقع الويب. تتطلب بعض الخطوط ترخيصا مدفوعا أو تفرض قيودا على الاستخدام في المشاريع التجارية.
تذكر أن اختيار الخط الصحيح يساعد في إنشاء نمط موحد ويكمل تصميم موقع الويب. لا تخف من التجربة ، ولكن ضع في اعتبارك أيضا متطلبات سهولة القراءة والتوافق مع جميع الأجهزة بحيث يكون المحتوى الخاص بك متاحا وجذابا لجميع المستخدمين.
تنزيل خط
لتنزيل خط من المورد ، تحتاج إلى:
- افتح موقع ويب يوفر خطوطا للتنزيل.
- ابحث عن الخط الذي تحتاجه من خلال البحث عن الأقسام أو تصفحها.
- انقر فوق الزر" تنزيل " أو زر آخر مشابه لتنزيل الخط.
بعد ذلك ، سوف تتلقى ملف الخط ، والتي يمكن أن تكون في أشكال مختلفة مثل تف ، أوتف ، وف وغيرها. انتبه إلى تنسيق الملف ، حيث قد يكون مطلوبا توصيل الخط بشكل صحيح.
يمكن أن يحتوي دليل الخطوط الذي تم تنزيله على عدة ملفات ، بما في ذلك خيارات الخطوط المختلفة مثل الخط الغامق أو المائل. حدد الملفات الضرورية لاستخدامها في مشروعك.
وضع الخط على الخادم
، من الضروري وضع ملفات الخطوط على الخادم. للقيام بذلك ، ستحتاج إلى إنشاء دليل على الخادم حيث سيتم تحميل ملفات الخطوط.
من الضروري تحميل الملفات بجميع التنسيقات المدعومة إلى الدليل الذي تم إنشاؤه على الخادم.
لخوادم أباتشي.
عند وضع الخطوط على الخادم ، من المهم الانتباه إلى أمنها. قد يتم تحميل الخطوط من الخادم إلى مواقع أخرى ، مما قد يؤدي إلى تسرب المعلومات وانتهاك اتفاقيات الترخيص. لذلك ، يوصى باستخدام إرشادات إضافية لحماية الخطوط من الاستخدام غير المصرح به.
.
إنشاء ملف كس للخط
لتوصيل الخطوط عبر كس ، تحتاج إلى إنشاء ملف كس منفصل يصف قواعد استخدام الخطوط المحددة على الموقع. يحدد هذا الملف المسارات إلى ملفات الخطوط ، ويقوم أيضا بضبط أنماط النص لكل خط.
1. إنشاء ملف جديد مع .تمديد المغلق. على سبيل المثال ، الخط.المغلق.
2. Откройте созданный файл в текстовом редакторе.
3. Добавьте правила для использования шрифтов. Ниже приведен пример CSS-кода для подключения шрифтов:
@font-face {
font-family: 'Название';
src: url('путь_к_файлу.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.body-text {
font-family: 'Название', sans-serif;
font-size: 16px;
line-height: 1.5;
}
.heading {
font-family: 'Название', serif;
- font-size: 24px;
- font-weight: جريئة;
- }
المغلق رمز فك التشفير:
@الخط الوجه هو قاعدة لوصف الخط ومسارات الملفات الخاصة به.
- وزن الخط-سمنة الخط (عادي ، غامق ، أخف ، أكثر جرأة ، إلخ.).
نمط الخط - نمط الخط (عادي ، مائل ، مائل).
بعد وصف @الخط الوجه ، تمت إضافة أمثلة على الأنماط التي تحدد استخدام الخطوط باسم معين.
4. تغيير ' اسم 'إلى اسم الخط المطلوب و' المسار إلى الملف.الصناديق ' إلى المسار إلى ملف الخط. على سبيل المثال:
سرك: ورل('الخطوط/أوبنسان-العادية.تف') شكل ('تروتايب');
الخط الوزن: عادي;
نمط الخط: عادي;
| } | |
| 5. احفظ الملف. | الآن ملف كس مع وصف الخط جاهز للاستخدام. كل ما تبقى هو توصيله بمستند هتمل باستخدام علامة. |
| توصيل خط عبر ملف كس | لتوصيل خط عبر ملف كس ، يجب اتباع الخطوات التالية: |
حدد الخط المطلوب وقم بتحميله على خادم الويب الخاص بك.
- @الخط الوجه {
- الخط الأسرة: 'فونتنام';
سرك: ورل ('رابط الخط');