web fonts repository

Repositori Font Web

Hosting webfont sederhana yang terinspirasi oleh Google Fonts. Ini berjalan di server Anda, menyimpan dan mendistribusikan file webfont dan menghasilkan CSS saat bepergian untuk menanamkan font pada halaman web.

Awal yang cepat

Persyaratan

1. Server HTTP Mendukung PHP ≥ 7.0
2. Komposer (diperlukan untuk instalasi)

Instalasi

1. Unduh kode sumber

Jalankan kode berikut di konsol:

composer create-project finesse/web-fonts-repository webfonts

Di mana webfonts adalah jalur ke direktori di mana repositori harus diinstal.

Atau Anda dapat membuat beberapa hal secara manual:

1. Unduh kode sumber dari GitHub dan ekstrak.
2. Buka terminal dan buka root kode sumber.
3. Instal perpustakaan dengan berjalan di terminal:

   composer install

4. Siapkan repositori dengan berjalan di terminal:

   composer run-script post-create-project-cmd

2. Izin File

Berikan nama pengguna yang server web menjalankan izin untuk menulis di dalam direktori logs .

Anda bisa menjalankan ini di konsol:

 # Don't do it in production!
chmod 777 logs

3. Server Web

Jadikan Direktori public menjadi root dokumen dari server web. Atau cukup buka http: // localhost/public jika Anda menginstal repositori ke root server web.

Buat semua permintaan untuk file yang tidak ada ditangani oleh public/index.php . Jika server Anda adalah Apache, sudah selesai.

Buat server menambahkan Access-Control-Allow-Origin: * http-header ke file font. Kalau tidak, beberapa browser akan menolak menggunakan font dari repositori.

• Apache: Yang perlu Anda lakukan adalah memastikan bahwa modul mod_header.c aktif (jalankan perintah a2enmod headers dan restart server untuk menyalakannya).
• Nginx: Gunakan instruksi ini.

Pengaturan

Letakkan file font Anda (WOFF, WOFF2, TTF, OTF, EOT, SVG) ke Direktori public/fonts . Anda dapat memisahkannya dengan subdirektori. Anda dapat mengonversi file webfont menggunakan Transfonter.

Semua pengaturan masuk ke config/settings-local.php . Jika Anda tidak memilikinya, salin dari file config/settings-local.php.example .

Parameter:

displayErrorDetails

Apakah detail kesalahan harus dikirim ke browser. Pokoknya kesalahan ditulis ke logs/app.log . Anda harus mematikannya di server produksi.

logger / level

Berapa banyak pesan yang harus dicatat ke file. Nilainya adalah salah satu konstanta PsrLogLogLevel . Anda dapat membaca lebih lanjut tentang level log di sini.

fonts

Daftar font yang tersedia di repositori. Contoh sederhana:

 return [
    // ...
    ' fonts ' => [
        ' Open Sans ' => [
            ' styles ' => [
                ' 300 ' => ' OpenSans/opensans-light.* ' ,
                ' 300i ' => ' OpenSans/opensans-light-italic.* ' ,
                ' 400 ' => ' OpenSans/opensans-regular.* ' ,
                ' 400i ' => ' OpenSans/opensans-regular-italic.* ' ,
            ]
        ],
        ' Roboto ' => [
            ' styles ' => [
                ' 300 ' => ' Roboto/roboto-light.* ' ,
                ' 400 ' => ' Roboto/roboto-regular.* ' ,
                ' 500 ' => ' Roboto/roboto-medium.* ' ,
                ' 700 ' => ' Roboto/roboto-bold.* ' ,
            ]
        ]
    ]
];

Kunci array fonts adalah nama keluarga font. Kunci gaya styles adalah nama gaya. Angka -angka dalam nama gaya adalah bobot font, i singkatan dari miring.

Jalur file font diberikan relatif terhadap direktori public/fonts . Jalur file adalah pola pencarian global. Ini berarti bahwa repositori harus mempertimbangkan semua file yang cocok dengan pola sebagai file font.

Anda dapat menemukan lebih banyak contoh dan kemungkinan di sini.

Penggunaan

Tambahkan tag <link> ke kode HTML halaman yang ingin Anda embed font:

 < link rel =" stylesheet " href =" http://web-fonts-repository.local/css?family=Open+Sans:400,400i,700,700i|Roboto:300,400 " />

Di mana http://web-fonts-repository.local adalah URL root dari repositori font web yang diinstal.

Font yang diperlukan ditentukan dengan cara yang sama seperti di Google Fonts. Keluarga font dibagi dengan | , Gaya keluarga dibagi oleh , nama keluarga dipisahkan dari daftar gaya menggunakan : .

Anda dapat menghilangkan daftar gaya. Dalam hal ini gaya reguler ( 400 ) digunakan.

 < link rel =" stylesheet " href =" http://web-fonts-repository.local/css?family=Open+Sans " />

Anda dapat menentukan nilai untuk properti gaya font-display menggunakan parameter display . Contoh:

 < link rel =" stylesheet " href =" http://web-fonts-repository.local/css?family=Open+Sans&display=swap " />

Kemudian embed font dalam kode CSS:

 body {
    font-family : 'Open Sans' , sans-serif;
}

Kompatibilitas Versi

Proyek ini mengikuti versi semantik.

Ini berarti bahwa versi tambalan sepenuhnya kompatibel (yaitu 1.2.1 dan 1.2.2), versi minor kompatibel ke belakang (yaitu 1.2.1 dan 1.3.2) dan versi utama tidak kompatibel (yaitu 1.2.1 dan 3.0). Versi pra-rilis (0.*) sedikit berbeda: versi tambalan kompatibel ke belakang dan versi kecil tidak kompatibel.

Lisensi

Mit. Lihat file lisensi untuk detailnya.