อินโฟกราฟิกบทช่วยสอนการใช้ Google Fonts ภาษาญี่ปุ่น

{ &quot;type&quot;: &quot;อินโฟกราฟิกภาษาญี่ปุ่น&quot;, &quot;topic&quot;: &quot;วิธีใช้ Google Fonts&quot;, &quot;style&quot;: &quot;ดีไซน์โดดเด่นด้วยสไตล์เรียบง่ายทันสมัย ​​พื้นหลังสีขาว บล็อกมุมสีฟ้าอ่อนและสีเขียวมิ้นต์ การ์ดมุมโค้งมนพร้อมเงาเล็กน้อย ให้ความรู้สึกเหมือนบทเรียนเทคโนโลยี และภาพประกอบ UI และตัวพิมพ์เวกเตอร์ที่คมชัด&quot;, &quot;canvas&quot;: { &quot;aspect_ratio&quot;: &quot;16:9&quot; }, &quot;headline&quot;: { &quot;main&quot;: &quot;วิธีใช้ Google Fonts&quot;, &quot;sub&quot;: &quot;3 ขั้นตอนพื้นฐาน&quot; }, &quot;layout&quot;: { &quot;sections&quot;: [ { &quot;title&quot;: &quot;1. เลือกแบบอักษร&quot;, &quot;position&quot;: &quot;ซ้าย&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;, &quot;body_text&quot;: &quot;ค้นหาแบบอักษรที่คุณชื่นชอบบนเว็บไซต์ Google Fonts&quot; }, { &quot;title&quot;: &quot;2. รับโค้ดที่ฝังอยู่&quot;, &quot;position&quot;: &quot;center&quot;, &quot;count&quot;: 1, &quot;labels&quot;: [ &quot;2. รับโค้ดที่ฝังอยู่&quot; ], &quot;card_style&quot;: &quot;แผงสีขาวโค้งมนพร้อมขอบ/เงาสีฟ้าอ่อน&quot;, &quot;icon&quot;: &quot;วงกลมหมายเลข 2 สีน้ำเงิน&quot;, &quot;illustration&quot;: &quot;แผงโค้ดสีเข้มประกอบด้วยตัวอย่างโค้ดสองตัวอย่างที่มีป้ายกำกับคั่นด้วยเส้นคั่นบางๆ&quot;, &quot;code_blocks&quot;: { &quot;count&quot;: 2, &quot;labels&quot;: [ &quot;<link> (HTML)&quot;, &quot; @import (CSS)&quot; ], &quot;เนื้อหา&quot;: [ &quot; <link href=\"https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap\" rel=\"stylesheet\"> &quot;, &quot; @import url(&#39;https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&amp;display=swap&#39;);&quot; ] }, &quot;body_text&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;bottom-left&quot;, &quot;count&quot;: 3, &quot;labels&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;ลูกศรสีฟ้าขนาดใหญ่ชี้ไปทางขวาระหว่างการ์ด 3 ใบด้านบน&quot; }, &quot;pagination&quot;: { &quot;text&quot;: &quot;2 / 2&quot;, &quot;position&quot;: &quot;ล่างขวา&quot;, &quot;style&quot;: &quot;สีน้ำเงินโค้งมน&quot; &quot;corner label&quot; } }, &quot;text_language&quot;: &quot;Japanese&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; } }