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




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

اقتباس:
هــــاا....لذالك كنت أتسائل لما زواري قليلون...همممم!! وما الحل إذا ؟
الحل في العنوان لقد جاء به مطوروا css3 إنها تقنية font-face @ بكل بساطة هي تقنية تقوم على إنشاء مكتبة خطوط في الموقع تحمل معه في السيرفر وبتالي تتوافق مع جميع الانظمة في كل مكان وبالتالي انت الان لاتحتاج الى صورة مرسوم عليها خط معين.

اقتباس:
يـــــاسلام!!! رهيب فعلا اين كنت منذ زمن يــارجل أرنا الكيفية الان..!

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



بعد التحميل سيظهر لك ملف Winrar وفيه الخط الذي إخترته.



قم بك الضغط وإختر أي شكل تريده أن يظهر عليه ذالك الخط "غليض-مائل....الخ" ومن ثم إذهب الى نفس الموقع وإتبع نفس الخطوات المبينة في الصورة.




بعد رفع خطك إنتظر حتى ينتهي من تحويل خطك الى تقنية font-face @ لتحصل في الاخير على ملف مضغوط محتواه كمايلي :




بدون تعقيدات فالموقع قام فقط بتحويل هذا الخط الى نفس الخط ولكن بإمتدادت أخرى تتوافق مع جميع المتصفحات ..ماعليك الان سوى أن تقوم بفك الضغط ونسخ الملف بالكامل في موقعك وربط ملف stylesheet.css بصفحة موقعك عبر الكود المعروف .

كإفادة فإن هذا الكود أسفله هو المسؤول عن إستدعاء الخطوط بإمتداداتها الكاملة والذي يدعى بــ font-face @

رمز Code:
@font-face{ font-family: 'MyWebFont'; src: url('WebFont.eot'); src: url('WebFont.eot?#iefix') format('embedded-opentype'), url('WebFont.woff') format('woff'), url('WebFont.ttf') format('truetype'), url('WebFont.svg#webfont') format('svg'); }
بعد ذالك ماعليك سوى إستدعاء ذالك الخط عبر الكود CSS المعروف.

رمز Code:
p { font-family: 'sourcesanspro-blackitalic-webfont', Arial, sans-serif; }
حيث 'sourcesanspro-blackitalic-webfont' هو إسم الخط الذي إخترته كماهو مبين في الصورة السابقة.
الان إستمتع بالخطوط بدون صور وبموقع خفيف وسريع في التحميل.
نفس الشيئ بالنسبة للخطوط العربية.
ملاحظة : الملف الذي قمت بتحويله يحتوي على معلومات زائدة للثقافة العامة فقط,,,, قراءة ممتعة.