next/font எவ்வாறு எழுத்துருக்களை மேம்படுத்துகிறது?

Question

Accepted Answer

`next/font` வலை எழுத்துருக்களை தானாக மேம்படுத்துகிறது, செயல்திறனை மேம்படுத்துவதற்கும் தளவமைப்பு மாறுபாடு நீக்குவதற்கும் — கட்டுமான நேரத்தில் எழுத்துருக்களைத் தானாக-ஆளுகையாக்கி, ஏற்றுதल் விவரங்களை நிர்வகிக்கிறது. ## Google எழுத்துரு பயன்படுத்துதல் ```tsx // app/layout.tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], // only load the character sets you need (smaller files) display: "swap", // show fallback text immediately, swap when font loads }); export default function RootLayout({ children }) { return ( {/* apply the font */} {children} ); } ``` ## இது தானாக என்ன செய்கிறது - **தன்-ஆளுகையாக்கம்** — கட்டுமான நேரத்தில், Next Google எழுத்துருவை பதிவிறக்கம் செய்து **உங்கள்** களத்திலிருந்து வழங்குகிறது. இயக்க நேரத்தில் Google சேவையகங்களுக்கு கோரிக்கை இல்லை → வேகமாக மற்றும் தனியுரிமைக்கு சிறந்த (மூன்றாம் தரப்பு ট்র্যாকிங் இல்லை). - **பூஜ்ய தளவமைப்பு மாறுபாடு** — இது உள்ளிட வாய்ப்பு எழுத்துருவின் மெট்ரிக்ஸ்களை வலை எழுத்துருவுடன் பொருத்த கணக்கிடுகிறது, எனவே உண்மையான எழுத்துரு இடமாறும் போது, உரை குதிக்கு முடியாது (CLS பாதுகாக்கிறது). - **முன்-ஏற்றுதல் மற்றும் உப-தொகுப்பு** — எழுத்துருவை முன்-ஏற்றுதல் செய்து குறிப்பிட்ட எழுத்து உப-தொகுப்புகளை மட்டுமே சேர்க்கிறது, பதிவிறக்கத்தை குறைக்கிறது. - **ஆர்ப்பாட்ட-தடுக்கும் கோரிக்கை இல்லை** — எழுத்துருக்கள் உங்கள் கட்டுமானத்தின் பாகம், தடுக்கும் வெளிப்புற பெறுப்பு அல்ல. ## உள்ளூர் எழுத்துருக்கள் ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## எழுத்துரு மேம்படுத்தல் ஏன் முக்கியமானது எழுத்துருக்கள் ஒரு பாரம்பரிய செயல்திறன் மற்றும் CLS சிக்கல்: உரை ஆர்ப்பாட்டத்தைத் தடுக்கும் மூன்றாம் தரப்பு பெறுப்பு, பின்னர் எழுத்துரு ஏற்றப்படும் போது தளவமைப்பு மாறுபாடு (FOUT/FOIT). இதை சரியாக கைமுறையாக செய்ய `@font-face`, `font-display`, முன்-ஏற்றுதல் மற்றும் உள்ளிட மெட்ரிக்ஸ் பொருத்தம் தேவை. ## ஏன் இது முக்கியமானது `next/font` முழு எழுத்துரு-செயல்திறன் சரிபார்ப்புப் பட்டியலை தானாக்குகிறது — தன்-ஆளுகையாக்கம் (வேகம் + தனியுரிமை), உப-தொகுப்பு மற்றும் முன்-ஏற்றுதல் (சிறிய, வேகமான) மற்றும் உள்ளிட மெட்ரிக்ஸ் பொருத்தம் (தளவமைப்பு மாறுபாடு இல்லை) — ஒரு இறக்குமதிக்குப் பின்னால். இது எரிச்சலூட்டும், பிழை பெறுவது எளிதான மேம்படுத்தலை நீக்குகிறது மற்றும் Next.js-ல் Google மற்றும் உள்ளூர் எழுத்துருக்கள் இரண்டையும் பயன்படுத்த பரிந்துரைக்கப்பட்ட வழி.