يقدّم هذا المستند بعض المعلومات الفنية حول أسباب الكواليس عند طلب خط ويب باستخدام Google Fonts API.
يقدّم هذا المستند أيضًا معلومات حول السلوك الخاص بكل متصفّح.
إذا أردت استخدام Fonts API فقط، لن تحتاج إلى قراءة هذه الصفحة. ومع ذلك، قد تساعدك قراءة هذه الصفحة في تحسين أداء تحميل الصفحات.
ما الذي يتم عرضه عبر Google Fonts API؟
عندما يرسل أحد المتصفحات طلبًا للحصول على ورقة أنماط Fonts API (كما هو محدَّد في
<link> في صفحتك على الويب)، ستعرض Fonts API ورقة أنماط تم إنشاؤها
وكيل المستخدم المحدد الذي يقدم الطلب.
على سبيل المثال، يؤدي طلب Inconsolata من Firefox إلى عرض CSS التالية:
@font-face {
font-family: 'Inconsolata';
src: local('Inconsolata'), url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw') format('truetype');
}
ومن ناحية أخرى، فإن الطلب من Internet Explorer يعرض ما يلي:
@font-face {
font-family: 'Inconsolata';
src: url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw');
}
بعد تنزيل صفحات الأنماط المتتالية (CSS)، ينزّل المتصفح الخط بالشكل المناسب المتصفح.
السلوك الخاص بالمتصفح
يصف هذا القسم السلوك الافتراضي لكل متصفح مع خطوط الويب. لاحظ أن يمكنك التحكم في هذه السلوكيات باستخدام أداة تحميل خطوط الويب
للحصول على قائمة بالمتصفّحات المتوافقة، يُرجى مراجعة الأسئلة الشائعة:
متصفح Google Chrome
يعرض Chrome بقية محتوى الصفحة، ولكن إلى أن يتم تحميل الخط، يتم عرض مساحة فارغة بدلاً من النص الذي يستخدم الخط.
Mozilla Firefox
يعرض Firefox أولاً النص بالخط التلقائي، ثم يعيد عرض النص الخط بمجرد تحميله. يُعرف هذا السلوك باسم "وميض غير ذي نمط النص".
Apple Safari
يعرض Safari بقية الصفحة، ولكن إلى أن يتم تحميل الخط، سيتم مساحة فارغة بدلاً من النص الذي يستخدم الخط.
برنامج المتصفح Microsoft Internet Explorer
يعرض Internet Explorer بقية الصفحة، ولكن حتى يتم تحميل الخط، ويعرض مساحة فارغة بدلاً من النص الذي يستخدم الخط.
وبشكل عام، قد يختلف سلوك متصفح Internet Explorer حسب موضع الإعلان ووجود عناصر مختلفة. إذا أردت تقديم سلوك متّسق في جميع المتصفحات، استخدِم أداة تحميل خطوط الويب. بالنسبة على سبيل المثال، يمكنك اختيار جعل جميع المتصفحات تعمل مثل Firefox.