التحميل المسبق @ خطوط وجه الخط؟

Question

هل من الممكن التحميل المسبقي أو ذاكرة التخزين المؤقت على خلاف ذلك @ font-fonts fonts، على الأرجح مع جافا سكريبت، قبل تحميل الصفحة حتى لا تحصل على القفز القبيح عند تحميل الصفحة أخيرا؟

Answer 1

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

Answer 2

تقنية بسيطة هي وضع هذا في مكان ما في الفهرس الخاص بك:

<div class="font_preload" style="opacity: 0">
    <span style="font-family: 'myfontface#1font-family', Arial, sans-serif;"></span>
    <span style="font-family: 'myfontface#2font-family', Arial, sans-serif;"></span>
    ...
</div>

تم اختباره على Chrome 34، Safari 7 و FF 29 و IE 11

Answer 3

هناك بعض التقنيات ل "التحميل المسبق" هنا:http://paulirish.com/2009/fighting-the-font-face-fout/

يخدع معظمهم المتصفح في تنزيل الملف بأسرع وقت ممكن ..

يمكنك أيضا تسليمها كبيانات URI، مما يساعد كثيرا. وأيضا يمكنك إخفاء محتوى الصفحة وإظهاره عند استعداده.

Answer 4

2017: لديك الآن التحميل المسبق

MDN: تتيح لك قيمة التحميل المسبق لعنة Element's إرسال طلبات الجلب التصريحي في HTML الخاص بك، وتحديد الموارد التي ستحتاجها صفحاتك بعد فترة وجيزة من التحميل، والتي تريد أن تبدأ التحميل مسبقا في وقت مبكر في دورة حياة تحميل الصفحة بدأت آلات التقديم الرئيسية للمتصفح. هذا يضمن أن تكون متاحة في وقت سابق وأقل عرضة لمنع أول تقدم الصفحة، مما يؤدي إلى تحسينات الأداء.

<link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" />

الشيك التوافق المتصفح.

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

يتم مناقشة التقنيات الأخرى للمحترفين / سلبيات هنا (وليس مدونتي).

Answer 5

الخط الصحيح ما قبل التحميل هو ثقب كبير في مواصفات HTML5. لقد ذهبت من خلال كل هذه الأشياء والحل الأكثر موثوقية التي وجدتها هي استخدام font.js:

http://pomax.nihongoresources.com/pages/font.js/

يمكنك استخدامه لتحميل الخطوط باستخدام نفس API الذي تستخدمه لتحميل الصور

var anyFont = new Font();
anyFont.src = "fonts/fileName.otf";
anyFont.onload = function () {
  console.log("font loaded");
}

إنه أكثر بساطة وأكثر خفيفة الوزن من Google Hulking WebFont Loader

إليك Repo GitHub for font.js:

https://github.com/pomax/font.js.

Answer 6

هذه يجب حل مشكلتك.

للإجابة على سؤالك الأولي: نعم يمكنك ذلك. وبعد فقط Gecko ومتصفحات WebKit تدعمها حاليا.
تحتاج فقط إلى إضافة علامات الرابط في رأسك:

<link rel="prefetch" href="pathto/font">
<link rel="prerender" href="pathto/page">

Answer 7

عبر جوجل WebFontload.

var fontDownloadCount = 0;
WebFont.load({
    custom: {
        families: ['fontfamily1', 'fontfamily2']
    },
    fontinactive: function() {
        fontDownloadCount++;
        if (fontDownloadCount == 2) {
            // all fonts have been loaded and now you can do what you want
        }
    }
});

Answer 8

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

على سبيل المثال

<p>normal text from within page here and then followed by:
<span style="font-family:'Arial Rounded Bold'; color:transparent;">t</span>
</p>

Answer 9

استخدام المعيار CSS لخط تحميل API.

أنتظر لأجل (الكل) الخطوط للتحميل، ثم إظهار المحتوى الخاص بك:

document.fonts.ready.then((fontFaceSet) => {
    console.log(fontFaceSet.size, 'FontFaces loaded.');
    document.getElementById('waitScreen').style.display = 'none';
});

Codepen التجريبي.

Answer 10

كنت في الآونة الأخيرة كنت أعمل على لعبة متوافقة مع Cocoonjs مع DOM محدودة لعنصر قماش - هنا هو نهجي:

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

لقد شرحت هذه التقنية أكثر قليلا في مقالتي الأخيرة http://rezoner.net/preloading-font-font-face-using-canvas، 686.

Answer 11

Google لديها مكتبة لطيفة لهذا: https:/developers.google.com/webfonts/docs/webfont_loader.يمكنك استخدام أي خطوط تقريبا وسوف تضيف LIB فئات إلى علامة HTML.

حتى أنه يمنحك أحداث JavaScript عند تحميل خطوط Certrain ونشطة!

لا تنسى خدمة Fontfiles Gzpeced! سيكون بالتأكيد تسريع الأمور!

Answer 12

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

<link href="fonts.css?family=Open+Sans" rel="preload stylesheet" as="style">

ثم في ملف Font.css، حدد على النحو التالي.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('open-sans-v16-latin-regular.woff2') format('woff2'); /*  Super Modern Browsers */
}

لا يمكنك تعيين اسم للخطوط عند تحميله مسبقا من خلال علامة الرابط (تصحيحني إذا كنت مخطئا، لم أتمكن من العثور على طريقة حتى الآن)، وبالتالي عليك استخدام Font-Face لتعيين الاسم إلى الخط. على الرغم من أنه من الممكن تحميل الخط من خلال علامة الارتباط، فلا ينصح أنه لا يمكنك تعيين اسم إلى الخط معه. بدون اسم كما هو الحال مع Font-Face، لن تتمكن من استخدامه في أي مكان في صفحة الويب. وفقا ل GTMetrix، يتم تحميل ورقة النمط في البداية، ثم بقية البرامج النصية / النمط حسب الطلب، ثم يتم تحميل الخط قبل تحميل DOM، وبالتالي لا ترى تأثير تغيير الخط.

Answer 13

يجب أن يتضمن رأسك التحميل المسبق REL كما يلي:

<head>
    ...
    <link rel="preload" as="font" href="/somefolder/font-one.woff2">
    <link rel="preload" as="font" href="/somefolder/font-two.woff2">
</head>

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

@font-face {
    font-family: FontOne;
    src: url(../somefolder/font-one.eot);
    src: url(../somefolder/font-one.eot?#iefix) format('embedded-opentype'),
    url(../somefolder/font-one.woff2) format('woff2'), //Will be preloaded
    url(../somefolder/font-one.woff) format('woff'),
    url(../somefolder/font-one.ttf)  format('truetype'),
    url(../somefolder/font-one.svg#svgFontName) format('svg'); 
}
@font-face {
    font-family: FontTwo;
    src: url(../somefolder/font-two.eot);
    src: url(../somefolder/font-two.eot?#iefix) format('embedded-opentype'),
    url(../somefolder/font-two.woff2) format('woff2'), //Will be preloaded
    url(../somefolder/font-two.woff) format('woff'),
    url(../somefolder/font-two.ttf)  format('truetype'),
    url(../somefolder/font-two.svg#svgFontName) format('svg');
}