الصفحة الرئيسية>موارد بناء الموقع>تحميل الخط
تنزيل
الرابط الثابت
/index.html

موقع الويب (صفحات GIT)

خطوط استضافة الذات

يستخدم الكثير منا خطوط Google عبر CDN. ومع ذلك ، قررت ألمانيا أن هذا الناتج المحلي الإجمالي يتعارض ، مما يترك مالكي الموقع مفتوحين للتقاضي.

لا يزال بإمكاننا عرض خطوط Google بواسطة:

  1. تنزيل الخط (المتغيرات) من خطوط Google ، ثم
  2. تحويل ملفات .ttf إلى .woff و .woff2 باستخدام مولد خط ويب ، ثم
  3. باستخدام @font-face في CSS و
  4. مسبق الخطوط في HTML.

ملاحظة : تركز هذه الصفحة على خطوط Google ، ولكن نفس المبادئ تنطبق على أي نوع آخر من خط الويب.

مولدات خط الويب

Font Squirrel عمل هذا في "Roboto" لكنه فشل في إصدارات الخط الثابت لكل من "Lato" و "Open Sans".

Creative Fabrica لقد استخدمت هذا للملفات الثابتة "Lato" و "Open Sans". اضطررت إلى تحميل كل متغير ، واحد في وقت واحد.

HTML

تم إخباري بتحميل الخطوط الموجودة في رأس صفحة HTML. من المفترض أن يؤدي ذلك إلى تسريع تسليم الخطوط وزيادة أداء Google Core Web Obstals (CWVS). ومع ذلك ، رأيت تحذيرات بعد القيام بذلك (انظر اختبار/Firefox و Firefox Developer Edition ، أدناه). 

 < head >
  < link
    rel =" preload "
    href =" roboto-light-webfont.woff2 "
    as =" font "
    type =" font/woff2 "
    crossorigin =" anonymous "
  />
  < link
    rel =" preload "
    href =" roboto-regular-webfont.woff2 "
    as =" font "
    type =" font/woff2 "
    crossorigin =" anonymous "
  />
  < link
    rel =" preload "
    href =" roboto-medium-webfont.woff2 "
    as =" font "
    type =" font/woff2 "
    crossorigin =" anonymous "
  />
  ...
  <!-- CSS file comes after preload -->
</ head >

CSS 

 @font-face {
  font-family : "Roboto" ;
  font-weight : 300 ;
  src : url ( "roboto-light-webfont.woff2" ) format ( "woff2" ) , url ( "roboto-light-webfont.woff" )
      format ( "woff" );
}
/** Regular: 400 **/
@font-face {
  font-family : "Roboto" ;
  font-weight : 400 ;
  src : url ( "roboto-regular-webfont.woff2" ) format ( "woff2" ) , url ( "roboto-regular-webfont.woff" )
      format ( "woff" );
}
/** Medium: 500 **/
@font-face {
  font-family : "Roboto" ;
  font-weight : 500 ;
  src : url ( "roboto-medium-webfont.woff2" ) format ( "woff2" ) , url ( "roboto-medium-webfont.woff" )
      format ( "woff" );
}

الاختبار

  • تم اختباره في:
  • Windows 10
  • الكروم
  • Firefox ، إصدار مطور Firefox
    • ملحوظة . تم عرض التحذيرات في لوحات المفاتيح لهذين المتصفحين فقط. كانت التحذيرات من نوعين:
    1. تم إجبار التصميم قبل تحميل الصفحة بالكامل. إذا لم يتم تحميل أوراق الأنماط بعد ، فقد يتسبب ذلك في حدوث وميض من المحتوى غير المتواصل.
    2. كانت التحذيرات الأخرى لكل متغير خط ، وحدثت بعد حوالي 10 ثوان ، على سبيل المثال "لاتو":
    • لم يتم استخدام المورد في "https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-light-webfont.woff2" مع التحميل المسبق للربط في غضون بضع ثوان. تأكد من تعيين جميع سمات علامة التحميل المسبق بشكل صحيح.
    • لم يتم استخدام المورد في "https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-regular-webfont.woff2" مع التحميل المسبق للربط في غضون بضع ثوان. تأكد من تعيين جميع سمات علامة التحميل المسبق بشكل صحيح.
    • لم يتم استخدام المورد في "https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-bold-webfont.woff2" مع التحميل المسبق للربط في غضون بضع ثوان. تأكد من تعيين جميع سمات علامة التحميل المسبق بشكل صحيح.
    • المناقشة والبحث على مكدس Overflow لم تسفر عن إجابة مفهومة. ومع ذلك ، لقد نشرت سؤالاً بنفسي على سعة مكدس ، وإذا تم الرد عليه ، فسوف أقوم بتحديث هذا readme.md بأي معلومات جديدة.
  • Microsoft Edge

شكر وتقدير

جاء الجزء الأكبر من المعلومات من خطوط الاستضافة الذاتية الموضحة (بما في ذلك خطوط Google) // @font-face التعليمية (YouTube). ظهرت معلومات عن التحميل المسبق/CWVs ، والامتثال غير الناتج المحلي من مؤشر ترابط التعليقات على نفس الصفحة.

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