Google Fonts 日語教學資訊圖

{ &quot;type&quot;: &quot;日文資訊圖表&quot;, &quot;topic&quot;: &quot;如何使用 Google Fonts&quot;, &quot;style&quot;: &quot;此設計採用簡潔現代的扁平化風格，白色背景，柔和的淺藍色和薄荷綠色的邊角塊，帶有微妙陰影的圓角卡片，具有科技的美感，以及清晰的向量排版和 UI 插圖。 &quot;如何使用 Google Fonts&quot;, &quot;sub&quot;: &quot;基本 3 個步驟&quot; }, &quot;layout&quot;: { &quot;sections&quot;, &quot;sub&quot;: &quot;基本 3 個步驟&quot; }, &quot;layout&quot;: { &quot;sections&quot;, &quot;sub&quot;: &quot;基本 3 個步驟&quot; }, &quot;layout&quot;: { &quot;sections&quot;, &quot;sub&quot;: &quot;基本 3 個步驟&quot; }, &quot;layout&quot;: { &quot;sections&quot;, &quot;sub&quot;: &quot;基本 3 個步驟&quot; }, &quot;layout&quot;: { &quot;sections&quot;, &quot;sub&quot;: &quot;基本 3 個步驟&quot; }, &quot;layout&quot;: { &quot;sections&quot;, &quot;sub&quot;: &quot;基本 3 個步驟&quot; }, &quot;layout&quot;: { &quot;sections&quot;, &quot;sub&quot;: &quot;基本 3 個步驟&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;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;具有淺藍色邊框/陰影的圓形白色面板&quot;, &quot;icon&quot;: &quot;藍色數字 2 圓圈符號&quot;, &quot;code_blocks&quot;: { &quot;count&quot;: 2, &quot;labels&quot;: [ &quot;<link> （HTML），&quot; @import （CSS）&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;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 3 圓號： &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;, ans-serif}&quot;, 字體」並將其設計為系列(body_body_s JP&#39;, ans-serif; &quot; }, { &quot;title&quot;: &quot;要點&quot;, &quot;position&quot;: &quot;左下角&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;標題：波平斯&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;20/c 2&quot;, 25 藍色角標籤&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;#F44B400&quot;, &quot;#DB4437&quot;, &quot;#F44B400&quot;, 86&quot; &quot;background&quot;: &quot;#ffffff&quot; } }