أفضل 20 خط ويب من Google

أفضل 20 خط ويب من Google

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

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

 

إليك أفضل 20 خط من Google Web Fonts

Karla

Lora

Frank Ruhl Libre

Playfair Display

Archivo

Spectral

Fjalla One

Roboto

Montserrat

Rubik

Source Sans

Cardo

Cormorant

Work Sans

Rakkas

Concert One

Yatra One

Arvo

Lato

Abril FatFace

Ubuntu

PT Serif

Old Standard TT

Oswald

أفضل الخطوط المستخدمة في واجهه المستخدم UI

PT Sans

Poppins

Fira Sans

Nunito

Oxygen

Exo 2

Open Sans

Merriweather

Noto Sans

Source Sans Pro

 

كيفية استخدام خطوط الويب

  • في هذه المرحلة ، يجب عليك معرفة كيفية استخدام خطوط الويب ،هناك طريقتين يمكنك الأستفاده منها لخطوط الويب. الأول هو أستخدام خدمات الخطوط على شبكة الإنترنت مثل خطوط Google ، Webtype ، Fonts.com أو Typekit وتحميل الخط من موقعهم.
  • والثاني هو استضافة الخط في موقعك و استخدام @font-face في كود البرمجي لموقعك.

طريقة استخدام الخطوط بالطريقة الأولى

1. اختيار الخط. يمكنك إضافته إلى موقعك “الاستخدام السريع” لإنشاء الكود البرمجي وخيارات هذا الخط.

2. قم بنسخ الكود البرمجي التي تم إنشاؤه في <head> ولصقها.

<head> <link rel = "stylesheet" type = "text / css" href = "http://fonts.googleapis.com/css؟family=Tangerine" > </ head>

3. يمكن الآن تعديل عرض الخط من خلال CSS الخاصة بك

 

      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }

يمكنك هنا مراجعة دليل الموسع لاستخدام خطوط متعددة.

 

تضمين الخطوط باستخدام font-face rule@ 

يتم استضافة الخطوط على خادم المستخدم بشكل مستقل عن الخدمات الخارجية. @ font-face كان قاعدة CSS2 تم إيقافها وتمت إعادة تعريفها في مواصفات CSS3 وهي مدعومة من قبل جميع المتصفحات الحديثة تقريبًا. يعد خط الويب خطًا مخصصًا مدعومًا بمخازن مختلفة ويأتي بتنسيقات مثل  TTF و WOFF و EOT و SVG.

     @font-face {
         font-family: 'ChunkFiveRegular';
         src: url('Chunkfive-webfont.eot');
         src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
         url('Chunkfive-webfont.woff') format('woff'),
         url('Chunkfive-webfont.ttf') format('truetype'),
         url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
         font-weight: normal;
         font-style: normal;
}
6