Home-theater-designers
உங்கள் இணையதளத்தில் தனிப்பயன் எழுத்துருக்களை சேர்க்க வலை எழுத்துருக்கள் சிறந்த வழியாகும். இந்த எழுத்துருக்கள் பயனரின் கணினியில் கிடைக்காமல் போகலாம், எனவே அவற்றை ஹோஸ்ட் செய்வதன் மூலம் அல்லது CDN மூலம் அவற்றைக் குறிப்பிடுவதன் மூலம் அவற்றை உங்கள் திட்டத்தில் சேர்க்க வேண்டும்.
இந்த இரண்டு முறைகளைப் பயன்படுத்தி Next.js இணையதளத்தில் வலை எழுத்துருக்களை எவ்வாறு சேர்ப்பது என்பதை அறிக.
அன்றைய வீடியோவை உருவாக்கவும்
Next.js இல் சுய-ஹோஸ்ட் செய்யப்பட்ட எழுத்துருக்களைப் பயன்படுத்துதல்
Next.js இல் சுய-ஹோஸ்ட் செய்யப்பட்ட எழுத்துருக்களைச் சேர்க்க, நீங்கள் செய்ய வேண்டும் @font-face CSS விதியைப் பயன்படுத்தவும் . வலைப்பக்கத்தில் தனிப்பயன் எழுத்துருக்களை சேர்க்க இந்த விதி உங்களை அனுமதிக்கிறது.
விண்டோஸ் 10 இலிருந்து ப்ளோட்வேரை எப்படி அகற்றுவது
எழுத்துரு முகத்தைப் பயன்படுத்துவதற்கு முன், நீங்கள் பயன்படுத்த விரும்பும் எழுத்துருக்களை பதிவிறக்கம் செய்ய வேண்டும். பல உள்ளன இணையத்தில் இலவச எழுத்துருக்களை வழங்கும் தளங்கள் , கூகிள் எழுத்துருக்கள், எழுத்துருவெளி மற்றும் டாஃபோன்ட் இணையதளங்கள் உட்பட.
நீங்கள் வலை எழுத்துருக்களை பதிவிறக்கம் செய்தவுடன், பல உலாவிகளை ஆதரிக்க அவற்றை வெவ்வேறு எழுத்துரு வடிவங்களுக்கு மாற்றவும். நீங்கள் பயன்படுத்தலாம் இலவச ஆன்லைன் எழுத்துரு மாற்று கருவிகள் அவ்வாறு செய்ய. நவீன இணைய உலாவிகள் .woff மற்றும் .woff2 வடிவங்களை ஆதரிக்கின்றன. நீங்கள் மரபு உலாவிகளை ஆதரிக்க வேண்டும் என்றால், நீங்கள் .eot மற்றும் .ttf வடிவங்களையும் வழங்க வேண்டும்.
என்ற புதிய கோப்புறையை உருவாக்கவும் எழுத்துருக்கள் உங்கள் தள கோப்பகத்தில் உங்கள் மாற்றப்பட்ட எழுத்துரு கோப்புகளை சேமிக்கவும்.
அடுத்த படியில் எழுத்துரு முகங்களைச் சேர்ப்பது styles/global.css அவற்றை முழு இணையதளத்திற்கும் கிடைக்கச் செய்ய கோப்பு. இந்த உதாரணம் மெர்மெய்ட் எழுத்துருவின் எழுத்துரு முகங்களை தடிமனாக காட்டுகிறது:
@font-face {
font-family: 'Mermaid';
src: url('Mermaid-Bold.eot');
src: url('Mermaid-Bold.eot?#iefix') format('embedded-opentype'),
url('Mermaid-Bold.woff2') format('woff2'),
url('Mermaid-Bold.woff') format('woff'),
url('Mermaid-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
எழுத்துருக் கோப்புகளைச் சேர்த்தவுடன், அந்த எழுத்துருக்களை ஒரு கூறு-நிலை CSS கோப்பில் பயன்படுத்தலாம்:
உங்கள் ஐபாடில் உற்பத்தித்திறன் பயன்பாடுகளைப் பயன்படுத்துகிறீர்கள்
h1 {
font-family: Mermaid;
}CDN வழியாக Next.js க்கு வலை எழுத்துருக்கள் உட்பட
சில இணையதளங்கள் உங்கள் பயன்பாட்டிற்கு நீங்கள் இறக்குமதி செய்யக்கூடிய CDN வழியாக வலை எழுத்துருக்களை வழங்குகின்றன. இந்த அணுகுமுறையை அமைப்பது எளிதானது, ஏனெனில் நீங்கள் எழுத்துருக்களைப் பதிவிறக்கவோ அல்லது எழுத்துரு முகங்களை உருவாக்கவோ தேவையில்லை. கூடுதலாக, நீங்கள் Google எழுத்துருக்கள் அல்லது TypeKit ஐப் பயன்படுத்தினால், Next.js தானாகவே தேர்வுமுறையைக் கையாளும்.
CSS கோப்பில் உள்ள இணைப்பு குறிச்சொல் அல்லது @import விதியைப் பயன்படுத்தி CDN இலிருந்து எழுத்துருக்களைச் சேர்க்கலாம்.
இணைப்பு குறிச்சொல்லைப் பயன்படுத்தி Next.js திட்டத்திற்கு எழுத்துருக்களை எவ்வாறு இறக்குமதி செய்வது
இணைப்புக் குறிச்சொல் எப்பொழுதும் HTML ஆவணத்தின் ஹெட் டேக்கிற்குள் செல்லும். Next.js இல் ஹெட் டேக்கைச் சேர்க்க, நீங்கள் தனிப்பயன் ஆவணத்தை உருவாக்க வேண்டும். இந்த ஆவணம் ஒவ்வொரு பக்கத்தையும் வழங்கப் பயன்படுத்தப்படும் தலை மற்றும் உடல் குறியை மாற்றியமைக்கிறது.
கோப்பை உருவாக்குவதன் மூலம் இந்த தனிப்பயன் ஆவண அம்சத்தைப் பயன்படுத்தத் தொடங்குங்கள் /pages/_document.js.
பின்னர், _document.js கோப்பின் தலைப்பகுதியில் எழுத்துருவுக்கான இணைப்பைச் சேர்க்கவும்.
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;Next.js திட்டத்தில் எழுத்துருக்களை சேர்க்க @import விதியை எவ்வாறு பயன்படுத்துவது
நீங்கள் எழுத்துருவைப் பயன்படுத்த விரும்பும் CSS கோப்பில் @import விதியைப் பயன்படுத்துவது மற்றொரு விருப்பமாகும்.
எடுத்துக்காட்டாக, வலை எழுத்துருவை இல் இறக்குமதி செய்வதன் மூலம் முழு திட்டப்பணியிலும் எழுத்துரு கிடைக்கச் செய்யவும் styles/global.css கோப்பு.
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap');
நீங்கள் இப்போது எழுத்துரு குடும்பத்தை a இல் குறிப்பிடலாம் CSS தேர்வி இது போன்ற:
எஸ்எஸ்டி விண்டோஸ் 10 ஐ எவ்வாறு தொடங்குவது
h1 {
font-family:'Libre Caslon Display', serif;
}@import விதியானது, CSS கோப்பில் எழுத்துருவை இறக்குமதி செய்ய அனுமதிக்கிறது. இணைப்பு குறிச்சொல்லைப் பயன்படுத்துவதன் மூலம் எழுத்துருவை முழு தளத்திலும் அணுக முடியும்.
எழுத்துருக்களை உள்நாட்டில் ஹோஸ்ட் செய்ய வேண்டுமா அல்லது CDN வழியாக இறக்குமதி செய்ய வேண்டுமா?
உள்நாட்டில் ஹோஸ்ட் செய்யப்பட்ட எழுத்துருக்கள் பொதுவாக CDN இலிருந்து இறக்குமதி செய்யப்படும் எழுத்துருக்களை விட வேகமாக இருக்கும். ஏனென்றால், இணையப் பக்கம் ஏற்றப்பட்டவுடன், சிடிஎன் எழுத்துருவுக்கு உலாவி கூடுதல் கோரிக்கையைச் செய்ய வேண்டியதில்லை.
நீங்கள் இறக்குமதி செய்யப்பட்ட எழுத்துருக்களைப் பயன்படுத்த விரும்பினால், தளத்தின் செயல்திறனை மேம்படுத்த அவற்றை முன்கூட்டியே ஏற்றவும். எழுத்துருக்கள் Google எழுத்துருக்கள் அல்லது Typekit இல் இருந்தால், நீங்கள் அவற்றை இறக்குமதி செய்து Next.js இன் மேம்படுத்தல் அம்சங்களைப் பயன்படுத்திக் கொள்ளலாம்.