Yazı tipleri sitenizin performansını yavaşlatıyor mu? Bu paketi kullanarak uygulamanızın yazı tipi yükleme süresini optimize edin.
Next.js uygulamanızı görsel olarak daha çekici hale getirmek için özel yazı tiplerini kullanmak isteyebilirsiniz. Özel yazı tiplerini kullanmak, web sitenizin görünümünü ve verdiği hissi önemli ölçüde iyileştirebilir, ancak düzgün bir şekilde optimize edilmezse sitenizin performansını da yavaşlatabilir. bu @sonraki/yazı tipi paket bu soruna bir çözümdür.
@next/font paketi, Next.js'de font yüklemeyi optimize etmenin basit ve verimli bir yolunu sağlayarak sayfa yükleme süresini ve genel performansı iyileştirir. Bu makale, Next.js projenizde @next/font'un nasıl kullanılacağı hakkında bilgi sağlar.
Paketi Kurmak
yükleyebilirsiniz @sonraki/yazı tipi terminalinizde aşağıdaki komutu çalıştırarak paketleyin:
npm yükleme @sonraki/yazı tipi
yarn kullanıyorsanız, bu komutu çalıştırarak paketi kurabilirsiniz:
iplik ekle @next/font
Google Yazı Tiplerini Optimize Etmek için @next/font'u Kullanma
bu @sonraki/yazı tipi paketi, Google yazı tiplerinin kullanımını optimize eder. bu @sonraki/yazı tipi Google yazı tiplerini Next.js sunucusunda otomatik olarak barındırır, böylece yazı tiplerini almak için Google'a herhangi bir istek gönderilmez.
Uygulamanızda bir Google yazı tipi kullanmak için, yazı tipini bir işlev olarak içe aktaracaksınız. @sonraki/yazı tipi/google içine _app.js dosya sayfalar dizin:
içe aktarmak { robot } itibaren"@sonraki/yazı tipi/google"sabit roboto = Roboto({ alt kümeler: ['Latince'] })
ihracatvarsayılanişlevUygulamam({ Bileşen, pageProps }) {
geri dönmek (
)
}
Yukarıdaki kod bloğunda, kullanarak bir değişken yazı tipi oluşturdunuz. Roboto yazı tipi işlevi. bu altküme özellik yazı tipini yalnızca Latin karakterlerine göre alt kümeler; başka bir dil kullanıyorsanız yazı tipini o dile göre alt ayarlayabilirsiniz.
Yazı tipini tanımlarken yazı tipi stiliyle birlikte yazı tipi ağırlığını da belirleyebilirsiniz:
sabit roboto = Roboto(
{
alt kümeler: ['Latince'],
ağırlık: '400',
stil: 'italik'
}
)
Dizileri kullanarak birden fazla yazı tipi ağırlığı ve yazı tipi stili belirtirsiniz.
Örneğin:
sabit roboto = Roboto(
{
alt kümeler: ['Latince'],
ağırlık: ['400', '500', '700'],
stil: ['italik', 'normal']
}
)
Ardından, bileşenlerinizi bir ana yazı tipini bir sınıf olarak etiketleyin ve ana etiket:
içe aktarmak { robot } itibaren"@sonraki/yazı tipi/google"sabit roboto = Roboto(
{
alt kümeler: ['Latince'],
ağırlık: ['400', '500', '600'],
stil: ['italik', 'normal']
}
)
ihracatvarsayılanişlevUygulamam({ Bileşen, pageProps }) {
geri dönmek (
</main>
)
}
Uygulamanızı yukarıdaki kod bloğuyla oluşturmak, yazı tipini uygulamanızın tamamına uygulayacaktır. Alternatif olarak, yazı tipini tek bir sayfaya uygulayabilirsiniz. Bunu yapmak için yazı tipini belirli bir sayfaya eklersiniz.
Şöyle:
içe aktarmak { robot } itibaren"@sonraki/yazı tipi/google"sabit roboto = Roboto(
{
alt kümeler: ['Latince'],
ağırlık: ['400', '500', '600'],
stil: ['italik', 'normal']
}
)
ihracatvarsayılanişlevEv() {
geri dönmek (Merhaba!!!</p>
</div>
)
}
Yerel Yazı Tiplerini Optimize Etmek için @next/font'u Kullanma
bu @sonraki/yazı tipi paketi ayrıca yerel yazı tiplerinin kullanımını optimize eder. aracılığıyla yerel yazı tiplerini optimize etme tekniği @sonraki/yazı tipi paketi, ince farklarla Google yazı tiplerinin optimizasyonuna oldukça benzer.
Yerel yazı tiplerini optimize etmek için yerel Yazı Tipi tarafından sağlanan işlev @sonraki/yazı tipi paket. Siz içe aktarın yerel Yazı Tipi işlevi @sonraki/yazı tipi/yerel ve ardından önce değişken yazı tipinizi tanımlayın Next.js uygulamanızdaki yazı tipini kullanma.
Şöyle:
içe aktarmak yerel Yazı Tipi itibaren"@sonraki/yazı tipi/yerel"sabit myFont = localFont({ kaynak: './yazı tipim.woff2' })
ihracatvarsayılanişlevUygulamam({ Bileşen, pageProps }) {
geri dönmek (
</main>
)
}
Değişken yazı tipini siz tanımlarsınız yazı tipim kullanmak yerel Yazı Tipi işlev. bu yerel Yazı Tipi işlev, bağımsız değişkeni olarak bir nesne alır. Nesnenin tek bir özelliği vardır, kaynakyazı tipi dosyasının dosya yoluna ayarlanan WOFF2 biçim "./yazı tipim.woff2".
Tek bir yazı tipi ailesi için birden fazla yazı tipi dosyası kullanabilirsiniz. Bunu yapmak için, kaynak özelliği, farklı yazı tiplerinin nesnelerini ve özelliklerini içeren bir diziye.
Örneğin:
sabit myFont = yerelFont(
{
kaynak: [
{
yol: './Roboto-Regular.woff2',
ağırlık: '400',
stil: 'normal',
},
{
yol: './Roboto-Italic.woff2',
ağırlık: '400',
stil: 'italik',
},
{
yol: './Roboto-Bold.woff2',
ağırlık: '700',
stil: 'normal',
},
{
yol: './Roboto-BoldItalic.woff2',
ağırlık: '700',
stil: 'italik',
},
]
}
)
@next/font'u Tailwind CSS ile Kullanma
kullanmak için @sonraki/yazı tipi Tailwind CSS ile paket, CSS değişkenlerini kullanmanız gerekir. Bunu yapmak için yazı tipinizi Google veya yerel yazı tiplerini kullanarak tanımlayacak ve ardından yazı tipinizi CSS değişken adını belirtmek için değişken seçeneğiyle yükleyeceksiniz.
Örneğin:
içe aktarmak { Inter } itibaren"@sonraki/yazı tipi/google"sabit ara = Ara({
alt kümeler: ['Latince'],
değişken: --font-inter',
})
ihracatvarsayılanişlevUygulamam({ Bileşen, pageProps }) {
geri dönmek (`${ara.değişken} yazı tipi-sans`}>
</main>
)
}
Yukarıdaki kod bloğunda yazı tipini oluşturdunuz, inter, ve değişkeni olarak ayarlayın --font-inter. bu sınıf adı ana öğenin bir kısmı daha sonra yazı tipi değişkenine ayarlanır ve yazı tipi-sans. bu değişkenler arası sınıfı uygulayacak arası sayfaya yazı tipi ve yazı tipi-sans class varsayılan sans-serif yazı tipini uygulayacaktır.
Ardından, CSS değişkenini tailwind yapılandırma dosyasına eklersiniz. tailwind.config.cjs:
/** @tip {import('tailwindcss').Config}*/
modül.ihracat = {
içerik: ["./index.html",
"./src/**/*.{js, ts, jsx, tsx}",],
tema: {
uzatmak: {
font ailesi: {
sensiz: ['var(--font-inter)'],
},
},
},
eklentiler: [],
}
Artık yazı tipini uygulamanızda uygulayabilirsiniz. yazı tipi-sans sınıf.
@next/font İle Yazı Tipi Optimizasyonu
@next/font paketi, Next.js'de font yüklemeyi optimize etmenin basit ve etkili bir yoludur. Bu paket, özel yazı tiplerinizin verimli bir şekilde yüklenmesini sağlayarak web sitenizin performansını ve kullanıcı deneyimini geliştirir. Bu makale, @next/font paketini nasıl kuracağınız ve Next.js uygulamanızda nasıl kullanacağınız hakkında bilgi sağlar. Görselleri optimize ederek sitenizin performansını daha da artırabilirsiniz.
