20

تخفيض حجم ملفات الخطوط وتحسين جودتها

كما رأيت أول يوم، فإن موقع arabia.io يستخدم font awesome وهو خط يوفر مجموعة من الأيقونات للاستخدام،

حسب ما أظن فالموقع يستعمل ما بين 9~12 أيقونة إن لم أكن مخطأ، وبقية الأيقونات غير مستعملة،

فأجدها عبئا إضافيا، فحجم الخط هو 80 كيلو بايت، وحجم SVG هو 240 كيلو بايت، كما أنّ الأيقونات تظهر بشكل بشع في كروم الخاص بويندوز،

والأمل الوحيد لإصلاحها هو استعمال خط SVG في كروم، لكن هذا يعني 240 كيلو إضافية في التحميل،

فالحل الأنسب الذي أجده هو استعمال أحد الموقعين التاليين

وهي مواقع تقوم بتخصيص الخطوط، بحيث تستعمل ما تحتاجه فقط، بمعنى بدل 80 كيلو بايت للخط، ستستعمل 2 كيلو فحسب، و6 كيلو لل SVG

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

وبالنسبة لحل مشكلة كروم، فهي تكمن بتقديم خط SVG لها في media query تستهدفها لوحدها، يمعنى بهذا الشكل

@media screen and (-webkit-min-device-pixel-ratio:0)
{
    @font-face
    {
        font-family: 'font awesome';
        src: url('/fonts/fontawesome.svg#fontawesome') format('svg');
    }
}

وإضافة بقية الخطوط بشكل عادي قبل الميديا

ولا يجب استعمال خط SVG لوحده، لأن فايرفوكس لا يدعمه

وبالتوفيق

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

احسنت يا نذير: دراسة مكتملة وواضحة. اعجبتني حقاً وبما انك صاحب خبرة بودي ان اسألك.

هناك طريقتين لستخدام تلك الخطوط او حتى الخطوط النصية مثل الموجودة في Google fonts، اما بتحميلها على الخادم واستخدامها او بستخدام API، أي الطريقتين افضل؟ ولماذا؟

اتمنى ان يكون طرحي للسؤال صحيح.

بالنسبة للخطوط الخاصة بالأيقونات، في البداية أنا أجرب أن أستضيفها محليا، وأرفعها على السيفير فعليا، ثم أرى بواسطة فايرفوكس، فأحيانا هو لا يدعم استضافة الخط محليا فيوجد به مشاكل cross-domain وما يعنيه هذا هو أنك إذا استضفت الخطوط في الموقع a واستخدمتها في نفس الموقع، قد توجد هناك مشاكل، اقرء هذه النقاشات

لم أفهم ما تقصده ب API هل تقصد مثل تلك الموجودة في غوغل، بمعنى ربطها من السيفير وليس وضعها محليا

هناك حالات يفضل أن تربطها محليا، وحالات أخرى يفضل أن تستعمل API

مثلا فلنقل أنت تملك a وهو الموقع الأساسي والموقع b وهو الموقع التي تضع أنت عليه الخطوط،

في هذه الحالة لا يفضل أن تستضيفها على الموقع b لسببين وجيهين

الأول، قد لا يكون الموقع b معدا بشكل صحيح، أي أنّ CORS لا تكون معدة وتحدث مشاكل مع فايرفوكس، لتفهمها بشكل جيد، اقرء التالي

الثاني، وهو إن تعطل الموقع b فجأة وتوقف عن العمل، فسيتضرر الموقع a بسبب هذا لأن الخط لا يمكن الوصول له، في هذه الحالات، من الأفضل أن تستضيفه في موقعك، وليس على دومين فرعي أيضا، بل في نفس الموقع

الحالة التي يفضل أن تربط بها الملفات ب API

هذه الحالة تكون ضمن التالي، إذا كان الخط مستضافا على غوغل أو موقع خطوط آخر، هذه المواقع تستعمل CDN عالمي، مما يعني أن الملفات ستصل للمستخدم بشكل أسرع إذا أستضفتها على موقعك، واحتمال تعطلها ضئيل جدا أو معدوم (حتى إذا تعطل سيفير أو اثنين، يبقى هناك العديد)

وأيضا، هذه الخدمات تكون قد أعدت CORS بشكل صحيح مسبقا، وأنت لن تواجه مشاكل أبدا في هذا الشأن

خلاصة الكلام، إن كان الخط موجودا في خدمة غوغل، فاستعمله من هناك،

وإن لم يكن موجودا، فضعه محليا، ولا تنسى أن تضعه في نفس المستوى مع بقية ملفات الموقع، بمعنى في دومين واحد

وإذا كنت تملك وقت فراغ كبير، اقرء التالي فهو يشرح الأمر بشكل أوضح ربما

إضافة أخرى، أحيانا فايرفوكس لا يقبل الخط حتى من مواقع موثوقة،

لذا كخلاصة، إما غوغل، أو محليا، لا استضافات أخرى

إذا كنت تملك CDN لملفاتك، فحاول ضبطه بشكل صحيح

نقاش آخر

طبعاً طبعاً سوف اقراً شكراً لك على الاجابة الوافية ايضاً اشكرك من الأعماق