تحديد المشاكل وحلّها

عنوان الاستجابة لمشاركة الموارد المشتركة المنشأ (CORS) مشترك

المتصفحات:

• Firefox (الإصدار 3.5 أو الأحدث)
• Internet Explorer (أكثر من 9)
• Chrome (37+)

نظرة عامة

يعمل Chrome وFirefox والإصدارات الأحدث من Internet Explorer على فرض معيار مشاركة الموارد المشتركة المنشأ، وبالتالي عرض خطوط الويب فقط التي يتم عرضها مع رأس الاستجابة "Access-Control-Allow-Origin". ونظرًا لاحتمال عرض خطوط Google على أي نطاق، يتم عرض الخطوط مع عنوان الاستجابة التالي:

Access-Control-Allow-Origin:*

السبب المحتمل

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

التشخيص

باستخدام Chrome، تحقق من رسالة التحذير ذات الصلة في وحدة تحكم DevTools.

في متصفح Firefox، يمكن استخدام إحدى إضافات Firebug أو Live HTTP Headers لعرض عناوين الاستجابة لتأكيد وجود عنوان استجابة CORS.

الروابط

• https://developer.mozilla.org/En/HTTP_access_control
• https://www.w3.org/TR/cors/

عدم ظهور خطوط الويب على Firefox عند تثبيت المكوّن الإضافي NoScript

المتصفحات: * Firefox (3.5+)

نظرة عامة

لا يعرض Firefox خطوط الويب عند تثبيت المكوّن الإضافي NoScript.

السبب المحتمل

بشكل تلقائي، يوقف مكوّن NoScript الإضافي قواعد @font-face.

الحل

افتح "خيارات NoScript"، وانتقِل إلى علامة التبويب "تضمينات" وأزِل العلامة من المربّع: Forbid @font-face

خطوط الويب لا تظهر

في المتصفحات: * الكل

نظرة عامة

لا تظهر خطوط الويب المستخدمة.

السبب المحتمل

هناك خطأ في عنوان URL لواجهة برمجة التطبيقات أو تم طلب نمط غير متوافق مع الخط.

الحل

تأكّد من تنسيق عنوان URL بشكل صحيح، مع احترام حالة الأحرف في اسم الخط (مثل Droid Serif وليس droid serif)، ومن أنه تتم مراعاة بنية الوزن والأنماط بالإضافة إلى بنية تحميل مجموعات متعددة (اطّلِع على المستندات: البدء - البنية. وعند عدم ظهور الخطوط، يمكن أن يوفر النظر إلى محتوى ورقة الأنماط مزيدًا من المعلومات حول المشكلة التي تحدث. انسخ عنوان URL والصقه في المتصفح وتأكّد من عدم ظهور أي رسالة خطأ. على سبيل المثال، سيؤدي طلب وزن غير متوافق مع Droid Serif إلى عرض رسالة الخطأ التالية:

/* Droid Serif (style: normal, weight: 300) is not available */
/* However, style: normal, weight: normal is available */
/* However, style: italic, weight: normal is available */
/* However, style: normal, weight: bold is available */
/* However, style: italic, weight: bold is available */
/* Not supported. */

تبدو خطوط الويب أكثر كثافة عند استخدامها في عنوان

في المتصفحات: * الكل

نظرة عامة

تبدو الخطوط أكثر كثافة عند استخدامها في عنوان العنوان (h1، h2، إلخ) على الرغم من أن الخط عادي (400).

السبب المحتمل

حدّد المتصفح النص تلقائيًا.

الحل

تأكد من تحديد كثافة الخط الصحيحة في قاعدة CSS عند تطبيق خط على عنوان:

h1 {
 font-family: Lobster, cursive;
 font-weight: 400;
}