260322:1648 Correct Coresspondence / Doing RFA / Correct CI

2026-03-22 16:48:12 +07:00
parent e5deedb42e
commit 11984bfa29
683 changed files with 105251 additions and 29068 deletions
@@ -6,44 +6,45 @@ Use `next/font` for automatic font optimization with zero layout shift.

 ```tsx
 // app/layout.tsx
-import { Inter } from 'next/font/google'
+import { Inter } from 'next/font/google';

-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ['latin'] });

 export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
-  )
+  );
 }
 ```

 ## Multiple Fonts

 ```tsx
-import { Inter, Roboto_Mono } from 'next/font/google'
+import { Inter, Roboto_Mono } from 'next/font/google';

 const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
-})
+});

 const robotoMono = Roboto_Mono({
  subsets: ['latin'],
  variable: '--font-roboto-mono',
-})
+});

 export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${inter.variable} ${robotoMono.variable}`}>
      <body>{children}</body>
    </html>
-  )
+  );
 }
 ```

 Use in CSS:
+
 ```css
 body {
  font-family: var(--font-inter);
@@ -61,35 +62,35 @@ code {
 const inter = Inter({
  subsets: ['latin'],
  weight: '400',
-})
+});

 // Multiple weights
 const inter = Inter({
  subsets: ['latin'],
  weight: ['400', '500', '700'],
-})
+});

 // Variable font (recommended) - includes all weights
 const inter = Inter({
  subsets: ['latin'],
  // No weight needed - variable fonts support all weights
-})
+});

 // With italic
 const inter = Inter({
  subsets: ['latin'],
  style: ['normal', 'italic'],
-})
+});
 ```

 ## Local Fonts

 ```tsx
-import localFont from 'next/font/local'
+import localFont from 'next/font/local';

 const myFont = localFont({
  src: './fonts/MyFont.woff2',
-})
+});

 // Multiple files for different weights
 const myFont = localFont({
@@ -105,32 +106,32 @@ const myFont = localFont({
      style: 'normal',
    },
  ],
-})
+});

 // Variable font
 const myFont = localFont({
  src: './fonts/MyFont-Variable.woff2',
  variable: '--font-my-font',
-})
+});
 ```

 ## Tailwind CSS Integration

 ```tsx
 // app/layout.tsx
-import { Inter } from 'next/font/google'
+import { Inter } from 'next/font/google';

 const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
-})
+});

 export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.variable}>
      <body>{children}</body>
    </html>
-  )
+  );
 }
 ```

@@ -144,7 +145,7 @@ module.exports = {
      },
    },
  },
-}
+};
 ```

 ## Preloading Subsets
@@ -153,10 +154,10 @@ Only load needed character subsets:

 ```tsx
 // Latin only (most common)
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ['latin'] });

 // Multiple subsets
-const inter = Inter({ subsets: ['latin', 'latin-ext', 'cyrillic'] })
+const inter = Inter({ subsets: ['latin', 'latin-ext', 'cyrillic'] });
 ```

 ## Display Strategy
@@ -167,7 +168,7 @@ Control font loading behavior:
 const inter = Inter({
  subsets: ['latin'],
  display: 'swap', // Default - shows fallback, swaps when loaded
-})
+});

 // Options:
 // 'auto' - browser decides
@@ -231,15 +232,15 @@ const inter = Inter({ subsets: ['latin'] })
 ```tsx
 // For component-specific fonts, export from a shared file
 // lib/fonts.ts
-import { Inter, Playfair_Display } from 'next/font/google'
+import { Inter, Playfair_Display } from 'next/font/google';

-export const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
-export const playfair = Playfair_Display({ subsets: ['latin'], variable: '--font-playfair' })
+export const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
+export const playfair = Playfair_Display({ subsets: ['latin'], variable: '--font-playfair' });

 // components/Heading.tsx
-import { playfair } from '@/lib/fonts'
+import { playfair } from '@/lib/fonts';

 export function Heading({ children }) {
-  return <h1 className={playfair.className}>{children}</h1>
+  return <h1 className={playfair.className}>{children}</h1>;
 }
 ```