Ինչպես ավելացնել վեբ տառատեսակներ Next.js կայքում
Վեբ տառատեսակները կարող են օգնել ձեզ նախագծել ձեր ապրանքանիշը կամ կատարելագործել ձեր կայքի դիզայնը, սակայն դրանք օգտագործելու մեկից ավելի եղանակ կա:
Վեբ տառատեսակները ձեր կայքէջում հատուկ տառատեսակներ ավելացնելու հիանալի միջոց են: Այս տառատեսակները կարող են հասանելի չլինել օգտագործողի համակարգում, այնպես որ դուք պետք է դրանք ներառեք ձեր նախագծում՝ հոսթինգով դրանք կամ հղում կատարելով CDN-ի միջոցով:
Իմացեք, թե ինչպես ներառել վեբ տառատեսակներ Next.js կայքում՝ օգտագործելով այս երկու մեթոդները:
Next.js-ում Self-Hosted տառատեսակների օգտագործումը
Next.js-ում ինքնակառավարվող տառատեսակներ ավելացնելու համար անհրաժեշտ է օգտագործել @font-face CSS կանոնը: Այս կանոնը թույլ է տալիս վեբ էջին հատուկ տառատեսակներ ավելացնել:
Նախքան font-face-ն օգտագործելը, դուք պետք է ներբեռնեք այն տառատեսակները, որոնք ցանկանում եք օգտագործել: Ինտերնետում կան բազմաթիվ կայքեր, որոնք առաջարկում են անվճար տառատեսակներ, ներառյալ Google տառատեսակները, fontspace և dafont կայքերը:
Վեբ տառատեսակները ներբեռնելուց հետո դրանք փոխակերպեք տարբեր տառատեսակների՝ բազմաթիվ բրաուզերներին աջակցելու համար: Դա անելու համար կարող եք օգտագործել տառատեսակների փոխակերպման առցանց անվճար գործիքներ: Ժամանակակից վեբ բրաուզերներն աջակցում են .woff և .woff2 ձևաչափերին: Եթե Ձեզ անհրաժեշտ է աջակցել հին բրաուզերներին, ապա պետք է տրամադրեք նաև .eot և .ttf ձևաչափեր:
Ստեղծեք նոր թղթապանակ, որը կոչվում է fonts ձեր կայքի գրացուցակում և պահպանեք ձեր փոխարկված տառատեսակի ֆայլերը այնտեղ:
Հաջորդ քայլը տառատեսակների դեմքերը ներառելն է 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;
}Ներառյալ վեբ տառատեսակներ Next.js-ում CDN-ի միջոցով
Որոշ կայքեր սպասարկում են վեբ տառատեսակներ CDN-ի միջոցով, որոնք կարող եք ներմուծել ձեր հավելված: Այս մոտեցումը հեշտ է կարգավորել, քանի որ ձեզ հարկավոր չէ ներբեռնել տառատեսակներ կամ ստեղծել տառատեսակներ: Բացի այդ, եթե օգտագործում եք Google տառատեսակներ կամ TypeKit, Next.js-ն ավտոմատ կերպով կարգավորում է օպտիմալացումը:
Դուք կարող եք տառատեսակներ ավելացնել CDN-ից՝ օգտագործելով հղումի պիտակը կամ @import կանոնը CSS ֆայլի ներսում:
Ինչպես ներմուծել տառատեսակներ 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;Ինչպես օգտագործել @import կանոնը՝ Next.js նախագծում տառատեսակներ ներառելու համար
Մեկ այլ տարբերակ է օգտագործել @import կանոնը CSS ֆայլում, որը ցանկանում եք օգտագործել տառատեսակը:
Օրինակ՝ տառատեսակը հասանելի դարձրեք ամբողջ նախագծին՝ ներմուծելով վեբ տառատեսակը styles/global.css ֆայլում:
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap');
Այժմ կարող եք հղում կատարել տառատեսակների ընտանիքին CSS ընտրիչում այսպես.
h1 {
font-family:'Libre Caslon Display', serif;
}@import կանոնը թույլ է տալիս ներմուծել տառատեսակ պարունակվող CSS ֆայլում: Հղման պիտակի օգտագործումը տառատեսակը հասանելի է դարձնում ամբողջ կայքում:
Պե՞տք է տեղակայել տառատեսակները, թե՞ ներմուծել դրանք CDN-ի միջոցով:
Տեղում տեղակայված տառատեսակները սովորաբար ավելի արագ են, քան CDN-ից ներմուծված տառատեսակները: Դա պայմանավորված է նրանով, որ զննարկիչը չպետք է լրացուցիչ հարցում կատարի CDN տառատեսակին, երբ վեբ էջը բեռնվի:
Եթե ցանկանում եք օգտագործել ներմուծված տառատեսակներ, նախապես ներբեռնեք դրանք՝ կայքի աշխատանքը բարելավելու համար: Եթե տառատեսակները հասանելի են Google տառատեսակներում կամ Typekit-ում, կարող եք ներմուծել դրանք և օգտվել Next.js-ի օպտիմալացման հնարավորություններից: