تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

استخدام أسلوب الخط المتقدم مع الخطوط المحلية

تعرّف على كيفية سماح واجهة برمجة تطبيقات Local Font Access API بالوصول إلى خطوط المستخدم المثبَّتة محليًا والحصول على تفاصيل منخفضة المستوى عنها.

Thomas Steiner

الخطوط الآمنة على الويب

إذا كنت تقوم بتطوير الويب منذ فترة كافية، فقد تتذكر ما يسمى الخطوط الآمنة على الويب: من المعروف أن هذه الخطوط متوفرة في جميع مثيلات أنظمة التشغيل تقريبًا (تحديدًا أنظمة التشغيل Windows وmacOS وأنظمة التشغيل Linux الأكثر شيوعًا وAndroid وiOS). في أوائل العقد الأول من القرن الحادي والعشرين، حتى أن Microsoft أطلقت المبادرة تسمى خطوط TrueType الأساسية للويب والتي توفر هذه الخطوط للتنزيل مجانًا باستخدام أنه "عندما تزور موقعًا إلكترونيًا يحددها، ستظهر لك الصفحات كما هي مصمم موقع الويب". نعم، تتضمّن هذه المواقع المواقع الإلكترونية التي تم ضبطها في Comic Sans MS: إليك حزمة خطوط كلاسيكية آمنة على الويب (مع أفضل بديل لأي sans-serif الخط) بهذا الشكل:

body {
  font-family: Helvetica, Arial, sans-serif;
}

خطوط الويب

انقضت فترة طويلة من الأيام التي كانت فيها الخطوط الآمنة على الويب مهمة. اليوم، لدينا خطوط الويب، وبعضها وحتى الخطوط المتغيرة التي يمكننا تعديلها بشكل أكبر من خلال تغيير قيم عدة محاور مكشوفة. يمكنك استخدام خطوط الويب عن طريق الإعلان @font-face في بداية خدمة مقارنة الأسعار (CSS) والذي يحدد ملفات الخطوط المطلوب تنزيلها:

@font-face {
  font-family: 'FlamboyantSansSerif';
  src: url('flamboyant.woff2');
}

بعد ذلك، يمكنك بعد ذلك استخدام خط الويب المخصص من خلال تحديد font-family، كالمعتاد:

body {
  font-family: 'FlamboyantSansSerif';
}

الخطوط المحلية كمتّجه لبصمة الإصبع

تأتي معظم خطوط الويب من الويب أيضًا. إلا أن هناك حقيقة مثيرة للاهتمام، وهي أن السمة src في @font-face تصريحًا، بغض النظر عن url() تقبل أيضًا الدالة local() الأخرى. يسمح هذا بتحميل الخطوط المخصصة (مفاجأة!) محليًا. إذا تصادف أن المستخدم لديه تثبيت FlamboyantSansSerif على نظام التشغيل لديهم، فسيتم استخدام النسخة المحلية بدلاً من الذي يتم تنزيله:

@font-face {
  font-family: 'FlamboyantSansSerif';
  src: local('FlamboyantSansSerif'), url('flamboyant.woff2');
}

يوفر هذا الأسلوب آلية احتياطية لطيفة من المحتمل أن توفر النطاق الترددي. على الإنترنت، للأسف، لا يمكننا الحصول على أشياء لطيفة. تكمن المشكلة في الدالة local() في إمكانية تتم إساءة استخدامه لوضع البصمات الرقمية في المتصفح. تبين أن قائمة الخطوط التي قام المستخدم بتثبيتها يمكن أن تكون جميلة التعريف. تمتلك الكثير من الشركات خطوط الشركة الخاصة بها والتي تم تثبيتها على حسابات الموظفين أجهزة كمبيوتر محمولة. على سبيل المثال، تستخدم Google خطًا للشركة باسم Google Sans.

تطبيق Font Book على نظام التشغيل macOS يعرض معاينة للخط في Google Sans. — خط Google Sans مثبّت على الكمبيوتر المحمول الخاص بموظف Google.

قد يحاول المهاجم تحديد الشركة التي يعمل بها الشخص عن طريق اختبار وجود وعدد كبير من خطوط الشركة المعروفة مثل Google Sans. سيحاول المهاجم عرض النص تعيين هذه الخطوط على لوحة وقياس الرموز الرسومية. إذا تطابقت الرموز الرسومية مع الشكل المعروف الشركة، تعرض المهاجم لضربة. إذا لم تتطابق الأحرف الرسومية، فإن المهاجم يعرف أن تم استخدام خط الاستبدال التلقائي نظرًا لعدم تثبيت خط الشركة. للحصول على التفاصيل الكاملة حول هذه الرسالة وغيرها من هجمات البصمات الرقمية على المتصفح، فاقرأ ورقة استبيان من قِبل Laperdix وآخرون

يمكن تحديد خطوط الشركة بشكل منفصل، حتى قائمة الخطوط المثبتة فقط. الموقف مع وقد أصبح متجه الهجوم سيئًا للغاية لدرجة أن فريق WebKit يقرر إلى "تضمين [في قائمة الخطوط المتاحة] فقط خطوط الويب والخطوط التي تأتي مع نظام التشغيل ، وليس الخطوط التي ثبّتها المستخدم على الجهاز". (وإليك مقالة حول منح إذن الوصول إلى الخطوط المحلية).

واجهة برمجة التطبيقات Local Font Access API

ربما وضعتك بداية هذه المقالة في مزاج سلبي. هل يمكننا حقًا التعرّف على الأشياء؟ لا داعي للقلق. نعتقد أنه يمكننا، وربما كل شيء غير مليء بالأمل. لكن أولاً، لأجيب عن سؤال تطرحه على نفسك.

لماذا نحتاج إلى واجهة برمجة تطبيقات Local Font Access API عند توفُّر خطوط ويب؟

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

تحتاج أدوات التصميم إلى الوصول إلى وحدات البايت الخاصة بالخطوط لتنفيذ تنسيق OpenType الخاص بها والسماح وأدوات التصميم لجذبها في مستويات أقل، لإجراءات مثل تنفيذ عوامل تصفية المتجهات أو يتحول على الأشكال الرسومية.
قد يكون لدى المطوّرين حزم خطوط قديمة لتطبيقاتهم التي يضيفونها إلى الويب. لاستخدام هذه الحزم، عادة ما تتطلب وصولاً مباشرًا إلى بيانات الخط، وهو شيء لا تستخدمه خطوط الويب التي تقدمها.
قد لا تكون بعض الخطوط مرخصة للتسليم عبر الويب. على سبيل المثال، لدى Linotype ترخيص بعض الخطوط التي تتضمن فقط استخدام الكمبيوتر المكتبي.

تهدف Local Font Access API إلى حل هذه التحديات. وهو يتألّف من جزأين:

font enumeration API التي تتيح للمستخدمين منح إذن الوصول إلى المجموعة الكاملة من الأنظمة المتاحة والخطوط.
من كل نتيجة تعداد، يمكن طلب حاوية SFNT منخفضة المستوى (موجهة نحو البايت) إذن الوصول الذي يتضمّن بيانات الخط الكاملة.

دعم المتصفح

المصدر

كيفية استخدام واجهة برمجة التطبيقات Local Font Access API

رصد الميزات

للتحقّق مما إذا كانت واجهة برمجة التطبيقات Local Font Access API متوافقة، استخدِم:

if ('queryLocalFonts' in window) {
  // The Local Font Access API is supported
}

تعداد الخطوط المحلية

للحصول على قائمة بالخطوط المثبَّتة محليًا، يجب الاتصال بـ window.queryLocalFonts(). تشير رسالة الأشكال البيانية للمرة الأولى، سيؤدي هذا إلى ظهور طلب للحصول على إذن يمكن للمستخدم الموافقة عليه أو رفضه. إذا كان المستخدم الموافقة على الاستعلام عن خطوطها المحلية، فسيعرض المتصفح صفيفًا ببيانات الخطوط يمكنك تكراره. يتم تمثيل كل خط ككائن FontData مع الخصائص family (على سبيل المثال، "Comic Sans MS")، fullName (على سبيل المثال، "Comic Sans MS")، postscriptName (على سبيل المثال، "ComicSansMS") مثل "ComicSansMS") وstyle (مثل "Regular").

// Query for all available fonts and log metadata.
try {
  const availableFonts = await window.queryLocalFonts();
  for (const fontData of availableFonts) {
    console.log(fontData.postscriptName);
    console.log(fontData.fullName);
    console.log(fontData.family);
    console.log(fontData.style);
  }
} catch (err) {
  console.error(err.name, err.message);
}

إذا كنت مهتمًا فقط بمجموعة فرعية من الخطوط، يمكنك أيضًا تصفيتها استنادًا إلى PostScript الأسماء عن طريق إضافة مَعلمة postscriptNames.

const availableFonts = await window.queryLocalFonts({
  postscriptNames: ['Verdana', 'Verdana-Bold', 'Verdana-Italic'],
});

الوصول إلى بيانات SFNT

يمكن الوصول بشكل كامل إلى SFNT من خلال طريقة blob() في الكائن FontData. SFNT هو تنسيق ملف خط يمكن أن يحتوي على خطوط أخرى، مثل PostScript، خطوط TrueType وOpenType وWeb Open Font Format (WOFF) وغير ذلك.

try {
  const availableFonts = await window.queryLocalFonts({
    postscriptNames: ['ComicSansMS'],
  });
  for (const fontData of availableFonts) {
    // `blob()` returns a Blob containing valid and complete
    // SFNT-wrapped font data.
    const sfnt = await fontData.blob();
    // Slice out only the bytes we need: the first 4 bytes are the SFNT
    // version info.
    // Spec: https://docs.microsoft.com/en-us/typography/opentype/spec/otff#organization-of-an-opentype-font
    const sfntVersion = await sfnt.slice(0, 4).text();

    let outlineFormat = 'UNKNOWN';
    switch (sfntVersion) {
      case '\x00\x01\x00\x00':
      case 'true':
      case 'typ1':
        outlineFormat = 'truetype';
        break;
      case 'OTTO':
        outlineFormat = 'cff';
        break;
    }
    console.log('Outline format:', outlineFormat);
  }
} catch (err) {
  console.error(err.name, err.message);
}

عرض توضيحي

يمكنك رؤية واجهة برمجة تطبيقات Local Font Access API وهي قيد الاستخدام في قسم العرض التوضيحي أدناه. تأكد أيضًا من الاطلاع على رمز المصدر. العرض التوضيحي تعرض عنصرًا مخصّصًا باسم <font-select> استخدام محدد خطوط محلي.

اعتبارات الخصوصية

يبدو أنّ إذن "local-fonts" يوفّر مساحة يمكن الوصول إليها ببصمة الإصبع بشكل كبير. ومع ذلك، فإن المتصفحات لها حرية عرض أي شيء يحبونه. على سبيل المثال، قد تختار المتصفحات التي تركز على إخفاء الهوية لتقديم مجموعة من الخطوط التلقائية المضمّنة في المتصفّح. وبالمثل، لا يلزم استخدام المتصفحات لتوفير بيانات الجدول تمامًا كما تظهر على القرص.

حيثما أمكن، صُممت واجهة برمجة تطبيقات Local Font Access API لكي تعرض المعلومات الدقيقة فقط. اللازمة لتفعيل حالات الاستخدام المذكورة. قد تنتج عن واجهات برمجة تطبيقات النظام قائمة بالخطوط المثبَّتة غير الموجودة في عشوائيًا أو بترتيب مصنف، ولكن بترتيب تثبيت الخط. بالعودة بالضبط إلى قائمة في حالة الخطوط المثبَّتة المقدمة من خلال واجهة برمجة تطبيقات النظام تلك، يمكن أن تكشف عن بيانات إضافية يمكن استخدامها البصمات الرقمية وحالات الاستخدام التي نريد تفعيلها لا يتم دعمها بالاحتفاظ بهذا الترتيب. نتيجة لذلك، أُنشئت مكتبة مات بلوت ليب في النتيجة، تتطلب واجهة برمجة التطبيقات هذه ترتيب البيانات التي تم إرجاعها قبل عرضها.

الأمان والأذونات

صمّم فريق Chrome واجهة برمجة التطبيقات Local Font Access API ونفّذها باستخدام المبادئ الأساسية. المحدد في التحكم في الوصول إلى ميزات النظام الأساسي للويب الفعالة، بما في ذلك حسابات والتحكم والشفافية وهندسة العمل.

تحكم المستخدم

ويكون الوصول إلى خطوط المستخدم تحت تحكمه بالكامل ولن يتم السماح به ما لم إذن "local-fonts"، كما هو موضّح في سجل الإذن، تم منحه.

الشفافية

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

استمرار الإذن

سيستمر منح إذن ""local-fonts"" بين عمليات إعادة تحميل الصفحات. ويمكن إلغاؤه من خلال معلومات الموقع الإلكتروني.

ملاحظات

يريد فريق Chrome معرفة المزيد عن تجاربك مع Local Font Access API.

أخبِرنا عن تصميم واجهة برمجة التطبيقات

هل هناك أي مشكلة في واجهة برمجة التطبيقات لا تعمل بالشكل الذي توقعته؟ أم أن هناك طرق مفقودة أو الخصائص التي تحتاج إليها لتنفيذ فكرتك؟ طرح سؤال أو تعليق بشأن الأمان النموذج؟ يُرجى الإبلاغ عن مشكلة في المواصفات حول مستودع GitHub ذي الصلة، أو إضافة أفكارك إلى مشكلة حالية.

الإبلاغ عن مشكلة في التنفيذ

هل واجهت مشكلة في التنفيذ في Chrome؟ أم أن التنفيذ يختلف عن المواصفات؟ يُرجى الإبلاغ عن الخطأ على new.crbug.com. تأكد من تضمين أكبر قدر ممكن من التفاصيل، تعليمات بسيطة لإعادة الإنتاج، وأدخل Blink>Storage>FontAccess في مربع المكونات. تعمل ميزة الخطأ بشكلٍ رائع لمشاركة النسخ المُعاد إنتاجها بسرعة وسهولة.

إظهار الدعم لواجهة برمجة التطبيقات

هل تخطّط لاستخدام واجهة برمجة تطبيقات Local Font Access API؟ يساعد دعمك العام فريق Chrome في تحقيق تحديد أولويات الميزات وإظهار لموردي المتصفحات الآخرين مدى أهمية دعمها.

إرسال تغريدة إلى @ChromiumDev باستخدام علامة التصنيف #LocalFontAccess والسماح معرفة مكان وكيفية استخدامك لها.

روابط مفيدة

شكر وتقدير

تم تعديل مواصفات Local Font Access API بواسطة إميل أ. إكلوند، أليكس راسل، Joshua Bell، و أوليفر يبتونغ. تمت مراجعة هذه المقالة بواسطة جو ميدلي، دومينيك روتشس أوليفر يبتونغ. صورة رئيسية بواسطة بريت جوردان إزالة البداية