رسم بياني تعليمي للغة اليابانية من جوجل فونتس

{ &quot;type&quot;: &quot;رسم بياني ياباني&quot;, &quot;topic&quot;: &quot;كيفية استخدام خطوط جوجل&quot;, &quot;style&quot;: &quot;يتميز التصميم بأسلوب مسطح حديث ونظيف مع خلفية بيضاء، وكتل زاوية باللون الأزرق الفاتح والأخضر النعناعي، وبطاقات ذات زوايا مستديرة مع ظلال خفيفة، وجمالية تعليمية تقنية، وطباعة متجهة واضحة ورسوم توضيحية لواجهة المستخدم.&quot;, &quot;canvas&quot;: { &quot;aspect_ratio&quot;: &quot;16:9&quot; }, &quot;headline&quot;: { &quot;main&quot;: &quot;كيفية استخدام خطوط جوجل&quot;, &quot;sub&quot;: &quot;الخطوات الثلاث الأساسية&quot; }, &quot;layout&quot;: { &quot;sections&quot;: [ { &quot;title&quot;: &quot;1. تحديد الخط&quot;, &quot;position&quot;: &quot;left&quot;, &quot;count&quot;: 1, &quot;labels&quot;: [ &quot;1. تحديد الخط&quot; ], &quot;card_style&quot;: &quot;لوحة بيضاء مستديرة مع حدود/ظل أزرق فاتح&quot;, &quot;icon&quot;: &quot;دائرة زرقاء تحمل الرقم 1&quot;, &quot;illustration&quot;: &quot;تعرض نافذة المتصفح واجهة البحث عن الخطوط، مع ثلاث معاينات مرئية للخطوط، تعرض عينات كبيرة من Aa و あ، وبحث شريط في الأعلى، أزرار نوافذ صغيرة ملونة، خطوط واجهة رمادية فاتحة، وخطوط تمييز زرقاء.، نص_الجسم: &quot;ابحث عن خطوطك المفضلة على موقع Google Fonts الإلكتروني.&quot;}، { العنوان: &quot;2. احصل على الكود المضمن،&quot; الموضع: &quot;وسط،&quot; العدد: 1، التسميات: [ &quot;2. احصل على الكود المضمن&quot; ]، نمط_البطاقة: &quot;لوحة بيضاء مستديرة بإطار/ظل أزرق فاتح،&quot; الأيقونة: &quot;دائرة زرقاء تحمل الرقم 2،&quot; الرسم التوضيحي: &quot;تحتوي لوحة الكود الداكنة على مثالين للكود مع تسميات، مفصولين بفاصل رفيع.&quot;، كتل_الكود: { العدد: 2، التسميات: [ &quot;<link> (HTML)&quot;, &quot; @import (CSS)&quot; ], &quot;content&quot;: [ &quot; <link href=\"https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap\" rel=\"stylesheet\"> ] }, &quot; @import &quot;: &quot;نسخ العرض<link> أو كود CSS.&quot; }, { &quot;title&quot;: &quot;3. التطبيق في CSS&quot;, &quot;position&quot;: &quot;right&quot;, &quot;count&quot;: 1, &quot;labels&quot;: [ &quot;3. التطبيق في CSS&quot; ], &quot;card_style&quot;: &quot;لوحة بيضاء مستديرة بحدود/ظل أزرق فاتح&quot;, &quot;icon&quot;: &quot;دائرة زرقاء تحمل الرقم 3&quot;, &quot;illustration&quot;: &quot;بطاقة كود بيضاء تحتوي على CSS، مع مُحدِّدَين وقاعدة font-family.&quot;, &quot;code_blocks&quot;: { &quot;count&quot;: 2, &quot;labels&quot;: [ &quot;.title&quot;, &quot;body&quot; ], &quot;content&quot;: [ &quot;.title { font-family: &#39;Poppins&#39;, sans-serif; }&quot;, &quot;body { font-family: &#39;Noto Sans JP&#39;, sans-serif; }&quot; ] }, &quot;body_text&quot;: &quot;حدد نوع الخط وقم بتطبيقه على التصميم.&quot; }, { &quot;title&quot;: &quot;النقاط الرئيسية&quot;, &quot;position&quot;: &quot;أسفل اليسار&quot;, &quot;count&quot;: 3, &quot;labels&quot;: [ &quot;اختر بناءً على سهولة القراءة&quot;, &quot;تأكد من دعم اللغة اليابانية.&quot;, &quot;لا تفرط في الاستخدام؛ { &quot;الحد الأقصى 2-3 أنواع.&quot; ], &quot;card_style&quot;: &quot;لوحة بيضاء مستديرة مع درجات لونية زرقاء فاتحة&quot;, &quot;icon&quot;: &quot;نجمة زرقاء داخل الدائرة&quot;, &quot;body_format&quot;: &quot;قائمة نقطية&quot; }, { &quot;title&quot;: &quot;التركيبات الشائعة&quot;, &quot;position&quot;: &quot;أسفل-وسط-يمين&quot;, &quot;count&quot;: 2, &quot;labels&quot;: [ &quot;العنوان: Poppins&quot;, &quot;النص الرئيسي: Noto Sans JP&quot; ], &quot;card_style&quot;: &quot;لوحة بيضاء مستديرة مع مسحة أرجوانية فاتحة&quot;, &quot;icon&quot;: &quot;رمز سلسلة أرجوانية&quot;, &quot;body_format&quot;: &quot;مربعان للعينات على شكل حبة دواء&quot; } ], &quot;connectors&quot;: { &quot;count&quot;: 2, &quot;style&quot;: &quot;سهم أزرق كبير متجه لليمين بين البطاقات الثلاث العلوية&quot; }, &quot;pagination&quot;: { &quot;text&quot;: &quot;2 / 2&quot;, &quot;position&quot;: &quot;أسفل-يمين&quot;, &quot;style&quot;: &quot;ملصق أزرق ذو زاوية مستديرة&quot; } }, &quot;text_language&quot;: &quot;اليابانية&quot;, &quot;color_palette&quot;: { &quot;primary_blue&quot;: &quot;#2f80ff&quot;, &quot;navy&quot;: &quot;#0f2b5b&quot;, &quot;google_colors&quot;: [ &quot;#4285F4&quot;, &quot;#DB4437&quot;, &quot;#F4B400&quot;, &quot;#0F9D58&quot; ], &quot;lavender&quot;: &quot;#8b6cff&quot;, &quot;background&quot;: &quot;#ffffff&quot; } }