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
現(xiàn)在，讓我們解釋一下上面代碼中發(fā)生的事情：<\/p>\n\n
設置正文的默認字體：<\/strong>
\n<\/p>
npm create vite@latest\n<\/pre>\n\n\n\n<\/pre>\n
\n
\n用途<\/strong>：這將整個文檔的默認字體設置為“Kyiv Sans”。<\/li>\n
\n影響<\/strong>：正文中的所有文本元素都將繼承此字體，除非被更具體的樣式覆蓋。<\/li>\n<\/ul>\n\n
定義自定義字體：<\/strong>
\n<\/p>\n\n
npm run dev\n<\/pre>\n\n\n\n
\n
\n用途<\/strong>：@font-face 規(guī)則允許您定義自定義字體。<\/li>\n
\n字體名稱<\/strong>：字體名為“Kyiv Sans”。<\/li>\n
\n來源<\/strong>：字體文件位于\/font\/KyivTypeSans-VarGX.ttf。<\/li>\n
\n字體粗細范圍<\/strong>：此字體支持0到1000的粗細范圍，使其成為可變字體。<\/li>\n
\n字體顯示<\/strong>：交換確保使用后備字體立即顯示文本，直到加載自定義字體。<\/li>\n<\/ul>\n\n
設計 
 樣式元素：<\/h1><\/strong>
\n<\/p>\n\n
\n\n  \n    \n    \n\n