@font-face src: local - ضمان استخدام الخطوط المحلية

يتناول هذا السؤال مشكلة كيفية منع المتصفحات من تنزيل الخطوط التي تم تثبيتها بالفعل على نظام المستخدم عند استخدام قاعدة @font-face.

يستخدم ملف CSS الموجود في السؤال الصيغة الموصى بها بواسطة Font Squirrel. ومع ذلك، تستمر المشكلة في Chromium، مما يشير إلى مشكلة خاصة بالمتصفح.

يكمن الحل في الاستفادة من الكلمة الأساسية "local()" لتحديد أولويات ملفات الخطوط المحلية. من خلال تعديل خاصية src كما هو موضح أدناه، سيحاول المتصفح أولاً تحميل الخط من النظام المحلي:

src: local('DejaVu Serif'), url('DejaVuSerif-webfont.woff') format('woff'), url('DejaVuSerif-webfont.ttf') format('truetype'), url('DejaVuSerif-webfont.svg#webfontCFu7RF0I') format('svg');

في هذا يضمن الكود المعدل، 'local('DejaVu Serif')' أن يقوم Chromium بالتحقق من خط DejaVu Serif المثبت على نظام المستخدم قبل محاولة تنزيله من الويب.

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