يوفر هذا المستند بعض المعلومات الفنية حول ما يحدث خلف الكواليس عند طلب خط ويب باستخدام Google Fonts API.
يقدّم هذا المستند أيضًا معلومات حول السلوك المحدّد للمتصفح.
إذا كنت تريد استخدام Fonts API فقط، لن تحتاج إلى قراءة هذه الصفحة. وعلى الرغم من ذلك، قد تساعدك قراءة هذه الصفحة على تحسين أداء تحميل الصفحة.
ما هي واجهة Google Fonts API؟
عندما يرسل المتصفّح طلبًا للحصول على ورقة أنماط واجهة برمجة تطبيقات Fonts (كما هو محدّد في علامة <link> في صفحة الويب)، تعرض واجهة برمجة تطبيقات Fonts ورقة أنماط تم إنشاؤها لوكيل المستخدم المحدّد الذي يقدّم الطلب.
على سبيل المثال، يؤدي طلب 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.