ملف كامل عن كيفية ترميز الخط بإستعمال تقنية سلسلة عناوين Data URLs

ملف توضيحي عن كيفية إستعمال تقنية سلسلة عناوين ورل للبيانات Data URLs لترميز خطوط الويب  بتسلسل base64  لإستعمالها على الموقع الإلكتروني وبالأخص منصة البلوجر ، وكيف نستغل جميع الخطوط العربية الحاسوبية المجانية بتحويلها وتهيئتها لنستخدمها كخطوط ويب تعمل في جميع المتصفحات الحديثة، بما في ذلك إنترنيت إكسبلورر 8.

حول تقنية سلسلة عناوين Data URLs

هذه الألية أو التقنية هي نظام معرف موارد موحدة يسمح لك بتضمين عناصر البيانات المضمنة في صفحة ويب كما لو كانت يشار إليها كمصادر خارجية..إلا أنها لا تقوم في الواقع بتحديد موقع أي شيء..بدلا من ذلك يتم تضمين بيانات المورد ضمن سلسلة عناوين ورل نفسها كسلسلة مشفرة base64. وهذا يغني المتصفح من الحاجة إلى تقديم طلبات HTTP إضافية للموارد الخارجية، وبالتالي يمكن زيادة سرعة تحميل الصفحة.
بحيث أنه فور تركيب خط بهذه التقنية ستلاحظ فرق شاسع في مدة عرضه..وبما أن لهذه الخاصية عدة مزايا في نفس الوقت لها عيوب ومنها لا يمكن تخزين عناوين Data URLs بشكل منفصل عن المستندات التي تحتوي عليها وثانيا حجم السلسلة الضخم الذي ينتج من عملية الترميز وسيتضاعف بعدد الخطوط وفي نفس الوقت حجم ملف الخط نفسه كمثال الخط الأميــــــري لكن رغم كبر الملف فلا يثقل القالب بل يزيد من سرعة عرض الخط والأهم يعتبر حل فعال مع متصفح فاير فوكس وهذا ما نحن بصدد شرحه لكن قبل ذلك دعونا نعلم أسس عمل خطوط الويب لنعلم قيمة خاصية ترميز base64 ولماذا نحتاج إليها كحل فعال لأغلب المشاكل .

ألية عمل وعرض المتصفح للخط

المتصفح يُظهر خط مدونتك حسب التعليمات البرمجية كإسم الخط وخصائصه كالمقاس واللون والتنسيق...إلخ التي تكتبها على صفحة الأنماط CSS سواء داخل أو خارج النموذج برابط أو مسار إستدعاء ، فلو اخترت تضمين الخط الإفتراضي Arial على صفحة الأنماط CSS سيطلب المتصفح هذا الخط من مكتبة الخطوط في حاسوب المستخذم ، فإذا وجد هذا الخط سيتم عرضه بشكلٍ سليم، وان لم يوجد سيعرض المتصفح الموقع بخط آخر وغالباً سيكون tahoma . وتحسباً لإمكانية عدم وجود الخط المطلوب فإن المصمم يكتب أسماء ثلاثة خطوط أو أكثر يتم طلبها حسب ترتيبها فإذا لم يوجد الخط الأول يعرض الخط الثاني وهكذا . . . وكمثال يتم تحديد كود الخط هكذا

 body {font-family: Arial;} 

ولكتابة أكثر من خط ،  يأتي التنسيق مثلاً هكذا :

 body { font-family:'Amiri Quran', arial, tahoma, cursive; } 

report

في حالة إذا كان الخط رئيسي أو إحتوى على مسافة فارغه فيجب كتابة علامة تنصيص مفردة على جانبي اسم الخط
كما هو الإسم 'Amiri Quran'

صيغ الخطوط web fonts formats

الصيغة	تعريف
TTF	تعني TrueType font النسخة القياسية المستخدمة في الحواسيب.من تطوير آبل وهي الصيغة الأشهر، ولن يخلو نظام حاسوبي إلا وفيه عدد كبير من الخطوط بهذه الصيغة، وستجد عدد كبير من الخطوط العربية المتوفرة في الشبكة العالمية بهذه الصيغة
OTF	تعني OpenType Font وهي امتداد لصيغة TrueType أتت لتحل بعض مشاكل ttf وهي بدورها تعاني من مشاكل أكثر هذا النوع يحتوي على حزمة حروف أكبر وبالتالي أكثر قدرة على عرض وطباعة الحروف مع دعم أفضل للغات المختلفة ! وهو نتيجة تعاون بين فريق adobe و microsoft .
EOT	تعني Embedded OpenType اشتقتها ميكروسوفت من صيغة OpenType، هذه الصيغة حصرية لمتصفح إنترنت اكسبلورر. هذا النوع قد يحتوي على عناوين لمواقع محددة يعمل لها فقط، لحفظ الحقوق فهو يحدد نطاقا واحدا لإستخدام الخط فيه .
WOFF	تعني Web Open Font Format هذه الصيغة في حقيقتها مجرد وعاء لـ TrueType أو OpenType ، ولكن هذا الوعاء مضغوط قل بـ 40% من ttf ليحقق حجم أقل ليناسب متطلبات المواقع من ناحية سرعة عرض الخطوط، بالإضافة إلى أن هذه الصيغة تحتوي على معلومات أساسية MetaData عن الخط مثل المصنع ورخصة الاستخدام ! لذلك هي الصيغة التي توصي بها رابطة الشبكة العالمية W3C . وهي الصيغة التي تسعى جميع المتصفحات لدعمها وكذلك هي الصيغة المطلوبة دائما لتحويل الخط إلى ملف Data URLs بترميز base64
SVG	تعني Scalable Vector Graphics تقنية خاصة بعرض الرسوم على شبكة الإنترنت لهذا في الواقع لا يعتبر الملف خطاً بالمعنى الحرفي،فهو تجسيد لكل الحروف على هيئة أشكال svg هذه الصيغة خاصة بأنظمة IOS وكون النظام المحدث من IOS يدعم ttf مثلاً ( ios لا يدعم خطوط الويب العربية ! ) , ما يعيب هذا الخط هو حجمه الكبير جداً، فهو أكبر بـ 400% من ttf، وأكبر بـ 800% من woff كما أنّه لا يدعم العربية، فلا تستطيع استخدامه هناك.

دعم المتصفحات الأكثر إستعمالاً لصيغ خطوط الويب

الصيغة	IE8	IE9	Firefox	Chrome	Safari	Opera	UC Browser
OTF	✓	✓	✓	✓	✓	✓	✓
EOT	✓	✓	✕	✕	✕	✕	✕
TTF	✕	✓	✓	✓	✓	✓	✓
WOFF	✕	✓	✓	✓	✓	✓	✓
EOT / TTF	✓	✓	✓	✓	✓	✓	✓
EOT / WOFF	✓	✓	✓	✓	✓	✓	✓
SVG	✕	✕	✕	✓	✓	✓	✕

warning

- الصيغة svg الصيغة otf كبير حجمها مقارنة بـ ttf !.
- النظام المحدث من ios لا يدعم خطوط الويب العربية!.
- الصيغة woff أقل بكثير من ttf وتغني عنها غالباً ، وتدعهما كل المتصفحات المعروفه.
- الصيغة eot يدعمها حصرياً متصفح انترنت اكسبلورر بجميع إصداراته.

ملاحظة:

لا يمكن الاستغناء عن الصيغة EOT لمجرد دعم IE8، فمتصفح الانترنت اكسبلورر الثامن IE8ما زال مستعملا بشكل كبير في العالم العربي حسب الإحصائيات رغم إنخفاظ مستوى Rank في الأونة الأخيرة وهيمنة متصفح  الكروم وإليك نموذج إحصائي عن مستوى لكل متصفح أو قم بزيارة هذا الموقع المراقب لمدى قوة إستعمال المتصفح StatCounter

check_circle

أفضل وأشمل استخدام هو الجمع بين الصيغتين ( EOT , WOFF , TFF )

كبف نحصل على خط بجميع الصيغ؟

في الوقت الحالي أصبح هذا الأمر أسهل بأشواط من الفترات السابقة فحاليا نجد مواقع تبذل جهدا كبيرا لتوفير خطوط عربية إحترافية ومجانا مثل مكتبة الخطوط العربية فونتـ فيس والتي توفر (أكثر من ١٤٠ خط عربي ) تستعمله أشهر وأقوى المواقع .
وعندنا كذلك مكتبة خطوط google fonts التي أصبحت مؤخرا تعتني بالخط الشرق أوسطي عموما وستجد مجموعة جيدة ولابأس بها .
و تبقى المسألة متوقفة على مهاراتك في البحث وإيجاد المعلومة على النت وستلاحظ أن في الخطوط العربية المجانية الكفاية. يبقى المشكل أن الخط عند تنزيله للإستعمال على الحاسوب تجده متوفر بالصيغة TTF أو OTF ومثلا المواقع التى ذكرناها أنفا توفر على المستخدم الكثير من العناء عبر تضمين رابط مباشر للخط على هيئة ملف style.css هذا في حالة أردت إستعماله على قالب المدونة ويكون شكله مثلا في الخط الكوفي DroidKufi توفره لنا مكتبة خطوط google  كالآتي...

<link href='//fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>

موضع رابط المكتبة يكون أسفل <head> أسفل أكواد الميتاتاج أو ببساطة  فوق   <b:skin><![CDATA[  ويأتي دائما مع رابط التضمين كود صغير هو  نمط إستدعاء لخط  يكون على الشكل التالي...

 font-family: 'Droid Arabic Kufi', serif; 

كما تلاحظ النمط يحمل نفس الإسم الذي بالون الموجود في رابط التضمين بحيث يوضع هذا الإسم للعناصر التي تختارها ليعرض بها هذا الخط أو يمكن إستبداله مكان خط قالب مدونتك من خلال بحث عن font-familyأوfont
الآن لوأننا فتحنا مكتبة الخط من خلال فتح الرابط المحدد باللون سيعرض لك صفحة بها مجموعة من أكواد css تحمل روابط لنفس الخط لكن بجميع الصيغ التي ذكرناها سالفا لو أنك قمت بإختيار أي رابط من المجموعة ودخلت عليه مرة أخرى سيقوم بتنزيل ملف الخط على جهاز حاسوبك بالصيغة التي إخترتها ولايعني هذا أنك تستطيع تنزيل جميع صيغ الخطوط بهذه الطريقة لأن هناك خطوط لا تحتوي إلا على صيغة واحدة لكن معدلة وفي الغالب تكون صيغة WOFF إذن ما العمل؟
الحل بسيط أولا ما عليك سوى الحصول على الخط بصيغة TTF وهي الصيغة الأوفر التي نثبتها على نظام الحاسوب ثم تاليا نقوم بالإستعانة بأدوات لتحويل الخط إلى جميع الصيغ وهذه الأدوات عموما لا يمكن حصرها لذلك سنضرب عنها صفحا ونعفيك من ذلك عبر موقعين :

مواقع لتحويل صيغ الخط

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

الموقع الأول: Font Squirrel

موقع Font Squirrel هو واجهة لعرض الخطوط ، بالإضافة الى خدمة تحويل صيغ الخطوط ، هو الأكثر استخداماً على ما أعتقد. بالنسبة للخطوط العربية لابد من اختيار التبويب EXPERT ثم وضع علامة عند الخيار  No Subsetting وتحدد على الصيغ المراد تحويلها أو كذلك تستطيع إختيار التبويب BASIC مباشرة دون تعقيدات ستجد شروحات كثيرة حول التعامل مع هذا الموقع  .

معلومة: الخبير -Ethan- صاحب لموقع Font Squirrel إقترح حلاً فعالاً لمشكلة تنسيق كود إستدعاء الروابط ، وهو وضع نوع الخط بعد مساره، وترتيب الخطوط بطريقة فعالة حتى لا يحمل أيّ متصفح الخط مرتين وسنعرف المقصود عمليا عندما نصل إلى مرحلة المثال التطبيقي عن  طرق إدراج الخط في القالب

الموقع الثاني: web font generator

موقع web font generator أستعمله انا شخصيا سهل وبسيط وفعال وبحمد الله لم أجد أي مشاكل خصوصا في التعامل مع الخط العربي المبارك .
بعد الدخول على الموقع فقط قم بالضغط على زر Shoose file قم بإختيار ملف الخط بصيغة TTF أو OTF من على جهازك ثم حدد فقط على الخيارالثاني ثم إضغط على زر Generate web font إنتظر قليلا حتى يظهر معك زر تنزيل المجلد به الخط بجميع الصيغ.

إدراج الخطوط @font-face في ملف CSS

لو أنك دخلت على رابط التضمين المباشر في المثال الذي طرح سابقا كنت قد لا حظت مجموعتين من الأكواد بداية كل مجموعة @font-face تحتوى على روابط خاصة بكل أنواع الصيغ وليكن هذا مثالنا ...سنختار الجزء الأول وهو نفسه في الجزء الثاني الفارق في سمك الخط Bold  قبل أن نشرح الكود ( بإيجاز)  إذا أردت الإستزادة والتوسع في هذه الجزئية طالع هذا المقال الجيد على صفحة google للمطورين  تحسين خط الويب

@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot);
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
      url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff2) format('woff2'),
      url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff) format('woff'),
      url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.ttf) format('truetype');
}

شرح الكود

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

النمط المحدد بهذا اللون خاص بتنسيق الخط مثلا (نضع italic بدلاً من normal إذا كان الخط المدرج مائل).

النمط المحدد بهذا اللون خاص بسمك الخط والرقم ما تحت 600 يعني خط أخف ومافوق 700 يعني سميك.

النمط المحدد بهذا اللون تلا حظ أنه رابط بصيغة eot مكرر الفارق في العلامة?#iefixوهي لتفادي مشكل تعثر متصفح EI

النمط المحدد بهذا اللون رابط مكرر بصيغة woff بالنسبة لـ woff2 هي إصدار على المتصفحات التي تتوافق معه

النمط المحدد بهذا اللون في أخر الكود هو رابط ملف الخط بصيغة ttf

ملاحظة مهمة

حافظ دائما على هذا الترتيب والتنسيق للكود لا يجب أن ندرج كل خط لوحده في عبارته الخاصة،أو حتى أن ندرج أكثر من امتداد في عبارة واحدة ، لأن ذلك يجعل المتصفح يُحمل كل الخطوط مما يعني ثقلاً على المستخدم، وبطء في تحميل وظهور الصفحة والخط ، وهذا أمر لا تريده على الاطلاق! لهذا توصل المطورون إلى أن أحسن تنسيق وترتيب لكود التضمين على صفحة style.css هو الشكل الذي أمامك بالضبط (الأن تكون قد عرفت ماذا كان يقصد المطور - Ethan - صاحب موقع Font Squirrel).

كيفية عمل هذا الترتيب

نجد الكود السابق يقوم أولاً بالبحث عن نسخة محلية Local من الخط لها اسم مشابة، فإن لم تتوفر يقوم بإستدعاء الخط المطلوب وعرضه مثلا متصفح فايرفوكس أو الكروم سيبدأ من أول سطر وبما أنه لا يدعم صيغة eot ينتقل للسطر التالي سيجد صيغة woff لذا سيتوقف هناك، بمعنى أنّه لن ينتقل للسطر الذي بعده،وهذا يعني تقليل من المساحة والوقت اللازمين لتحميل كل مكونات الصفحة المطلوبة. ، فالترتيب مهم حتى لو أدرجت خطاً أخر أو وزن عادي/Bold و سميك/Normal وأنت لا تستعمل في القالب إلا Normal ، فإن المتصفح لن يستدعي Bold. 

cancel

لايجب أن تستدعي أكثر من خط على قالب مدونتك لأن ذلك سيثقل مدونتك!!..لهذا جميع المطورين ينصحون بإستعمال خطين فقط ... ( واحد للعناوين ) و (الآخر للنصوص)

كيف نستدعي الخط؟

هذا سهل!!...ولنطبق المثال على نفس الكود المدرج وهو الخط المشهور عربي كوفي لكن أولا دعنا ننسق الكود فقبل استخدام خط الويب الخاص بمدونتك، الأحسن تنسيق خطوط المدونة بالخطوط الأساسية مثل arial أو tahoma وغيرها ، ثم بعد الانتهاء من ذلك قم بكتابة اسم خط الويب الرئيسي  قبلها في الترتيب ؛ وهذا حتى في حال تعطل خط الويب لأي سبب يكون التنسيق الأساسي هو الذي يتحكم بمظهر المدونة. و التنسيق كالتالي:

 font-family: 'Droid Arabic Kufi', arial, tahoma, serif; 

ملاحظة مهمة

إذا أردت جعل الخط على كامل القالب قم بوضعه داخل الوسم body{ أما إذا أردت جعل الخط على العناوين ضعه داخل الوسوم h1, h2, h3, h4{

في مايخص هذه المرحلة بقي عندي سؤال؟

لقد قمت بتحميل خط بصيغة TTF يعمل جيدا على الحاسوب بدون مشاكل  وقمت بتحويله إلى جميع الصيغ وقمت بضبط أكواد التضمين على الترتيب الصحيح وكذلك أعددت وسم الإستدعاء في كامل قالب مدونتي ...لكن بقى مشكل الرابط المباشر HotLink لجميع الصيغ التي حصلت عليها؟.
المشكل إذن في إيجاد موقع معتمد يوفر روابط مباشرة ...الجواب هو ان هذا المشكل كلنا نعاني منه ليس مع ملفات الخطوط فحسب والأغلب يعتمد على الإستضافات المدفوعة  ففي كل مرة نلاحظ تغيرات في سياسات المواقع التي تقدم خدمات إستدعاء الملفات وكما نعلم أن Google Code  قد تم إغلاق هذه الميزة ونفس السياسة تم تطبيقها مع google drive وكذلك موقع DropBox أما بالنسبة لــ Google Sites لازال يعمل لكن بمساحة محدودة لا تتعدى 200MB وحتى لو وجدت إستضافة جيدة  وحصلت على  الروابط المباشرة لصيغ الخط فسنواجه مشكلة أخرى وهي عدم عرض الخط على متصفح فاير فوكس!! 

مشكلة خطوط الويب مع FireFox

برغم من أن هذا المتصفح يعرض الخطوط بأدق جماليته تماما كمتصفح IE عكس متصفح كروم الذي لم يجد حلا إلى الآن سوى في صيغة SVG ولا أحد يريدها نظرا لحجمها الكبير ونطاقها المحصور نجد في المقابل أن المتصفح فاير فوكس يعاني مشكلتين كونه لايتعامل أصلا مع صيغة SVG هذه نقطة والأخرى لا تعتبر مشكلة بالمعنى الحرفي وإنما سياسة صارمة يطبقها فريق العمل على الخطوط المرفوعة بروابط مباشرة فالسياسة المطبقة لا تسمح باستخدام خطوط الويب إلا إذا كانت محفوظة في نفس الموقع الذي ستظهر فيه الخطوط. بتعبير آخر فيرفوكس يرفض عرض خطوط ويب في مدونتك لأنها محفوظة في موقع آخر...تدعى هذه السياسة  بـ تقاسم الموارد عبر المصدر  CORS و في موضوعنا هي منع استيراد الخطوط الخارجية.. هذا لأن مسؤولي هذا المتصفح مهتم بحقوق ملكية الخطوط  ! ، بالرغم من أن صاحب الموقع الذي يملك حق استخدام خط الويب يمكنه منع استخدام الخط ...فتجد الأغلبية القصوى التطرق إلى إرفاق ملف htaccess إلى ملفات الخط ليعطي تصريح  لنظام التحكم بتصاريح العبور للمواقع الخارجية بإستعمال هذا الخط بلا قيد أو شرط ومع ذلك ستواجه عائق أخر وهو إيجاد  الموقع المستضيف الذي يدعم خاصية اعطاء تصريح الربط أو العبور، و ربما تجد حتى الاستضافات المدفوعة قد لا تدعم هذه الخاصية مثل : ixwebhosting و استضافة أمازون . . . فعليك أن تتأكد من مزايا الاستضافة قبل استخدامها.
كما تلاحظ ...لقد دخلنا في دوامة مشاكل وعراقيل فماهو الحل أو على الأقل حل فعال ومرضي نسبيا امام هذه السياسات والقيود؟..طبعا الحل بواسطة تقنية سلسلة عناوين Data URLs
الظاهر أننا وصلنا إلى نقطة الصفر ولم أعمد المرور على كل تلك المراحل إلا لنعي قيمة وفعالية تقنية سلسلة عناوين Data URLs أو ترميز المحتوى ...وستلاحظ كم هي وسيلة فعالة خصوصا مع مشكلة المتصفح FireFox

كيف تتم عملية ترميز base64 وإعداد الملفات؟

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولة: إستعمال الترميز مع الخطوط

• بعد حصولك على صيغ الخط فقط تختار ملف واحد وهو صيغة WOFF ثم توجه إلى موقع dataurl.net ستقوم بالضغط على إختيار ملف Choose file  ثم تختار من على جهازك فقط ملف الخط الذي بصيغة WOFF وإنتظر قليلا ليظهر لك كود الترميز ستلاحظ أنه كبير الحجم وكما قلت سابقا هذا لا يعني شيئاً فقط حاول أن تختار خط ذو حجم صغير.
  cancel

  حذاري!!...لاتقم بتحويل جميع الصيغ ووضعها في قالبك فقط ملف الخط بصيغة WOFF ذلك لأن جميع المتصفحات الحديثة تدعم هذه الصيغة وثانيا هي الأصغر حجما من بين الصيغ  .
  

  
   @font-face {
    font-family: 'إسم الخط';
    src:  url(كود الخط) format('woff');
    font-weight: normal;
    font-style: normal;
  } 
  

  التعديل على الكود

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

  النمط المحدد بهذا اللون ضع مكان عبارة كود الخط ملف الخط بعد تحويله إلى سلسلة بصيغة base64

  النمط المحدد بهذا اللون هي أنماط التنسيق التي سبق شرحها.
• بعد ضبط الكود قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع الكود كامل ...ومبروك عليك.
  check_circle

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

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية: إستعمال الترميز مع الصور

تعليق:

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

• لاحظ هذا كود فارغ لتضمين صورة

  
   <a target='_blank' title='الوصف' href='رابط التوجية'><img src='رابط الصورة'/></a>  
  

• سنضيف الآن كود الترميز للصورة مكان الرابط تماما كما هو محدد باللون

  
   <a target='_blank' title='الوصف' href='رابط التوجية'><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAApCAYAAABDV7v1AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAF4SURBVHja7Na/S1dRGAfgb1iJEDSooYvgUEOmCEFiNPgfPC2NKZES6BCJg0NqQUsgrrUYuDgEGS0NQUMQGARBOihC0g9ag4ZCRbwub3CQcDG8NznDWT73DM/lvO97Tq0oitr/sGoZmqEZmqEZmqEZmqH7LXTgJkYxjBHcRnsloDiBu/iBDyiS9QLnSoeiDmOBuhfZLWzgF85X4ujRiC8BvZLkryN7kGRnMYDmMqBN+BSowSSfjWwyyYYi6y376D+jC8exHDXbnuy99i/K4aDN9DCw37GKdVyMH5nDO6xhG0tYxP2yxtPp6PICb1Af+Tim8QpbeIoZDBw6FN24jrfJaFpAY7LnBnZwqawanQrYCh7jEb5FNr+nRtfRXQZ0JEDP9+QX8DWapzWyZvTgVBnQ9wHt/8u3hajJtioM/D/zcgmXkylwFb/xEseqAD2DJ4H9iY8xnjbxDC2VeT3hJDrj5pnAHfShIb9HMzRDMzRDMzRDM/TIQncHAPw6Pk501GLGAAAAAElFTkSuQmCC'/></a>  
  

مافائدة هذا كله؟

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

للأمانة / ساعدنا بتزويد المعلومات مقال لمدونة بلوجر (جاسر الحربي)