استبدال خط كوفون: كيف يمكنني القضاء على فلاش النص غير المألوف الذي يحدث عند تحميل الصفحة؟

https://stackoverflow.com/questions/1884145

19-09-2019
|

سؤال

أنا أستخدم Cufon لاستبدال خط عناصر العناوين المختارة على موقع أعمل عليه، ولكن كلما قمت بتحميل صفحة، فهناك فلاش ملحوظ لنص غير مؤكد قبل استبدال Cufon بالنص. أتوقع أنني قد أفعل ذلك خطأ. إليك ما لدي في <head>:

<script src="/js/Monotype_Corsiva_italic_400.font.js"></script>
<script src="/js/PalatinoBoldum_700.font.js"></script>
<script>
Cufon.replace('header h1', { fontFamily: 'Monotype Corsiva' });
Cufon.replace('header h2', { fontFamily: 'Monotype Corsiva' });
Cufon.replace('aside h1', { fontFamily: 'Monotype Corsiva' });
Cufon.replace('#site-info h1', { fontFamily: 'Monotype Corsiva' });
Cufon.replace('abbr[title="My Abbreviation"]', { fontFamily: 'PalatinoBoldum' });
</script>

وإليك ما لدي في نهاية وثني:

<script>
// !Cufon: replace the fonts
// --------------------------------------------
Cufon.now();
// !Track & analyze stats
// --------------------------------------------
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
// Google analytics stuff...
</script> <!-- EO Tracking -->
</body>
</html>

ما الخطأ الذي افعله؟ شكرا مقدما!

المحلول

يعرض المتصفح الصفحة بأكملها (باستخدام التقديم النصي القياسي المحدد في ورقة الأنماط الخاصة بك)، ثم يعود البرنامج النصي Cufon ويستبدله. نظرا للطريقة التي تجعل المستعرضات تجعل الصفحات، وحقيقة أن الحرائق البرنامج النصي بعد الحدث الذي يقوم بتحميل الصفحة، لا توجد طريقة جيدة لتجنب الفلاش اللحظي للنص غير المشبي.

قلت أي طريقة "جيدة" ... هناك طرق سيئة للقيام بذلك، مثل إخفاء النص الذي سيتم استبداله ب CSS في STYLESHEET الرئيسي، ولكن هذا سيء للغاية لسهولة الوصول و / أو الأشخاص الذين تحولوا من البرامج النصية / الفلاش إيقاف.

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

تعديل:

تحتوي المدونة ال 24 Ways على مقالة عن استخدام بيانات البيانات مع إعلان Font-Font-Fold-Face CLIS لتجنب "فلاش النص غير المطلوب". أساسا، قمت بتضمين بيانات الخط مباشرة في ورقة الأنماط.

في حين أنها ليست جميلة، إلا أنها تعني تحميل الخط مع CSS وهو جاهز للاستخدام على الفور. @ Font-Foler يدعم حاليا من قبل Safari و Firefox، وسيتم دعمه في Chrome 4 (الذي يقترب). IE Support يقتصر على تنسيق EOT الخاص ب Microsoft، لذلك أحسب ذلك "غير مدعوم".

تحقق من ذلك: كيفية استخدام URIS البيانات لتجنب فلاش النص غير المطلوب

نصائح أخرى

اعتقدت أن أضيف هذا للشخص التالي الذي يبحث عن إجابة لهذه المشكلة كما يبدو أنها حل المشكلة تماما.

.cufon-loading { visibility: hidden; }

سيقوم CSS أعلاه بإخفاء النص العادي الذي يستبدله كوفون قبل الأحمال Cufon.

إن إخفاء العناوين باستخدام رؤية CSS غير مستحسن لأسباب مذكورة أعلاه. IE8 لديها أيضا مشكلة في تقديم نص كوف عندما تكون مخفية ...

البديل هو ببساطة نقل نص العنوان إلى يسار الشاشة أثناء تقديمها، باستخدام قيمة كبيرة سالغة "من النص السلبي".

تحتاج إلى نقل البلقات قبالة الشاشة باستخدام إما CSS القياسية داخل الرأس، أو إذا كنت قلقا من إخفاء النص من الأشخاص الذين ليس لديهم تمكين JS، فيمكن تعيين CSS باستخدام JQuery.

على سبيل المثال '#id {text-indent: -9999px؛ "
ثم ضع رمز استبدال كوفون الخاص بك قبل وضع علامة هيئة النهاية، داخل مجموعة من علامات البرنامج النصي
إضافة مكالمة إلى cufon.Now ()؛
باستخدام طريقة JQuery .css ()، إحضار العناوين مرة أخرى إلى عرض عن طريق تعيين مسافة بادئة نصية من 0

على سبيل المثال $ ('# ID'). CSS ("النص المسافة البادئة"، '0')؛

تعديل:

يبدو أنه يجب تعيين المسافة البادئة السلبية الأولية، مع CSS (بدلا من jQuery) لأن الصفحة تحتاج إلى تحميلها بالكامل قبل استدعاء رمز مسج.

الخطر في وضع المسافة البادئة عبر CSS، هو أن الأشخاص الذين لديهم إيقاف تشغيل JS، لن يحصلوا على العناوين على الإطلاق.

إذا وجدت حل معقول، فسوف نشره هنا.

يمكنك استخدام JS لإدراج قاعدة نمط لإخفاء نص Cufon'd قبل تحميل الجسم ...

<html>
  <head> ... </head>
  <body>
    <script> // put this at the beginning of the body

      (function(){
        var i = document.styleSheets.length,
            s = document.createElement('style');
        document.head.appendChild(s);
        document.styleSheets[i].addRule(
          'h1,h2,h3,h4,h5,h6',
          'text-indent:-9999px'
        );
      }());

    </script>

    ...

  </body>
</html>

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow