The main.js code should look something like this:
\n<\/p>\n\n

import \".\/style.css\";\n\ndocument.querySelector(\"#app\").innerHTML = `\n  
\n    
\n\n\n\n
This is where we use document.querySelector() to add content to the element we insert our content into using the id: #<\/p>\n\n
And the style.css code should look something like this:
\n<\/p>\n\n
body {\n  font-family: 'Kyiv Sans';\n}\n\n@font-face {\n  font-family: 'Kyiv Sans';\n  src: url('\/font\/KyivTypeSans-VarGX.ttf');\n  font-weight: 0 1000;\n  font-display: swap;\n}\n\nh1 {\n  color: #bd0c0c;\n  height: 100vh;\n  display: grid;\n  place-content: center;\n  margin: 0;\n  text-align: center;\n}\n\n.variable-font {\n  font-family: 'Kyiv Sans';\n  font-size: 5rem;\n  line-height: 1.1;\n  font-weight: 100;\n  font-variation-settings:\n   'wght' 100, 'CONT' 250, 'MIDL' 0;\n  transition: font-variation-settings 500ms;  \n}\n\n.variable-font:hover {\n  font-weight: 1000;\n  font-variation-settings:\n    'wght' 1000, 'CONT' 250, 'MIDL' -1000;\n}\n<\/pre>\n\n\n\n
ここで、上記のコードで何が起こっているのか説明しましょう:<\/p>\n\n
本文のデフォルトフォントの設(shè)定:<\/strong>
\n<\/p>
npm create vite@latest\n<\/pre>\n\n\n\n
\n
\n目的<\/strong>: これにより、ドキュメント全體のデフォルトのフォントが「Kyiv Sans」に設(shè)定されます。<\/li>\n
\n影響<\/strong>: より具體的なスタイルによってオーバーライドされない限り、本文內(nèi)のすべてのテキスト要素はこのフォントを継承します。<\/li>\n<\/ul>\n\n
カスタム フォントの定義:<\/strong>
\n<\/p>\n\n
npm run dev\n<\/pre>\n\n\n\n
\n
\n目的<\/strong>: @font-face ルールを使用すると、カスタム フォントを定義できます。<\/li>\n
\nフォント名<\/strong>: フォントの名前は「Kyiv Sans」です。<\/li>\n
\nソース<\/strong>: フォント ファイルは \/font\/KyivTypeSans-VarGX.ttf にあります。<\/li>\n
\nフォントのウェイト範(fàn)囲<\/strong>: このフォントは 0 ～ 1000 のウェイトの範(fàn)囲をサポートしており、可変フォントになります。<\/li>\n
\nフォント表示<\/strong>: スワップにより、カスタム フォントが読み込まれるまで、フォールバック フォントを使用してテキストがすぐに表示されます。<\/li>\n<\/ul>\n\n
 のスタイル設(shè)定要素:
\n\n\n
\n\n  \n    \n    \n\n