صفحة 1 من 2 12 الأخيرةالأخيرة
النتائج 1 إلى 15 من 22

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

  1. #1

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



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

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

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

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

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

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

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

    1. ببساطة حمل خط بصيغة ttf وكمثال ارفقت ملف هنا في المرفقات.
    2. ثم افتح صفحة فارغة html وقم بتعريف الستايل بهذا الشكل.
    كود HTML:
    @font-face {
        font-family: 'HacenTunisia';
        src:  url('HacenTunisia.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    مع ملاحظة أن font-family تستطيع أن تعرفه كما تشاء, أي بأي اسم تريده, و src يحتوي رابط الخط على السيرفر لديك.

    وجرب الان هذا الخط الجديد, ليكن مثلا مع div
    كود HTML:
    <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 هو كالتالي:
    كود HTML:
    @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;
    }
    استخدمه :
    كود HTML:
    <div style="font-family: HacenTunisia">بسم الله الرحمن الرحيم</div>
    وارى الناتج على المتصفحات.

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

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

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

    كود HTML:
    @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. الموضوع كتبته على عجالة, فإن كان هنالك خطأ ما او نقطة غير واضحة ارجوا ذكرها.


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





    الملفات المرفقة الملفات المرفقة
    التعديل الأخير تم بواسطة المظفر بالله ; 10-08-2010 الساعة 06:36 PM
    __________________
    مدونتي: المظفر بالله
    لم يجعل الله لك الاختيار في جنسيتك او على أي ارض تولد, ولا في عروبتك, لكن ترك لك الاختيار في دينك, فدعك من العصبية الجاهلية على أساس الجنسية او العروبة, فالفضل بينكم بالتقوى.


  2. #2


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

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

    http://code.google.com/webfonts

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

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

    طريقة استخدامه انك تقوم بإستيراد الخط وهنا طريقتين
    الاولى تقوم بوضع كود بين وسم <head>
    وهو
    كود PHP:
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'
    والثانيه ان تقوم بإستيراده عن طريق الـ css بإستخدام @import بوضع هذا الكود في بداية كود الـ css
    كود PHP:
    @import url(http://fonts.googleapis.com/css?family=Lobster); 
    وبعد ذلك تقوم بإستخدام الخط في الـ css بشكل طبيعي كالتالي
    كود PHP:
    h1 font-family'Lobster'arialserif; } 
    مشكلة هذه الطريقة ان جوجل الي الأن لم تقوم بتوفير خطوط عربيه
    لذلك كل الشكر للأخ المظفر على طريقته و محاولاته





    __________________
    نادي مدعوم التطويري
    مدعوم لخدمات الويب
    ConTacT Me
    Ahmed {@} mad3om.net

  3. #3


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

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

    http://code.google.com/webfonts

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

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

    طريقة استخدامه انك تقوم بإستيراد الخط وهنا طريقتين
    الاولى تقوم بوضع كود بين وسم <head>
    وهو
    كود PHP:
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'
    والثانيه ان تقوم بإستيراده عن طريق الـ css بإستخدام @import بوضع هذا الكود في بداية كود الـ css
    كود PHP:
    @import url(http://fonts.googleapis.com/css?family=Lobster); 
    وبعد ذلك تقوم بإستخدام الخط في الـ css بشكل طبيعي كالتالي
    كود PHP:
    h1 font-family'Lobster'arialserif; } 
    مشكلة هذه الطريقة ان جوجل الي الأن لم تقوم بتوفير خطوط عربيه
    لذلك كل الشكر للأخ المظفر على طريقته و محاولاته
    الله يعطيك العافية اخي وبارك الله فيك على الاضافة الطيبة

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

    حياك الله





    __________________
    مدونتي: المظفر بالله
    لم يجعل الله لك الاختيار في جنسيتك او على أي ارض تولد, ولا في عروبتك, لكن ترك لك الاختيار في دينك, فدعك من العصبية الجاهلية على أساس الجنسية او العروبة, فالفضل بينكم بالتقوى.

  4. #4
    عضو فعال
    تاريخ التسجيل
    Dec 2008
    المشاركات
    1,897


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





    __________________
    راسلني

  5. #5
    عضو جديد
    تاريخ التسجيل
    May 2010
    المشاركات
    7

    Smile يسلمو حبي



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






  6. #6
    عضو نشيط
    تاريخ التسجيل
    May 2010
    المشاركات
    35


    الف شكراً ..

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






  7. #7
    عضو نشيط
    تاريخ التسجيل
    Oct 2003
    المشاركات
    115


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

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





    __________________
    سبحان الله و الحمد لله و لا إله إلا الله و الله أكبر و لا حول و لا قوة إلا بالله

  8. #8
    عضو نشيط
    تاريخ التسجيل
    May 2007
    المشاركات
    73


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





    __________________
    أحمد محمود
    http://www.amaiko.net

  9. #9
    عضو نشيط
    تاريخ التسجيل
    May 2007
    المشاركات
    73


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





    __________________
    أحمد محمود
    http://www.amaiko.net

  10. #10
    عضو نشيط جدا
    تاريخ التسجيل
    Jan 2008
    المشاركات
    392


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

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

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

    ملف css
    كود PHP:
    @font-face {
        
    /* This declaration targets everything else */
        
    font-family'GESSLight';
        
    srcurl(//:) format('no404'), url('ge-webfont.woff') format('woff'), 
                                       
    url('ge-webfont.ttf'format('truetype'), 
                                       
    url('ge-webfont.svg#GESSLight'format('svg');
        
    font-weightnormal;
        
    font-stylenormal;
    }



    body {
        
    background#EEEEEE url(../images/header.gif) repeat-x top left;
        
    color#000000;
        
    margin0;
        
    padding0;
        
    font0.7em "Arial"HelveticaSans-Serif,  GESSLight;
    }


    h1 {
        
    font250'GESSLight';
        
    font-weightbold;
        
    padding0 0 0 0;
        
    margin0;
    }

    h1 a {
        
    color#931277;
        
    backgroundinherit;
        
    text-decorationnone;
    }

    h1 a:hover {
        
    color#931277;
        
    backgroundinherit;
        
    text-decorationnone;
    }


    #header {
        
    clearboth;
        
    width750px;
        
    height45px;
        
    margin0 auto;
    }

    #logo {
        
    floatleft;
        
    padding5px 0 0 0px;
        
    color#000000;
        
    backgroundinherit;
        
    width700px;
    }

    .
    slogan {
        
    floatleft;
        
    border-left1px solid #CCCCCC;
        
    padding0 0 0 20px;

    ملف php
    كود PHP:

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

        </
    div






    الملفات المرفقة الملفات المرفقة
    • نوع الملف: zip font.zip‏ (73.2 كيلوبايت, 149 مشاهدات)

  11. #11


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

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

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

    ملف css
    كود PHP:
    @font-face {
        
    /* This declaration targets everything else */
        
    font-family'GESSLight';
        
    srcurl(//:) format('no404'), url('ge-webfont.woff') format('woff'), 
                                       
    url('ge-webfont.ttf'format('truetype'), 
                                       
    url('ge-webfont.svg#GESSLight'format('svg');
        
    font-weightnormal;
        
    font-stylenormal;
    }



    body {
        
    background#EEEEEE url(../images/header.gif) repeat-x top left;
        
    color#000000;
        
    margin0;
        
    padding0;
        
    font0.7em "Arial"HelveticaSans-Serif,  GESSLight;
    }


    h1 {
        
    font250'GESSLight';
        
    font-weightbold;
        
    padding0 0 0 0;
        
    margin0;
    }

    h1 a {
        
    color#931277;
        
    backgroundinherit;
        
    text-decorationnone;
    }

    h1 a:hover {
        
    color#931277;
        
    backgroundinherit;
        
    text-decorationnone;
    }


    #header {
        
    clearboth;
        
    width750px;
        
    height45px;
        
    margin0 auto;
    }

    #logo {
        
    floatleft;
        
    padding5px 0 0 0px;
        
    color#000000;
        
    backgroundinherit;
        
    width700px;
    }

    .
    slogan {
        
    floatleft;
        
    border-left1px solid #CCCCCC;
        
    padding0 0 0 20px;

    ملف php
    كود PHP:

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

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

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





    __________________
    مدونتي: المظفر بالله
    لم يجعل الله لك الاختيار في جنسيتك او على أي ارض تولد, ولا في عروبتك, لكن ترك لك الاختيار في دينك, فدعك من العصبية الجاهلية على أساس الجنسية او العروبة, فالفضل بينكم بالتقوى.

  12. #12
    عضو نشيط جدا
    تاريخ التسجيل
    Jan 2008
    المشاركات
    392


    لايعمل ابدا

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






  13. #13
    عضو نشيط جدا
    تاريخ التسجيل
    Jan 2008
    المشاركات
    392


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






  14. #14
    عضو نشيط
    تاريخ التسجيل
    Jan 2008
    المشاركات
    118


    كود:
    @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 ) كما هو لدي ،، ام أن هذه الخدمة لم تكن موجودة من قبل ... ؟؟!!

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

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






  15. #15


    كود:
    @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 ) كما هو لدي ،، ام أن هذه الخدمة لم تكن موجودة من قبل ... ؟؟!!

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

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





    __________________
    مدونتي: المظفر بالله
    لم يجعل الله لك الاختيار في جنسيتك او على أي ارض تولد, ولا في عروبتك, لكن ترك لك الاختيار في دينك, فدعك من العصبية الجاهلية على أساس الجنسية او العروبة, فالفضل بينكم بالتقوى.





ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

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