كيفية معرفة عندما @الخط وجه القاعدة يتم تطبيقها

Question

هل هناك أي طريقة لمعرفة عندما @الخط وجه القاعدة يتم تطبيقها ؟ أنا خلق @font-face قواعد استخدام البيانات:محددات من ملف الخط المطلوب مع متزامن مدعوم في جافا سكريبت ثم كتابة النص إلى عنصر قماش باستخدام الخط على الفور.الشيء هو أنه في الواقع لا تستخدم الخط عند وضع النص لأول بضع ميلي ثانية.بلدي الحالي هو الحل لمنع تنفيذ أجزاء قليلة من الثانية عن طريق إرسال متزامن مدعوم الذي حل رهيب.

أنا لا يمكن أن تجعل هذا غير متزامن كما يتم تنفيذ تجهيز's loadFont() وظيفة ، وهو متزامن ، Processing.js.

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

Answer 1

والجواب باختصار: المتصفحات ليست جيدة بما فيه الكفاية حتى الآن دعونا اختبار ل "محملة وجاهزة للاستخدام" في الواقع دون باستخدام الخط والتحقق من ذلك

.

والإجابة الطويلة: نقابة الصحفيين الفلسطينيين يأتي مع المدمج في المصادقة على الخط لتحميلها مسبقا الخط (المتعلقة HTTPS: // جيثب كوم / pomax / font.js ) ولكن كما كنت أشير، والتي لا تعمل مع قواعد @ الخط وجها التي تستخدم بيانات أوري. والحل الذي أود أن أقترح (على الرغم من أنني كنت لم يحاكم هذا بعد. أنا مجرد تخمين انه سوف يعمل على أساس عملي على Processing.js وتحميل الخط في المتصفحات) هو استخدام اثنين PGraphic أفسكرين مخازن. جعلها على حد سواء خلفية بيضاء مع نص ملء الأسود، والقيام النص ( "X"، 0،0) في المخزن المؤقت الأول، ثم بعد تحميل الخط الخاص بك، واستخدام المخزن المؤقت الثاني لأداء نفس النص ( "X"، 0، 0 ") الاستيلاء على بكسل [] لكل العازلة، والقيام جنبا إلى جنب مقارنة:

boolean verifyFontLoad() {
  buffer1.loadPixels();
  buffer2.loadPixels();
  for (int i=0; i<buffer1.pixels.length; i++) {
    if (buffer1.pixels[i] != buffer2.pixels[i]) {
      return false; }}
  return true;
}

وعند تحميل الخط الخاص بك، لديها منطقية تتبع مكان ما يشير إلى حالة تحميل الخط، intiliased إلى "false"، وبعد تحميل الخط الخاص بك، في بداية التعادل () دعوة

void draw() {
  // code that does not rely on your font
  [...]

  // check state
  if(!fontLoaded) { fontLoaded = verifyFontLoaded(); }
  // not ready? "stop" drawing.
  if(!fontLoaded) { return; }
  // font ready. run code that relies on the font being ready
  else {
    // code that depends on your font being available goes here.
  }
}

والآن على الأقل يمكنك تجنب الإطارات القليلة الأولى حيث انتهى المتصفح تفريغ الخط البيانات أوري بك وتعبئته كمصدر @ الخط وجه، ولكن لم يكن له الوقت لنقله إلى النظام تقديم Canvas2D حتى الان.

و(أن التصميم عنصر DOM في هذه المرحلة مع الخط تعمل في الواقع على ما يرام، هو الحصول على الواقع تسليمه إلى Canvas2D أن يسبب ذلك أن لا تكون قابلة للاستخدام واحد أو أكثر من لقطة)

Answer 2

حتى ولو كنت لا تفضل البعد تحقق هذا هو كيف Modernizr @الخط وجه ميزة الكشف عن أعمال قد تكون أفضل طريقة:

Modernizr يضمن الخط صغيرة الصورة الرمزية استخدام البيانات:URI.في هذا واحد ""حرف هو خلق ؛ ومن ثم تطبيق مؤقت العنصر الذي innerHTML هو '........' و الذي عرض قياس الأولى مع الأساسية الخط الرقيق ثم مع خط مخصص تطبيقها.إذا كان العرض هو مختلفة, نحن نعرف المتصفح أصدرت الخط الجديد ونحن البيانات الموردة.