googleFontCrawler
1.0.0
Perayap web otomatis untuk mengekstraksi dan mempersiapkan Google Font untuk penggunaan lokal. Ini adalah Nessessary karena undang -undang perlindungan data Eropa. (DSGVO) Mengunduh dan menghubungkan semua file font dengan tangan itu rapi. Jadi saya menulis skrip Python kecil untuk mengotomatiskan proses.
Saat mengakses URL Google di atas URL "fonts.googleapis.com", file dihasilkan segera setelah permintaan. Dengan demikian WebCrawler diperlukan untuk mengakses data font saat runtime.
Mulai sistem CLI di folder utama repo ini dan jalankan perintah berikut:
python getGoogleFonts.py
Setelah itu, temukan tautan Google-Font yang lama. Seharusnya terlihat seperti ini:
<html>
<header>
<title>My website</title>
...
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:700,700i|Nunito+Sans:400,700,900" rel="stylesheet">
...
Masukkan hanya url itu sendiri ke promt Python Cli:
Please copy your Google® fonts include URL here:
https://fonts.googleapis.com/css?family=Cormorant+Garamond:700,700i|Nunito+Sans:400,700,900
Setelah itu Anda akan dapat mengakses semua file Nessessary di dalam Folder export
Semua font akan diunduh ke fonts -folder. Selain itu, header.html aswell sebagai font.css -file dihasilkan.
The font.css -file terlihat seperti ini:
/* CORMORANT GARAMOND | latin-ext */
/* italic-700 */
@font-face{
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 700;
src: url('../src/fonts/Cormorant-Garamond-italic-700-latin-ext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* normal-700 */
@font-face{
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 700;
...
Masukkan fonts -folder yang baru dihasilkan ke dalam src -folder dari root proyek utama Anda. Jika Anda tidak memiliki src -Folder, cukup buat yang baru. Anda juga dapat secara manual menyesuaikan jalur semua font src -attributes di font.css -file Aswell sebagai header.html -file.
Tempatkan font.css -file ke dalam css -folder dari root proyek utama Anda. Jika Anda ingin menggunakan folder lain dari proyek Anda, cukup sesuaikan jalur baris terakhir di header.html
Salin isi header.html ke bagian header dari setiap situs yang ingin Anda gunakan font. Kode Anda harus terlihat seperti ini:
<html>
<header>
<title>My website</title>
...
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Cormorant-Garamond-italic-700-latin-ext.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Cormorant-Garamond-normal-700-latin-ext.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Cormorant-Garamond-italic-700-latin.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Cormorant-Garamond-normal-700-latin.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-400-latin-ext.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-700-latin-ext.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-900-latin-ext.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-400-latin.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-700-latin.woff2" crossorigin="anonymous" />
<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-900-latin.woff2" crossorigin="anonymous" />
<link rel="preload stylesheet" as="style" href="./css/font.css" />
...
Apa yang belum diterapkan
