في هذا الدرس 2تصفّح المواضيع
CSS Google Fonts
إدراج خطوط من google fonts في لغة CSS
CSS Google Fonts إدراج خطوط من google fonts في لغة CSS
يمكن عن طريق مكتبة google fonts دمج خطوط عربية وأجنبية مُختلفة وخطوط حديثة وعصرية بصفحة الويب لأستخدام هذة الخطوط بدلاً من إستخدام الخطوط الأفتراضية التي يعتمدها المتصفح.
google fonts هي مكتبة مجانية يقدمها جوجل بنظام cloud ويوجد مئات من الخطوط العربية والأجنبية بداخل مكتبة google fonts التي تجعل صفحة الويب الخاصة بك أكثر إبداع.
كيفة إستخدام خطوط Google Fonts؟
- عن طريق مكتبة css جاهزة من موقع google fonts يتم دمجها بصفحة html لنوع خط معين.
- وعن طريق لغة CSS نختار أي عنصر في صفحة الويب ونضع له خاصية font-family مع إسم الخط الزي قمنا بإختيارة من منصة google fonts.
CSS Google Font
CSS link google font
طريقة ربط خط من google fonts في لغة CSS
CSS link google font طريقة ربط خط من google fonts في لغة CSS
لربط خط من Google Fonts اتبع الواجهة الحالية:
- ابحث عن العائلة المطلوبة، مثل
Cairo، وافتح نتيجتها. تحقق من أن معاينة الخط تشمل حروف لغتك. - اضغط
Get fontثمGet embed code. - في خيار
Webاختر طريقةlink، وانسخ روابط الأنماط إلىheadفي مستند HTML. - استخدم قيمة
font-familyالتي يوفرها الموقع في CSS، مع عائلة بديلة مثلsans-serif. يوضح المثال العربي أدناه خط Cairo.
الصور الست التالية توثق واجهة Google Fonts السابقة. تحفظ هنا كصور تاريخية؛ أسماء الأزرار الحالية هي المذكورة أعلاه، وليست Select Light أو view selected font.
صورة من الواجهة السابقة — الخطوة الأولى. راجع التعليمات الحالية أعلاه عند التطبيق.
صورة من الواجهة السابقة — الخطوة الثانية. راجع التعليمات الحالية أعلاه عند التطبيق.
صورة من الواجهة السابقة — الخطوة الثالثة. راجع التعليمات الحالية أعلاه عند التطبيق.
صورة من الواجهة السابقة — الخطوة الرابعة. راجع التعليمات الحالية أعلاه عند التطبيق.
صورة من الواجهة السابقة — الخطوة الخامسة. راجع التعليمات الحالية أعلاه عند التطبيق.
صورة من الواجهة السابقة — الخطوة السادسة. راجع التعليمات الحالية أعلاه عند التطبيق.
CSS Google Arabic Font
طريقة ربط خط من خطوط جوجل في لغة CSS.
CSS Google Arabic Font
طريقة ربط خط من خطوط جوجل في لغة CSS.
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:[email protected]&display=swap" rel="stylesheet">
<style>
h1,p
{
font-family: "Cairo", sans-serif;
}
</style>
</head>
<body>
<h1>تعلم الخطوط العربية مع CloseTag</h1>
<p>هذا مثال لعرض النص العربي بخط Cairo من Google Fonts.</p>
<p>مثال للأرقام: 123456790</p>
</body>
</html>سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات9
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Font الخط
- للمراجعة
- 02 Fonts الخطوط
- للمراجعة
- 03 Google موقع جوجل
- للمراجعة
- 04 External خارجي
- للمراجعة
- 05 Head عنوان
- للمراجعة
- 06 Arabic اللغة العربية
- للمراجعة
- 07 Select This Style حدد هذا النمط أو الشكل
- للمراجعة
- 08 View عرض / رؤية
- للمراجعة
- 09 Selected محدد
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
- 02 HTML HTML
- Hypertext Markup Language
- لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.