หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ดาวน์โหลดแบบอักษร
ดาวน์โหลด

Google Font โฮสต์ในท้องถิ่น

Web Crawler อัตโนมัติสำหรับการแยกและเตรียม Google Fonts สำหรับการใช้งานในท้องถิ่น นี่คือความไม่พอใจเนื่องจากกฎหมายคุ้มครองข้อมูลในยุโรป (DSGVO) การดาวน์โหลดและการเชื่อมโยงไฟล์ฟอนต์ทั้งหมดด้วยมือนั้นเป็นเรื่องที่เรียบร้อย ดังนั้นฉันจึงเขียนสคริปต์ Python ขนาดเล็กเพื่อทำให้กระบวนการเป็นไปโดยอัตโนมัติ

เมื่อเข้าถึง Google Fonts ผ่าน URL "fonts.googleapis.com" ไฟล์จะถูกสร้างขึ้นหลังจากคำขอ ดังนั้นจึงจำเป็นต้องใช้ webcrawler เพื่อเข้าถึงฟอนต์-ข้อมูลที่รันไทม์

ข้อกำหนด

  • เบราว์เซอร์ Firefox
  • Python> 3.6
  • แพ็คเกจ Python Pip:
    • ซีลีเนียม
    • Geckodriver-Autoinstaller
    • การร้องขอ

การใช้งาน

เริ่มระบบ CLI ในโฟลเดอร์หลักของ repo นี้และเรียกใช้คำสั่งต่อไปนี้: 

 python getGoogleFonts.py

หลังจากนั้นค้นหาลิงก์ Google แบบเก่ารวมถึงลิงก์ มันควรจะดูอะไรแบบนี้: 

 <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">

...

ป้อน URL เพียงแค่ตัวเองใน Python CLI PROMT: 

 Please copy your Google® fonts include URL here:

https://fonts.googleapis.com/css?family=Cormorant+Garamond:700,700i|Nunito+Sans:400,700,900

หลังจากนั้นคุณจะสามารถเข้าถึงไฟล์ต่าง ๆ ทั้งหมดภายในโฟลเดอร์ export -โฟลเดอร์

ฟอนต์ทั้งหมดจะถูกดาวน์โหลดไปยัง fonts -Folder นอกจากนั้น header.html เช่นเดียวกับ font.css -file ถูกสร้างขึ้น

font.css -file มีลักษณะเช่นนี้: 

 /* 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;
	...

จะทำอย่างไรกับเอาต์พุต

  1. ใส่ fonts ที่สร้างขึ้นใหม่ -โฟลเดอร์ลงในโฟลเดอร์ src ของรูทโครงการหลักของคุณ หากคุณไม่มี src -Folder เพียงสร้างใหม่ นอกจากนี้คุณยังสามารถปรับเส้นทางของแบบอักษรทั้งหมด src -attributes ใน font.css -File เช่นเดียวกับ header.html -file

  2. วาง font.css -file ลงใน css -folder ของรูทโครงการหลักของคุณ หากคุณต้องการใช้โฟลเดอร์อื่นของโครงการของคุณเพียงปรับเส้นทางของบรรทัดสุดท้ายใน header.html

  3. คัดลอกเนื้อหาของ header.html ลงในส่วนส่วนหัวของทุกไซต์ที่คุณต้องการใช้แบบอักษรบน รหัสของคุณควรมีลักษณะเช่นนี้: 

     <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"  />
	...

แผนงาน

สิ่งที่จะนำไปใช้

  • การเลือก / การตรวจสอบอัตโนมัติเบราว์เซอร์จะใช้สำหรับการรวบรวมข้อมูล
  • ผู้ใช้ PROMP เพื่อเลือกชุดอักขระตัวอักษรที่จะส่งออก - ปัจจุบันมีเพียงภาษาละตินและละติน-ext เท่านั้นที่ใช้แล้ว !!
  • อินพุตผู้ใช้ PROMT สำหรับเส้นทางโครงการของรูปแบบสไตล์และแบบอักษรโฟลเดอร์
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด