الانتقال إلى المحتوى الرئيسي

Google Fonts

  1. انتقل إلى Google Fonts واختر الخط الذي يعجبك.

  2. في صفحة الخط، ابحث عن زر Get font وانقر عليه.

1

  1. انقر على Get embed code.

2

  1. اختر @import.

3

  1. نحتاج إلى نسخ جزأين هنا:

4

الجزء الأول

بالنسبة للخط الذي اخترته، يبدو كود التضمين الذي توفره Google كما يلي:

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&display=swap');
</style>

نحن بحاجة فقط إلى نسخ الجزء الذي يأتي بعد علامة الاستفهام في الرابط URL (المميز باللون الأحمر في الصورة أعلاه) ولصقه في حقل Google Fonts (Font families) في صفحة خيارات الإضافة. في هذا المثال، أحتاج فقط إلى نسخ family=Noto+Sans+JP:[email protected]&display=swap.

الجزء الثاني

بالنسبة لهذا الخط، يبدو كود النمط الذي توفره Google كما يلي:

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

نحن بحاجة فقط إلى الجزء المميز باللون الأحمر في الصورة أعلاه.

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;

أحيانًا تحتاج إلى ملء بعض القيم داخل الأنماط. على سبيل المثال، بالنسبة لهذا الخط، فإن قيمة font-weight هي <weight>، وهذا يعني أنك بحاجة إلى توفير قيمة. عادةً ما تكون هذه العناصر النائبة محاطة بـ <>. يمكنك العثور على القيم المقابلة في Mozilla.

بالنسبة إلى font-weight، يمكننا استخدام normal.

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;

الصق هذا في حقل Google Fonts (CSS properties) في صفحة خيارات الإضافة.

  1. أكمل الإعداد.

5

  1. ارجع إلى صفحة الفيديو لرؤية الخط المطبق. تعرض الصورة أدناه Noto Sans Japanese و Noto Serif Japanese قيد الاستخدام.

6