feat: add font for index page

SMS-COSMO · Dec 3, 2023 · bc3d9af · bc3d9af
1 parent 8778ac9
commit bc3d9af
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/pages/index.vue b/pages/index.vue
@@ -4,7 +4,7 @@
       <div class="mb-4 mt-8 flex justify-start">
         <NuxtImg preload src="/combined-logo.svg" class="w-[72vw]"></NuxtImg>
       </div>
-      <section class="my-4 grid grid-cols-1 gap-4">
+      <section class="my-4 grid grid-cols-1 gap-4 font-shuhei">
         <div class="grid grid-cols-2 gap-2">
           <UiCard class="shadow p-0 pt-1 pb-2">
             <UiCardHeader class="pt-1 pb-0 text-3xl font-bold">
@@ -48,10 +48,10 @@
         <UiCardContent class="p-4">
             <UiTabs v-model="selectedTab" class="overflow-x-hidden">
               <UiTabsList class="grid grid-cols-2">
-                <UiTabsTrigger value="songList">
+                <UiTabsTrigger value="songList" class="font-shuhei">
                   已收集投稿
                 </UiTabsTrigger>
-                <UiTabsTrigger value="arrangement">
+                <UiTabsTrigger value="arrangement" class="font-shuhei">
                   歌单
                 </UiTabsTrigger>
               </UiTabsList>

diff --git a/public/ShuHeiTi.woff2 b/public/ShuHeiTi.woff2
diff --git a/styles/tailwind.css b/styles/tailwind.css
@@ -1,9 +1,14 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
+
+
 @layer base {
+  @font-face {
+    font-family: AlimamaShuHeiTi;
+    src: url('/ShuHeiTi.woff2') format("woff2");
+  }
+
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -15,6 +15,9 @@ export default {
       },
     },
     extend: {
+      fontFamily: {
+        'shuhei': ['AlimamaShuHeiTi', 'sans-serif']
+      },
       colors: {
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',