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

المظفر بالله · 05:36 PM

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

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

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

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

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

الصحيح الامر سهل وهو باستخدام 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:29 PM

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

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

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', arial, serif; }

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

المظفر بالله · 11-08-2010, 12:12 AM

إقتباس:

المشاركة الأصلية بواسطة حمايه

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

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

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', arial, serif; }

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

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

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

حياك الله

وضاء · 16-08-2010, 01:10 AM

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

Owaisweb · 16-08-2010, 01:37 PM

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

majado2 · 21-08-2010, 12:46 AM

الف شكراً ..

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

الفريد · 02-08-2011, 03:38 AM

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

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

amaiko · 04-08-2011, 01:49 AM

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

amaiko · 04-08-2011, 01:54 AM

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

manindark · 21-08-2011, 06:10 PM

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

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

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

ملف css

كود PHP:

  @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

كود 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>

المظفر بالله · 21-08-2011, 11:36 PM

إقتباس:

المشاركة الأصلية بواسطة manindark

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

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

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

ملف css

كود PHP:

@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

كود 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 · 21-08-2011, 11:56 PM

لايعمل ابدا

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

manindark · 25-08-2011, 02:18 AM

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

محمد الرشيد · 31-08-2011, 03:54 PM

مووووووفق ،،،،،

MaJoOoDy · 03-02-2012, 01:48 PM

كود:

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

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

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

المظفر بالله · 03-02-2012, 08:44 PM

إقتباس:

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

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

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

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

MaJoOoDy · 07-02-2012, 08:18 AM

المظفر بالله ...
جرب موقع ( http://www.font2web.com/ ) ، استخدمته لتحويل الخطوط وهو مشابه لعمل ( http://www.fontsquirrel.com ) ..
والطريقة نجحت معي 100 % .... بعد التحويل يقوم الموقع بضغط الملفات المحولة على شكل ملف مضغوط ، حملها ومن ثم عند فك التحميل تجد ملف باسم ( font.css ) فقط قم بنسخ محتواه في ملف css الخاص بك ، وبعدها كل الأمور تصبح صحيحة ...
انبه فقط على أنه يجب ان تلتزم بوضع اسم الخط كما هو سواء كان بين علامتي تنصيص واحدة أو مزدوجة ، فقط انسخه بعلاماته وضعه أمام الــmarkup المطلوب تغيير خطه ...

وأنبه الجميع إلى احترام حقوق الغير في الخطوط ، حيث أن للخطوط مصمميها ، وأغلب الخطوط المنتشرة مقرصنة او منشورة من دون إذن صاحبها ، وليتحرى الناس الحلال من الرزق ،،،

أخي المظفر بالله ... الموضوع جميل جدا ، وشيق ، والبحث عن حلول للمشاكل كان أجمل ... شكرا لك ...

رحال العمر · 06-04-2012, 07:57 PM

السلام عليكم

اشكر كل من شارك في هذا الموضوع في سبيل ايصال المعلومة والطريقة المناسبة

للاسف الموقع الاول يعطيك الخط بشكل متقطع

والموقع الاخير يعطيني الخطأ التالي

An unknown error occured, please try again later. This might also happen if the font cannot be converted at all.

Already converted 479 fonts today!

حاولت ماقدرت
الخطوط المطلوبة تعديلها

mohammad Art bold

او

khalid Art bold

للاسف كلهم يعطيني نفس الخطأ

مع اني حاولت بخط اخر وعطاني لكن ابي نفس الخط اللي ذكرت

ياليت مساعدة بموقع اخر او طريقة اخرى

ابوخالد

hussein.shy · 06-04-2012, 08:22 PM

إقتباس:

المشاركة الأصلية بواسطة رحال العمر

السلام عليكم

اشكر كل من شارك في هذا الموضوع في سبيل ايصال المعلومة والطريقة المناسبة

للاسف الموقع الاول يعطيك الخط بشكل متقطع

والموقع الاخير يعطيني الخطأ التالي

An unknown error occured, please try again later. This might also happen if the font cannot be converted at all.

Already converted 479 fonts today!

حاولت ماقدرت
الخطوط المطلوبة تعديلها

mohammad Art bold

او

khalid Art bold

للاسف كلهم يعطيني نفس الخطأ

مع اني حاولت بخط اخر وعطاني لكن ابي نفس الخط اللي ذكرت

ياليت مساعدة بموقع اخر او طريقة اخرى

ابوخالد

اخي القي نظرة علي هذه التدوينة ممكن تفيدك.

رحال العمر · 12:51 AM

اي تدوينه اخي الكريم

مافيه رابط

بعد المحاولات ضبط على الاكسبلورر

باقي الفيرفوكس اهم شي

وبعدين راح انزل الملفات والكود بإذن الله

hussein.shy · 07-04-2012, 01:17 AM

إقتباس:

المشاركة الأصلية بواسطة رحال العمر

اي تدوينه اخي الكريم

مافيه رابط

بعد المحاولات ضبط على الاكسبلورر

باقي الفيرفوكس اهم شي

وبعدين راح انزل الملفات والكود بإذن الله

سامحني اخي نسيت

هذا رابط التدوينة
http://www.mubde3.net/blog/archives/...es-on-css3-6-2

des4best · 24-04-2012, 01:54 AM

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

المواضيع المشابهه
الموضوع	كاتب الموضوع	القسم	الردود	آخر مشاركة
مشاكل غريبه وحلول اغرب !!	alwoolf	سوالف الاستضافة	7	09-10-2006 07:45 PM
(موسوعة)مشاكل وحلول النسخة 3.6.0	قلعة فلسطين	الإصلاح والصيانة	2	28-08-2006 10:24 PM
موسوعة... مشاكل وحلول إدارة المنتديات	ALARBIA.COM	الإصلاح والصيانة	10	14-11-2005 02:34 AM
هاك ولا أروع الخط المخصص للعضو في كل مشاركاته	azizman	الإصلاح والصيانة	18	04-08-2004 01:00 AM
مشاكل وحلول النسخه vBulletin 3.0.0 Beta 4	php_for_ever	الإصلاح والصيانة	10	15-07-2003 05:56 AM

أدوات الموضوع
مشاهدة نسخة مطبوعة إرسال هذه الصفحة