Cara Menambah Fon Web pada Tapak Web Next.js

Cara Menambah Fon Web pada Tapak Web Next.js

Fon web ialah cara terbaik untuk menambah fon tersuai pada tapak web anda. Fon ini mungkin tidak tersedia pada sistem pengguna, jadi anda perlu memasukkannya ke dalam projek anda dengan mengehosnya atau merujuknya melalui CDN.





Ketahui cara memasukkan fon web dalam tapak web Next.js menggunakan dua kaedah ini.



MAKEUSEOF VIDEO OF THE DAY

Menggunakan Fon Dihoskan Sendiri dalam Next.js

Untuk menambah fon yang dihoskan sendiri dalam Next.js, anda perlu gunakan peraturan CSS @font-face . Peraturan ini membolehkan anda menambah fon tersuai pada halaman web.





macbook air m1 vs macbook pro m1

Sebelum menggunakan font-face, anda mesti memuat turun fon yang anda ingin gunakan. Terdapat banyak tapak di internet yang menawarkan fon percuma , termasuk fon Google, ruang fon dan tapak web dafont.

Sebaik sahaja anda memuat turun fon web, tukarkannya kepada format fon yang berbeza untuk menyokong berbilang penyemak imbas. Anda boleh gunakan alat penukaran fon dalam talian percuma untuk berbuat demikian. Pelayar web moden menyokong format .woff dan .woff2. Jika anda perlu menyokong penyemak imbas lama, anda juga harus menyediakan format .eot dan .ttf.



Buat folder baharu bernama fon dalam direktori tapak anda dan simpan fail fon anda yang ditukar di sana.

Langkah seterusnya ialah memasukkan muka fon dalam styles/global.css fail untuk menjadikannya tersedia ke seluruh tapak web. Contoh ini menunjukkan muka fon untuk fon duyung dalam huruf tebal:



@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; 
}

Setelah anda memasukkan fail fon, anda boleh menggunakan fon tersebut dalam fail CSS peringkat komponen:

h1 { 
    font-family: Mermaid; 
}

Termasuk Font Web ke Next.js melalui CDN

Sesetengah tapak web menyediakan fon web melalui CDN yang boleh anda import ke apl anda. Pendekatan ini mudah disediakan kerana anda tidak perlu memuat turun fon atau membuat muka fon. Selain itu, jika anda menggunakan fon Google atau TypeKit, Next.js secara automatik mengendalikan pengoptimuman.



cara menyembunyikan rangkaian wifi anda

Anda boleh menambah fon daripada CDN menggunakan teg pautan atau peraturan @import di dalam fail CSS.

Teg pautan sentiasa masuk ke dalam teg kepala dokumen HTML. Untuk menambah teg kepala dalam Next.js, anda mesti membuat dokumen tersuai. Dokumen ini mengubah suai teg kepala dan badan yang digunakan untuk memaparkan setiap halaman.

Mula menggunakan ciri dokumen tersuai ini dengan mencipta fail /pages/_document.js.

Kemudian, masukkan pautan ke fon di kepala fail _document.js.

bagaimana saya menukar akaun google lalai saya di chrome 
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;

Cara Menggunakan Peraturan @import untuk Memasukkan Fon dalam Projek Next.js

Pilihan lain ialah menggunakan peraturan @import dalam fail CSS yang anda mahu gunakan fon.

Sebagai contoh, jadikan fon tersedia di seluruh projek dengan mengimport fon web dalam styles/global.css fail.

@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap');

Anda kini boleh merujuk keluarga fon dalam a pemilih CSS seperti ini:

h1 { 
    font-family:'Libre Caslon Display', serif; 
}

Peraturan @import membolehkan anda mengimport fon dalam fail CSS yang terkandung. Menggunakan teg pautan menjadikan fon boleh diakses di seluruh tapak.

Patutkah Anda Menghoskan Fon Secara Tempatan atau Mengimportnya melalui CDN?

Fon yang dihoskan secara tempatan biasanya lebih pantas daripada fon yang diimport daripada CDN. Ini kerana penyemak imbas tidak perlu membuat permintaan tambahan kepada fon CDN setelah halaman web dimuatkan.

Jika anda ingin menggunakan fon yang diimport, pramuatnya untuk meningkatkan prestasi tapak. Jika fon tersedia pada fon Google atau Typekit, anda boleh mengimportnya dan memanfaatkan ciri pengoptimuman Next.js.