السلام عليكم ، اهلاً بكم في مكتبة المصمم العربي دوزاينز في موضوع اليوم عن الخطوط الأفضل علي الإطلاق لتصميم مواقع الويب والواجهات ' UI/UX ' هو خط عربي ويدعم الإنجليزيه بنفس الأسلوب الجميل للخط .
الخط حصري جدا لمدونة دوزاينز وليس متواجد علي أي مدونة اُخري سوى مدونة الأثير .
خط سير المقال
- عن الخط
- معاينة الخط
- تركيب الخط علي موقعك
عن الخطهو خط تايبوجرافي جميل جدا ، يليق علي اي تصميم سواء موقع ويب ، تصميم كتابي ، لوجو .. بالنسبة إلى هذا افضل خط عربي متواجد علي الانترنت .
معاينة الخط
كما ترى الخط اسلوبة جميل جدا و الثنيات بين الحروف والنقاط والخطوط هو امر رائع جدا وبالطبع جميعنا نعرف الفرق بين موقع بخط جميل وموقع اخر بخط لا يدعم الخط الرئيسي للمدونة ، ستكون تجربة استخدام سيئة جداً
تركيب الخط علي موقعك
الخط عبارة عن كود CSS تقوم بتضمينه لموقعك ولتركيب الخط اتبع الآتي ..
- توجه لمكان تعديلك علي اكواد القالب .. أياً كان
ثم ابحث عن المكان الذي تُوضع فيه اكواد CSS وأضف كود الخط
CSS
/* arabic font by blog.itheric.com */
@font-face{font-family:'CaremFont';font-style:normal;font-weight:400;font-weight:500;src:local('Careem'),local('Careem-Light'),url(https://cdn.jsdelivr.net/gh/MohammadQt/font-itheric@master/Careem-Light.woff2) format('woff');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}@font-face{font-family:'CaremFont';font-style:normal;font-weight:600;src:local('Careem'),local('Careem-Regular'),url(https://cdn.jsdelivr.net/gh/MohammadQt/font-itheric@master/Careem-Regular.woff2) format('woff');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}@font-face{font-family:'CaremFont';font-style:normal;font-weight:400;font-weight:500;src:local('Careem'),local('Careem-Light'),url(https://cdn.jsdelivr.net/gh/MohammadQt/font-itheric@master/Careem-Light.woff2) format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'CaremFont';font-style:normal;font-weight:600;src:local('Careem'),local('Careem-Regular'),url(https://cdn.jsdelivr.net/gh/MohammadQt/font-itheric@master/Careem-Regular.woff2) format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'CaremFont';font-style:normal;font-weight:700;font-weight:Bold;src:local('Careem'),local('Careem-MEDIUM'),url(https://cdn.jsdelivr.net/gh/MohammadQt/font-itheric@master/Careem-Bold.woff2) format('woff');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}@font-face{font-family:'CaremFont';font-style:normal;font-weight:700;font-weight:Bold;src:local('Careem'),local('Careem-MEDIUM'),url(https://cdn.jsdelivr.net/gh/MohammadQt/font-itheric@master/Careem-Bold.woff2) format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
لنفرض انك لم تجد مكان CSS لتضع الخطوط قم بوضع الكود التالي أسفل <head>
CSS
<style>
/* arabic font by blog.itheric.com */
@font-face{font-family:'CaremFont';font-style:normal;font-weight:400;font-weight:500;src:local('Careem'),local('Careem-Light'),url(https://cdn.jsdelivr.net/gh/MohammadQt/font-itheric@master/Careem-Light.woff2) format('woff');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}@font-face{font-family:'CaremFont';font-style:normal;font-weight:600;src:local('Careem'),local('Careem-Regular'),url(https://cdn.jsdelivr.net/gh/MohammadQt/font-itheric@master/Careem-Regular.woff2) format('woff');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}@font-face{font-family:'CaremFont';font-style:normal;font-weight:400;font-weight:500;src:local('Careem'),local('Careem-Light'),url(https://cdn.jsdelivr.net/gh/MohammadQt/font-itheric@master/Careem-Light.woff2) format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'CaremFont';font-style:normal;font-weight:600;src:local('Careem'),local('Careem-Regular'),url(https://cdn.jsdelivr.net/gh/MohammadQt/font-itheric@master/Careem-Regular.woff2) format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'CaremFont';font-style:normal;font-weight:700;font-weight:Bold;src:local('Careem'),local('Careem-MEDIUM'),url(https://cdn.jsdelivr.net/gh/MohammadQt/font-itheric@master/Careem-Bold.woff2) format('woff');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}@font-face{font-family:'CaremFont';font-style:normal;font-weight:700;font-weight:Bold;src:local('Careem'),local('Careem-MEDIUM'),url(https://cdn.jsdelivr.net/gh/MohammadQt/font-itheric@master/Careem-Bold.woff2) format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
</style>
ولتطبيق الخط علي كل النصوص ف الموقع مرة واحده أضف الكود التالي اسفل اكواد الخط
CSS* {
Font-family: CaremFont;
}والي هنا مبروك عليك الخط ، اذا اعجبك الخط لا تنسى ان تشاهد مزيد موقعنا فنحن ننوى لعمل اقوي مكتبة للمصمين العربيين .. شكرا
No comments:
Post a Comment