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

بعد قراءة بضعة أسطر أدناه ، ستستخدم “@ font-face” و CSS الصحيحين اللذين سيعملان عبر المتصفحات بشكل صحيح.

سيبدو موقع الويب الخاص بك ويعمل كما ينبغي عبر الأجهزة.

ما هي وجوه الخطوط؟

سأفترض أنك تعرف هذا بالفعل ، وإلا فلن تقرأ هذه المقالة.

ومع ذلك ، من أجل الحصول على المعلومات ، يسمح “@ font-face” بتضمين خطوط معينة على موقع ويب دون الحاجة إلى الاعتماد على المستخدم البعيد بتثبيتها على نظامه.

أنواع الخطوط المتاحة هي: “.woff” و “.woff2” و “.ttf” و “.otf” و “.eot” و “.svg”.

  • .woff stands for Web Open Font Format
  • .woff2 stands for WOFF 2.0 - Web Open Font Format
  • .ttf, .otf stands for TTF/OTF - TrueType and OpenType
  • .eot stands for EOT - Embedded OpenType
  • .svg stands for SVG fonts

يحتوي كل متصفح على دعم “خاص به” لهذه الأنواع (للأسف) ، لذلك تحتاج إلى حساب ذلك.

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

كيفية استخدام Font Face بشكل صحيح؟

هذا هو الجزء الصعب ، لأنه إذا بحثت في Google عن هذا الأمر ، فلن تظهر لك أفضل مواقع الويب الحقيقة القاسية.

كما هو مذكور أعلاه ، يحتوي كل متصفح على دعمه الخاص للخطوط ، وإذا كنت تريد أن يعمل خطك على كل متصفح </ u> ، فيجب عليك تحميل أنواع الخطوط الضرورية وضبط CSS بشكل متوافق.

على سبيل المثال ، إذا قمنا بتسجيل الخروج من Mozilla ، فستلاحظ ما يلي:

1@font-face {
2  font-family: "Open Sans";
3  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
4       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
5}

هل هذا كافي؟ لا ، لن يعمل في جميع المتصفحات. على سبيل المثال ، لن يعمل هذا تحت Internet Explorer على الإطلاق.

يمكنك الخروج من https://caniuse.com/?search=woff2 وانظر بنفسك.

مثال آخر ، إذا راجعنا مدارس W3 :

1@font-face {
2  font-family: myFirstFont;
3  src: url(myFirstFont.woff);
4}

هل هذا صحيح؟ لا يزال لا ، لن يدعم جميع المتصفحات.

من أجل دعم جميع المتصفحات ، يجب أن تبدو أنواع الخطوط المحملة و CSS كما يلي:

 1@font-face {
 2	font-family: 'FONT';
 3	src: url('FONT.eot'); 									/* IE9 Compat Modes */
 4	src: local(''),
 5       url('FONT.eot?#iefix') format('embedded-opentype'), 	/* IE6-IE8 */
 6       url('FONT.woff2') format('woff2'), 					/* Super Modern Browsers */
 7       url('FONT.woff') format('woff'), 					/* Modern Browsers */
 8       url('FONT.ttf') format('truetype'), 					/* Safari, Android, iOS */
 9       url('FONT.svg#FONT') format('svg'); 					/* Legacy iOS */
10}

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

كيفية تحويل وإنشاء أنواع وجه الخط؟

إذا كنت تقوم بتطوير موقع ويب لأحد العملاء ، فعادة ما يمنحك نوع خط واحدًا. هذا إما تنسيق “.otf” أو “.ttf” فقط ، وهذا ليس كافيًا.

تحتاج إلى جميع التنسيقات المطلوبة لجميع المتصفحات الموجودة هناك ، لذلك ستحتاج إلى تحويلها إلى أنواع “@ font-face” المناسبة.

لحسن حظنا ، لدينا أدوات عبر الإنترنت للقيام بذلك تلقائيًا وحتى إنشاء CSS الصحيح له (هل تطورنا أم لا).

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

أنصحك باستخدام Transfonter ، ولكن يمكنك بالطبع استخدام أيهما تريد.

ستعمل هذه الأداة المجانية عبر الإنترنت على تحويل خطك وتزويدك بأنواع الخطوط و CSS جاهزة للاستخدام:

 1@font-face {
 2    font-family: 'Sample';
 3    src: url('Sample.eot');
 4    src: url('Sample.eot?#iefix') format('embedded-opentype'),
 5        url('Sample.woff2') format('woff2'),
 6        url('Sample.woff') format('woff'),
 7        url('Sample.ttf') format('truetype'),
 8        url('Sample.svg#Sample') format('svg');
 9    font-weight: normal;
10    font-style: normal;
11}

تحويل الخطوط المجانية / مفتوحة المصدر

في سيناريو آخر حيث لن يوفر لك عميلك خطًا مدفوعًا وبدلاً من ذلك خط Google مجاني ، هناك أداة لذلك أيضًا: [https://google-webfonts-helper.herokuapp.com/fonts](https:/ /google-webfonts-helper.herokuapp.com/fonts).

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

أوصي بشدة بفحص الخطوط الناتجة في المتصفحات المختلفة.

كيف لنا مجموعات الخطوط بشكل صحيح؟

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

تُستخدم الخطوط الاحتياطية عندما لا يكون الخط الحالي متاحًا. يمكن أن يحدث هذا لعدة أسباب من مشكلة CDN أو مهلة الشبكة.

ستلاحظ أن معظم CMS قد حددت الخطوط الاحتياطية مثل ما يلي:

1html {
2  font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
3}

هل هذا كاف؟ لا. لسوء الحظ ، فإن خطوط الأنظمة ليست هي نفسها على كل جهاز. نظام التشغيل Windows خاص به ، و Android خاص به ، و iOS كذلك وما إلى ذلك.

اذا مالعمل؟ قم بتعريفهم بشكل صحيح ، وتحقق من كيفية قيام Bootstrap بذلك:

 1  // Safari for OS X and iOS (San Francisco)
 2  -apple-system,
 3  // Chrome < 56 for OS X (San Francisco)
 4  BlinkMacSystemFont,
 5  // Windows
 6  "Segoe UI",
 7  // Android
 8  "Roboto",
 9  // Basic web fallback
10  "Helvetica Neue", Arial, sans-serif,
11  // Emoji fonts
12  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

باستخدام ما سبق مع الخطوط المخصصة ، ستكون النتيجة:

1font-family: "CUSTOM FONT HERE", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

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

اختبار واجهة الخط ومجموعة الخطوط

لا تخف من اختبار الكلمات ، فهذه عملية سهلة للغاية إذا كنت تعمل بذكاء. لا تحتاج حتى إلى فحص الصفحة يدويًا لمعرفة الخط الذي تم تحميله (إذا كنت كسولًا).

مع تطور التكنولوجيا ، كذلك تتطور الأدوات المتاحة للمطورين ؛ جعل الحياة أسهل وأسهل لخلق الأشياء.

التحقق مما إذا كان يتم تحميل @ font-face و font-family بشكل صحيح عملية سهلة للغاية ، انظر أدناه.

التحقق من Font Face و Font Family

  1. استخدم امتداد متصفح لمعرفة الخط الذي يستخدمه موقعك بسهولة:
  1. قم بتحرير صفحتك و “كسر” “@ font-face” ، محاكاة حالة عندما لا يتم تحميل الخط المخصص. يمكنك “كسر” التحميل عن طريق تغيير اسم الخط أو عنوان URL الذي يؤدي إلى خط غير مخرج.
  2. يجب أن تكون النتيجة هي الخط الأول الذي يطابق جهازك كخط احتياطي. على سبيل المثال ، إذا كنت تستخدم جهاز Apple ، فيجب أن يكون “-apple-system”.

النصائح والحيل

  • استخدم علامة رأس ارتباط HTML “التوصيل المسبق” إذا كنت تقوم بتحميل الخطوط من CDN.
  • في كل إعلان عن الخط ، أضف “font-display: swap؛” لتسريع التحميل. يوجه هذا المستعرض إلى استخدام الخط الاحتياطي لعرض النص حتى يتم تنزيل الخط المخصص بالكامل.
  • قم بتحميل الخطوط الضرورية بالفعل فقط ، لقد رأيت أشخاصًا يقومون بتحميل 7 أنواع خطوط من نفس الخط ولكنهم يستخدمون واحدًا فقط منهم.
  • لتحسين سرعة الصفحة ، قم بتحميل الخط (الأول أو الضروري) مسبقًا باستخدام HTTP / 2. سيؤدي هذا إلى تسريع صفحتك بشكل كبير وإصلاح Google PageSpeed “ضمان بقاء النص مرئيًا أثناء تحميل خط الويب”.

حسنًا ، هذا كل شيء ، آمل أن يكون هذا المقال قد ساعدك.