[CSS] الخط الاضافي المخصص لموقعك - مشاكل وحلول

[المظفر بالله]

`بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

اعزائي المسلوفين او المسولفجية

الصحيح وجدت شيء بسيط احتجته اليوم, لكن تعلمه لم يكن بتلك السهولة خصوصا مع تعدد المتصفحات, وهو مسألة الخط الاضافي لموقعك.

لعل المشكلة الرئيسية في تصميم المواقع هي الخطوط, فالغالب يلجأ لإستخدام الخطوط الافتراضية التي في العادة تكون موجودة في الانظمة مسبقاً, ويقرأها المتصفح بدون مشكلة.

لكن ماذا لأسباب جمالية احتاج لخط مخصص, غير افتراضي, ليس شرطاً أن يوجد في جهاز المستخدم.

الصحيح الامر سهل وهو باستخدام CSS مخصص من خلال @font-face, لكن الامر ليس بتلك السهولة.

دعنا نتعرف على الجزء البسيط من تعريف الخط الجديد:

1. ببساطة حمل خط بصيغة ttf وكمثال ارفقت ملف هنا في المرفقات.
2. ثم افتح صفحة فارغة html وقم بتعريف الستايل بهذا الشكل.

@font-face {
    font-family: 'HacenTunisia';
    src:  url('HacenTunisia.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

مع ملاحظة أن font-family تستطيع أن تعرفه كما تشاء, أي بأي اسم تريده, و src يحتوي رابط الخط على السيرفر لديك.

وجرب الان هذا الخط الجديد, ليكن مثلا مع div

<div style="font-family: HacenTunisia">بسم الله الرحمن الرحيم</div>

الان انظر للناتج على المتصفحات المشهورة, بالنسبة لي جربت على فايرفوكس وانترنت اكسبلورر وكروم, كان الناتج يطبق فقط على الفايرفوكس

حسنا ما الحل, الحل ببساطة هو توليد مجموعة خطوط متنوعة لمختلف المتصفحات, فمثلا متصفح انترنت اكسبلورر لا يتقبل الا ملف خط من نوع eot واما فايرفوكس فلا يتعرف على هذا الامتداد

الصحيح أني جلبت لكم اداة ممتاز لعمل هذا, وهي على الرابط التالي :

( رابط ) ( رابط ) http://www.fontsquirrel.com/fontface/generator

اولاً اختر الملف الذي تريد التحويل منه وهو الذي قمت بتنزيله من هنا قبل قليل, من خلال زر Add fonts
ثانيا ثم باختيار Expert , سيظهر لك عدة خيارات لكن من هذه الخيارات نحتاج تغيير Subsetting و CSS Formats ..
والاهم هو Subsetting, غيرها الى No Subsetting .
اما CSS Formats فغيرها الى Bulletproof (Original) ...

ثالثا سيكون امامك زر Download YourKit اضغط عليه وسينزل لديك ملف مضغوط فك الضغط عنه وستجد عدة ملفات, قم بنسخ ملفات الخط الى المسار الذي تريده, وافتح ملف الـ stylesheet.css ستجد الكود الخاص بالـ font-face جاهز امامك, اجري التعديلات التي تريدها, مثلا مسار الخطوط, و اسم الخط المخصص الجديد, مثلاً, سيكون الناتج للـFont-face هو كالتالي:

@font-face {
    font-family: 'HacenTunisia';
    src: url('hacentunisia-webfont.eot');
    src: local('Hacen Tunisia'), local('HacenTunisia'), url('hacentunisia-webfont.woff') format('woff'), url('hacentunisia-webfont.ttf') format('truetype'), url('hacentunisia-webfont.svg#webfont01d4aYpI') format('svg');
    font-weight: normal;
    font-style: normal;
}

استخدمه :

<div style="font-family: HacenTunisia">بسم الله الرحمن الرحيم</div>

وارى الناتج على المتصفحات.

هنا بالنسبة لي ظهرت لي مشكلة على الانترنت اكسبلورر, فكان لدي الحروف مقطعة , طبعا انا اقصد هنا العربية, اما الخطوط الاجنبية فلا اعرف ان وجدت او لا , لكن الاغلب لن يكون هنالك مشكلة !!!

بسيطة, الحل كالتالي:
1. اذهب للرابط التالي : ( رابط ) ( رابط ) http://www.kirsle.net/wizards/ttf2eot.cgi
ومنه حدد الملف الاصلي, ثم اضغط زر التحويل
سيظهر لك مكان الزر رابط باسم الملف الجديد واسمه يطابق اسم الملف الاصلي عدا الامتداد سيتغير, نزله وضعه في نفس مسار ملفات الخطوط الاخرى.

2. الان نذهب لكود الـ CSS ونجري عليه بعض التعديلات, بحيث تعيد تعريف الخط من نوع ttf للخط الاصلي, و ملف الـ eot للذي قمنا بتوليده من جديد وذلك بالشكل التالي (لاحظ الملفين ttf و eot في الكود) :

@font-face {
    font-family: 'HacenTunisia';
    src: url('HacenTunisia.eot');
    src: local('Hacen Tunisia'), local('HacenTunisia'), url('hacentunisia-webfont.woff') format('woff'), url('HacenTunisia.ttf') format('truetype'), url('hacentunisia-webfont.svg#webfont01d4aYpI') format('svg');
    font-weight: normal;
    font-style: normal;
}

احفظ التغييرات وستجد إن شاء الله ان الامور اصبحت جيدة.

ملاحظاتي الاخيرة:
1. لا اعرف ان كانت المشكلة هي بنوع معين من الملفات ام هي مشكلة عامة للملفات التي تحتوي الخط العربي.
2. لم اجرب المتصفحات Opera و Safari فلربما واجهت هذه المتصفحات نفس المشكلة, اقصد مسألة تقطع الحروف, ان حدثت فالمشكلة ربما بخطأ بتحويل باق يالملفات, اقصد SVG و WOFF.
3. الموضوع كتبته على عجالة, فإن كان هنالك خطأ ما او نقطة غير واضحة ارجوا ذكرها.


والحمد لله رب العالمين

[حمايه]

عمل رائع
جزاك الله كل خير يا المظفر بالله

و هناك ايضا طريقة اخرى عن طريق خطوط الويب في جوجل

http://code.google.com/webfonts

تستطيع تغير شكل الخط بكل سهوله على سبيل المثال

هذا الخط مثلا
http://code.google.com/webfonts/family?family=Lobster

طريقة استخدامه انك تقوم بإستيراد الخط وهنا طريقتين
الاولى تقوم بوضع كود بين وسم <head>
وهو

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> 

والثانيه ان تقوم بإستيراده عن طريق الـ css بإستخدام @import بوضع هذا الكود في بداية كود الـ css

@import url(http://fonts.googleapis.com/css?family=Lobster); 

وبعد ذلك تقوم بإستخدام الخط في الـ css بشكل طبيعي كالتالي

h1 { font-family: 'Lobster', arial, serif; } 

مشكلة هذه الطريقة ان جوجل الي الأن لم تقوم بتوفير خطوط عربيه
لذلك كل الشكر للأخ المظفر على طريقته و محاولاته

[المظفر بالله]

عمل رائع
جزاك الله كل خير يا المظفر بالله

و هناك ايضا طريقة اخرى عن طريق خطوط الويب في جوجل

http://code.google.com/webfonts

تستطيع تغير شكل الخط بكل سهوله على سبيل المثال

هذا الخط مثلا
http://code.google.com/webfonts/family?family=Lobster

طريقة استخدامه انك تقوم بإستيراد الخط وهنا طريقتين
الاولى تقوم بوضع كود بين وسم <head>
وهو

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> 

والثانيه ان تقوم بإستيراده عن طريق الـ css بإستخدام @import بوضع هذا الكود في بداية كود الـ css

@import url(http://fonts.googleapis.com/css?family=Lobster); 

وبعد ذلك تقوم بإستخدام الخط في الـ css بشكل طبيعي كالتالي

h1 { font-family: 'Lobster', arial, serif; } 

مشكلة هذه الطريقة ان جوجل الي الأن لم تقوم بتوفير خطوط عربيه
لذلك كل الشكر للأخ المظفر على طريقته و محاولاته

الله يعطيك العافية اخي وبارك الله فيك على الاضافة الطيبة

الصحيح اخي للخطوط الانجليزية تكاد هذه الطرق لا تواجه مشاكل مثلما تواجهها الخطوط العربية, هذا ما جعلني اليوم اكثر من ساعتين وانا احاول حل هذه المشكلة وبعد حلها احببت ان اشارككم بها للفائدة.

حياك الله

[وضاء]

بارك الله فيك يالمظفر عمل رائع و انا ابحث عن الخطوط سقطت في موضوعك عن طريق قوقل =)

[Owaisweb]

شرحت , كفيت ووفيت الله يخليك

[majado2]

الف شكراً ..

هذ1 ما كنت ابحث عنه ..

[الفريد]

مشروع الخط الأميري http://amiri.sourceforge.net

خط عربي مجاني يستحق التجربة

[amaiko]

سبحان الله انا ايضا استخدم هذا التكنيك للتعامل مع الخطوط العربية
شاهد بنفسك اخر موقع اعمل عليه
الجميل في الامر انني بدأت بالعمل علي مشروع مشابه لجوجل بالظبط و لكن للخطوط العربية المشكلة بالنسبة لي هي حقوق الخطوط العربية فانا لا اعرف ان كانت مجانية للاستخدام التجاري ام ماذا

[amaiko]

اه اسف نسيت ارفاق المثال
Arabic Font Demo

[manindark]

حاولت اكثر من مرة تطبيق ذلك ولكن لم انجح

لو ممكن المساعدة

ملف الخطوط في المرفقات بعد تحويلها من الموقع
http://www.swalif.net/softs/redirect...face/generator

ملف css

@font-face {
    /* This declaration targets everything else */
    font-family: 'GESSLight';
    src: url(//:) format('no404'), url('ge-webfont.woff') format('woff'), 
                                   url('ge-webfont.ttf') format('truetype'), 
                                   url('ge-webfont.svg#GESSLight') format('svg');
    font-weight: normal;
    font-style: normal;
}



body {
    background: #EEEEEE url(../images/header.gif) repeat-x top left;
    color: #000000;
    margin: 0;
    padding: 0;
    font: 0.7em "Arial", Helvetica, Sans-Serif,  GESSLight;
}


h1 {
    font: 250% 'GESSLight';
    font-weight: bold;
    padding: 0 0 0 0;
    margin: 0;
}

h1 a {
    color: #931277;
    background: inherit;
    text-decoration: none;
}

h1 a:hover {
    color: #931277;
    background: inherit;
    text-decoration: none;
}


#header {
    clear: both;
    width: 750px;
    height: 45px;
    margin: 0 auto;
}

#logo {
    float: left;
    padding: 5px 0 0 0px;
    color: #000000;
    background: inherit;
    width: 700px;
}

.slogan {
    float: left;
    border-left: 1px solid #CCCCCC;
    padding: 0 0 0 20px;
} 

ملف php

    <div id="header">
        <div id="logo">
            <p class="slogan"><b>الرقم السري</b><br />ملف</p>
            <div style="float: right;" style="font-family: 'GESSLight';">
                <h1><a href="#">الخط المفترض يظهر هنا</a></h1>
            </div>
        </div>

    </div> 

[المظفر بالله]

حاولت اكثر من مرة تطبيق ذلك ولكن لم انجح

لو ممكن المساعدة

ملف الخطوط في المرفقات بعد تحويلها من الموقع
http://www.swalif.net/softs/redirect...face/generator

ملف css

@font-face {
    /* This declaration targets everything else */
    font-family: 'GESSLight';
    src: url(//:) format('no404'), url('ge-webfont.woff') format('woff'), 
                                   url('ge-webfont.ttf') format('truetype'), 
                                   url('ge-webfont.svg#GESSLight') format('svg');
    font-weight: normal;
    font-style: normal;
}



body {
    background: #EEEEEE url(../images/header.gif) repeat-x top left;
    color: #000000;
    margin: 0;
    padding: 0;
    font: 0.7em "Arial", Helvetica, Sans-Serif,  GESSLight;
}


h1 {
    font: 250% 'GESSLight';
    font-weight: bold;
    padding: 0 0 0 0;
    margin: 0;
}

h1 a {
    color: #931277;
    background: inherit;
    text-decoration: none;
}

h1 a:hover {
    color: #931277;
    background: inherit;
    text-decoration: none;
}


#header {
    clear: both;
    width: 750px;
    height: 45px;
    margin: 0 auto;
}

#logo {
    float: left;
    padding: 5px 0 0 0px;
    color: #000000;
    background: inherit;
    width: 700px;
}

.slogan {
    float: left;
    border-left: 1px solid #CCCCCC;
    padding: 0 0 0 20px;
} 

ملف php

    <div id="header">
        <div id="logo">
            <p class="slogan"><b>الرقم السري</b><br />ملف</p>
            <div style="float: right;" style="font-family: 'GESSLight';">
                <h1><a href="#">الخط المفترض يظهر هنا</a></h1>
            </div>
        </div>

    </div> 

اخي اذا استخدمت الفونت فيس, اكتبه بالشكل الموجود بالموضوع, ارى ان هنالك اخطاء فيه او شيء غير مفهوم
ثم هل لا يعمل على كل المتصفحات ام متصفح واحد

هذا مرور سريع وان شاء الله اذا وجدت فراغ اشوف المشكلة ايش بالضبط

[manindark]

لايعمل ابدا

هل من الممكن التعديل عليه

[manindark]

الـمـساعـــدة

[MaJoOoDy]

@font-face {
    /* This declaration targets Internet Explorer */
    font-family: 'ShorooqN1Regular';
    src: url('shorooq_n1-webfont.eot');
}

@font-face {
    /* This declaration targets everything else */
    font-family: 'ShorooqN1Regular';
    src: url(//:) format('no404'), url('shorooq_n1-webfont.woff') format('woff'), url('shorooq_n1-webfont.ttf') format('truetype'), url('shorooq_n1-webfont.svg#ShorooqN1Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}



p{
   font-family: 'ShorooqN1Regular';
font-size : 15px;
}

هذا هو الكود الخاص بي في css ،،،
بالنسبة لـــ:

@font-face {
    /* This declaration targets Internet Explorer */
    font-family: 'ShorooqN1Regular';
    src: url('shorooq_n1-webfont.eot');
}

@font-face {
    /* This declaration targets everything else */
    font-family: 'ShorooqN1Regular';
    src: url(//:) format('no404'), url('shorooq_n1-webfont.woff') format('woff'), url('shorooq_n1-webfont.ttf') format('truetype'), url('shorooq_n1-webfont.svg#ShorooqN1Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

كان هذا ناتج خدمة موقع ( http://www.fontsquirrel.com/fontface/generator ) .. ولا أدري هل تم تحديث مولد الخطوط لديهم بحيث يعطي أكواد ( ie9 ) كما هو لدي ،، ام أن هذه الخدمة لم تكن موجودة من قبل ... ؟؟!!

المهم في الموضوع ،،، أن الخطوط تظهر متقطعة ( منفصلة عن بعضها ) ، ولم تنفع الطريقة التي تم توضيحها في المشاركات في الأعلى ...

هل من حلول أخرى ... ???

[المظفر بالله]

@font-face {
    /* This declaration targets Internet Explorer */
    font-family: 'ShorooqN1Regular';
    src: url('shorooq_n1-webfont.eot');
}

@font-face {
    /* This declaration targets everything else */
    font-family: 'ShorooqN1Regular';
    src: url(//:) format('no404'), url('shorooq_n1-webfont.woff') format('woff'), url('shorooq_n1-webfont.ttf') format('truetype'), url('shorooq_n1-webfont.svg#ShorooqN1Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}



p{
   font-family: 'ShorooqN1Regular';
font-size : 15px;
}

هذا هو الكود الخاص بي في css ،،،
بالنسبة لـــ:

@font-face {
    /* This declaration targets Internet Explorer */
    font-family: 'ShorooqN1Regular';
    src: url('shorooq_n1-webfont.eot');
}

@font-face {
    /* This declaration targets everything else */
    font-family: 'ShorooqN1Regular';
    src: url(//:) format('no404'), url('shorooq_n1-webfont.woff') format('woff'), url('shorooq_n1-webfont.ttf') format('truetype'), url('shorooq_n1-webfont.svg#ShorooqN1Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

كان هذا ناتج خدمة موقع ( http://www.fontsquirrel.com/fontface/generator ) .. ولا أدري هل تم تحديث مولد الخطوط لديهم بحيث يعطي أكواد ( ie9 ) كما هو لدي ،، ام أن هذه الخدمة لم تكن موجودة من قبل ... ؟؟!!

المهم في الموضوع ،،، أن الخطوط تظهر متقطعة ( منفصلة عن بعضها ) ، ولم تنفع الطريقة التي تم توضيحها في المشاركات في الأعلى ...

هل من حلول أخرى ... ???

فعلاً المشكلة عادت للظهور, وابحث عن حل لها, اذا وجدت حل ان شاء الله اضعه