كما تعلمنا في الدرس السابق يوجد صيغ مختلفة للخطوط . كل صيغة تتناسب مع نوع معين من المتصفحات، لهدا سنحاول عند إضافة خط ما أن نضيفه بعدة صيغ حثي يتناسب مع جميع المتصفحات . لاحظ معي الكود التالي:
@font-face {
font-family: 'SuperPolice';
src: url('SuperPolice.eot') format('eot'),
url('SuperPolice.woff') format('woff'),
url('SuperPolice.ttf') format('truetype'),
url('SuperPolice.svg') format('svg');
}
font-family: 'SuperPolice';
src: url('SuperPolice.eot') format('eot'),
url('SuperPolice.woff') format('woff'),
url('SuperPolice.ttf') format('truetype'),
url('SuperPolice.svg') format('svg');
}
هده هي المنهجية، الآن لنجرب بخط ما يمكنك تحميل هذا الخط من هنا للتجربة لأنه متوفر مجانا.
@font-face {
/* نوع خط جديد*/
font-family: 'ArchitectsDaughter';
src: url('ArchitectsDaughter.ttf') format('truetype');
}
h1
/* تطبيق الخط*/
{
font-family:'ArchitectsDaughter', Arial, serif;
}
/* نوع خط جديد*/
font-family: 'ArchitectsDaughter';
src: url('ArchitectsDaughter.ttf') format('truetype');
}
h1
/* تطبيق الخط*/
{
font-family:'ArchitectsDaughter', Arial, serif;
}
وهكدا ستضهر النتيجة لكن عليك كتابة العنوان بحروف أجنبية لأن الخط ليس عربي.
.png)
@font-face هي التي مكنتنا من إدراج خط جديد.
font-family أعطيناها إسمArchitectsDaughter و نفس الإسم وضعناه في css الخاص ب
كي يتم التعديل عليه.
بعد رفع الضغط على الملف الدي حملناه يجب وضع الخط في نفس ملف css .
و بهذا نكون قد إنتهينا من درس الخطوط . لأي سؤال أو إستفسار لا تتردد في وضعه في تعليقك.
ليست هناك تعليقات:
إرسال تعليق