วิธีโฮสต์แบบอักษรเว็บของ Google บนเซิร์ฟเวอร์ของฉันเอง


271

ฉันต้องใช้แบบอักษร Google บางตัวในแอปพลิเคชันอินทราเน็ต ลูกค้าอาจมีหรือไม่มีการเชื่อมต่ออินเทอร์เน็ต เมื่ออ่านข้อกำหนดสิทธิการใช้งานปรากฏว่าได้รับอนุญาตตามกฎหมาย


6
สิ่งที่ฉันเข้าใจคือมันไม่ง่ายเหมือนการดาวน์โหลดไฟล์เดียวและบันทึก แต่ละเบราว์เซอร์รองรับรูปแบบตัวอักษรที่แตกต่างกันและ google ไม่ได้ให้วิธีที่ง่ายและรวดเร็วในการรับไฟล์ที่จำเป็นทั้งหมดเพื่อให้ตัวอักษรทำงานได้อย่างถูกต้องในทุกเบราว์เซอร์
Samarth Bhargava

1
คุณได้รับ URI ทั้งหมดจากสไตล์ชีทที่เชื่อมโยง
fuxia

38
ใช่ฉันสามารถคิดรายละเอียดทั้งหมดด้วยตัวเองหรือฉันสามารถถามคำถามเพื่อดูว่าคนใดคนหนึ่งได้ทำไว้ก่อนและมีประสบการณ์และสคริปต์เพื่อหุ้น
Samarth Bhargava

2
Google ได้คำตอบที่ต่างกันfonts.googleapis.com/css?โดยขึ้นอยู่กับส่วนหัว UA ของคุณ (อ่าน: เบราว์เซอร์ของคุณ) they ดังนั้นพวกเขาจึงให้เฉพาะสิ่งที่เบราว์เซอร์ปัจจุบันต้องการเท่านั้น หากต้องการได้รับแบบอักษรทั้งหมดที่จำเป็น (หรือแม้กระทั่งเพียงแค่ URL) คุณจะต้องโหลดหลายไฟล์ css จากเบราว์เซอร์ที่แตกต่างกันตอบสนอง ด้วยส่วนหัวที่แตกต่างกันเพื่อให้ได้ทุกอย่างที่ต้องการ
Frank Nocke

ใช้เครื่องมือนี้: npmjs.com/package/font-ranger
Do Async

คำตอบ:


217

โปรดจำไว้ว่าคำตอบของฉันมีอายุมาก

มีคำตอบที่ซับซ้อนกว่านี้ทางด้านเทคนิคเช่น:

ดังนั้นอย่าปล่อยให้ความจริงที่ว่านี่เป็นคำตอบที่ได้รับการยอมรับในปัจจุบันทำให้คุณรู้สึกว่านี่ยังเป็นคำตอบที่ดีที่สุด


ตอนนี้คุณสามารถดาวน์โหลดแบบอักษรทั้งหมดของ google ที่ตั้งค่าผ่าน github ได้ที่ที่เก็บแบบอักษร / google พวกเขายังมีซิป snapshot ~ 420MB ของตัวอักษรของพวกเขา


คุณดาวน์โหลดตัวเลือกแบบอักษรของคุณเป็นแพ็คเกจแบบซิปเพื่อให้คุณได้แบบอักษรจริงจำนวนมาก คัดลอกไปยังที่สาธารณะในที่ใดที่หนึ่งที่คุณสามารถลิงก์ไปยังจาก css ของคุณ

ในหน้าดาวน์โหลด Google webfont คุณจะพบลิงค์รวมดังนี้:

http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Candal

มันเชื่อมโยงไปยัง CSS ที่กำหนดแบบอักษรผ่านทางเครือที่@font-faceกำหนด

เปิดในเบราว์เซอร์เพื่อคัดลอกและวางลงใน CSS ของคุณเองและแก้ไข URL เพื่อรวมไฟล์ฟอนต์และรูปแบบที่ถูกต้อง

ดังนั้นนี่คือ:

@font-face {
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: 700;
  src: local('Cantarell Bold'), local('Cantarell-Bold'), url(http://themes.googleusercontent.com/static/fonts/cantarell/v3/Yir4ZDsCn4g1kWopdg-ehHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

กลายเป็นสิ่งนี้:

/* Your local CSS File */
@font-face {
    font-family: 'Cantarell';
    font-style: normal;
    font-weight: 700;
    src: local('Cantarell Bold'), local('Cantarell-Bold'), url(../font/Cantarell-Bold.ttf) format('truetype');
}

อย่างที่คุณเห็นข้อเสียของการโฮสต์ฟอนต์ในระบบของคุณด้วยวิธีนี้คือคุณ จำกัด รูปแบบตัวอักษรที่แท้จริงในขณะที่บริการ google webfont กำหนดโดยอุปกรณ์ที่เข้าถึงซึ่งรูปแบบจะถูกส่ง

นอกจากนี้ฉันต้องเพิ่ม.htaccessไฟล์ไปยังไดเรกทอรีของฉันซึ่งถือฟอนต์ที่มีประเภท mime เพื่อหลีกเลี่ยงข้อผิดพลาดจากการโผล่ขึ้นมาใน Chrome Dev Tools

สำหรับการแก้ปัญหานี้จะมีเพียงประเภทความจริงเป็นสิ่งจำเป็น font-awesomeแต่การกำหนดมากขึ้นไม่เจ็บเมื่อคุณต้องการรวมแบบอักษรที่แตกต่างกันด้วยเช่น

#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

37
คุณไม่ได้ถูก จำกัด ให้ TrueType คุณเพียงแค่ต้องดาวน์โหลดไฟล์. woff เช่นกัน ใส่ 'http: //themes.googleusercontent.com/static/fonts/cantarell/v3/...80lGh-uXM.woff' ลงในเว็บเบราว์เซอร์ของคุณบันทึกเป็น '/fonts/Cantarell-Bold.woff' และอัปเดต css เพื่อจับคู่ (url ('/ fonts / Canterell-Bold.woff'))
Anthony Briggs

2
ไม่มีเหตุผลใดที่ Google มีรูปแบบตัวอักษรหลายเรื่อง - TrueType ไม่ทำงานบนเบราว์เซอร์เก่า WOFF เป็นมาตรฐาน W3C
Michael McGinnis

3
เลื่อนลงไปที่โซลูชันสคริปต์ทุบตี - สุดยอด!
Dr. Max Völkel

3
ไฟล์จะเปลี่ยนเนื้อหาขึ้นอยู่กับเบราว์เซอร์ที่ใช้
Krii

3
การตอบสนองนี้มีความซับซ้อนในการปรับใช้มากกว่าทางเลือกที่แสดงด้านล่าง นอกจากนี้ยังมีเทคนิคที่ไม่ถูกต้องในหลาย ๆ แง่มุม (ไม่ จำกัด TTF, TTF เป็นความคิดที่ไม่ดีซึ่งจะให้ผลลัพธ์ที่แตกต่างกันต่อเบราว์เซอร์คุณไม่สามารถโฮสต์แบบอักษรที่ใดก็ได้สาธารณะตั้งแต่กำเนิดเดียวกัน) โปรดอย่าทำเช่นนั้นใช้คำตอบอย่างใดอย่างหนึ่งด้านล่าง
Robin Berjon

202

มีเครื่องมือlocalfont.comเพื่อช่วยคุณดาวน์โหลดชุดตัวอักษรทั้งหมด มันสร้าง CSS ที่สอดคล้องกันสำหรับการนำไปใช้ เลิกใช้

localfont หยุดทำงาน แต่ตามที่Damir แนะนำคุณสามารถใช้google-webfonts-helper แทน



แม้ว่าจะยอดเยี่ยม แต่เมื่อคุณต้องการแบบอักษรภาษาอื่นคุณต้องหาวิธีแก้ปัญหาอื่น ๆ
anges244

แล้วชุดอักขระที่แตกต่างกันอย่างไร
หลอดแก้ว

1
ที่นี่นักพัฒนาของ Google บอกว่าการโฮสต์ด้วยตนเองแบบอักษรของ Google มีข้อเสียของตัวเองแทนให้ตรวจสอบเคล็ดลับเหล่านี้เพื่อใช้ Google แบบอักษร CDN และเพิ่มความเร็วของหน้า
shaijut

@PauloCoghi เครื่องมืออาจรายงานว่าเว็บไซต์สามารถเข้าถึงได้ แต่เห็นได้ชัดว่ามีบางอย่างผิดปกติตั้งแต่ฉันและคนอื่น ๆ ไม่สามารถดูได้
Lawyerson

147

ทางออกที่ดีคือgoogle-อักษรบนเว็บผู้ช่วย

ช่วยให้คุณสามารถเลือกชุดตัวอักษรมากกว่าหนึ่งชุดซึ่งช่วยประหยัดเวลาได้มาก


เครื่องมือที่ยอดเยี่ยม! ฉันรักมัน. คุณสามารถดูตัวอย่างแบบอักษรและดาวน์โหลดไฟล์ที่จำเป็นทั้งหมดได้ด้วยคลิกเดียว
cuixiping

เครื่องมือที่ดีมาก ทำงานได้ดีมากและอนุญาตให้ดาวน์โหลดlatin-extแบบอักษรด้วย
piotrekkr

3
นี่คือตัวเลือกที่ดีที่สุด มันทำทุกอย่างคุณยังสามารถระบุคำนำหน้าโฟลเดอร์แบบอักษร
Maciej Krawczyk

63

ฉันเขียนสคริปต์ทุบตีที่ดึงไฟล์ CSS บนเซิร์ฟเวอร์ของ Google ด้วยตัวแทนผู้ใช้ที่แตกต่างกันดาวน์โหลดรูปแบบตัวอักษรที่แตกต่างกันไปยังไดเรกทอรีท้องถิ่นและเขียนไฟล์ CSS รวมถึงพวกเขา โปรดทราบว่าสคริปต์ต้องการ Bash เวอร์ชัน 4.x

ดูhttps://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/สำหรับสคริปต์ (ฉันไม่ได้ทำซ้ำที่นี่ดังนั้นฉันต้องอัปเดตในเท่านั้น สถานที่แห่งหนึ่งเมื่อฉันต้องการ)

แก้ไข:ย้ายไปที่https://github.com/neverpanic/google-font-download


4
มันยอดเยี่ยมกว่านี้แล้ว! (ฉันหวังว่ามันใช้งานได้ดียังไม่ผ่านการทดสอบ) ฉันค้นหาบางสิ่งบางอย่างเช่นแบบฟอร์มนี้เป็นครั้งคราวในช่วงหลายปี ไม่ล้อเล่นฉันก็เริ่มเขียนสคริปต์ของตัวเองที่ยังไม่สมบูรณ์ จิตใจของมันโบยบินจนมีคนเพียงไม่กี่คนที่ต้องการสิ่งนี้ Google กำลังซ่อนแบบอักษรนี้ไว้หลังสตริงที่สร้างขึ้นและไม่มีโอเพนซอร์ซจริง ๆ แล้วไฟล์ webfont ใน repo เท่านั้นที่เป็น ttf พวกเขาต้องการให้เราใช้แบบอักษรของพวกเขาพวกเขาต้องการให้เราใช้เซิร์ฟเวอร์เพราะพวกเขาใช้สิ่งนี้ในทางที่ผิดเพื่อติดตามผู้คน และแม้แต่คนที่มีความเป็นส่วนตัวมากที่สุดก็ยังฝังฟอนต์จากเซิร์ฟเวอร์ googles
redanimalwar

1
ข้อกังวลเดียวของฉันคือใบอนุญาตแบบอักษรจริงไม่ได้ศึกษาอย่างใกล้ชิด ทั้งหมดที่ฉันรู้คือใบอนุญาตแบบอักษรแตกต่างจาก GPL หรือ MIT ดังนั้นเราจึงได้รับอนุญาตตามกฎหมายให้จับแบบอักษรนี้จากเซิร์ฟเวอร์ของ Google และให้บริการด้วยตนเองได้หรือไม่ อีกครั้งฉันไม่เชื่อว่านาทีที่ Google จะให้แบบอักษรทั้งหมดนี้เพียงเพื่อทำให้โลกดีขึ้นพวกเขาจ่าย devs จริงเพื่อผลิตแบบอักษรเปิดสำหรับพวกเขาเพื่อให้พวกเขาได้รับบางสิ่งบางอย่างข้อมูลจำนวนมาก และหากไม่ใช่ความเป็นส่วนตัวของคุณคุณสามารถทดสอบแบบอักษรนี้ได้โดยไม่ต้องใช้อินเทอร์เน็ตด้วยวิธีนี้
redanimalwar

2
คำตอบนี้ควรมีการปรับปรุงให้มากขึ้นเพราะสคริปต์นี้สามารถดาวน์โหลดรูปแบบตัวอักษรและชุดย่อยทั้งหมดในทางตรงกันข้ามกับ localfont.com
piotrekkr

ฉันรู้ว่าคุณจะพาฉันไปเป็นคนขี้เกียจ แต่ในฐานะผู้ใช้งาน windows โดยเฉลี่ยมันน่าเสียดายที่ต้องรวบรวมมันและอื่น ๆ เพื่อให้สามารถใช้งานได้ ...
Lucas Bustamante

@LucasB ไม่มีการรวบรวมที่เกี่ยวข้อง มันเป็นสคริปต์ทุบตี ฉันรู้ว่า Windows ไม่ได้มาพร้อมกับ Bash แต่สามารถนำสิ่งนี้กลับมาใช้ใหม่ได้ในลักษณะที่รองรับ Windows มันไม่ได้เป็นส่วนหนึ่งของกรณีการใช้งานของฉันดังนั้นฉันจึงไม่ได้ใช้เวลากับมัน
Neverpanic

14

เนื้อหาของไฟล์ CSS (จาก URL รวม) ขึ้นอยู่กับเบราว์เซอร์ที่ฉันดู ตัวอย่างเช่นเมื่อเรียกดูhttp://fonts.googleapis.com/css?family=Open+Sansโดยใช้ Chrome ไฟล์จะมีลิงก์ WOFF เท่านั้น ใช้ Internet Explorer (ด้านล่าง) รวมทั้ง EOT และ WOFF ฉันวางลิงก์ทั้งหมดลงในเบราว์เซอร์เพื่อดาวน์โหลด

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

เมื่อคุณโฮสต์แบบอักษรบนเว็บของคุณเองคุณจะต้องเชื่อมโยงกับแบบอักษรแต่ละประเภทอย่างถูกต้องจัดการกับข้อผิดพลาดเบราว์เซอร์ดั้งเดิม ฯลฯ เมื่อคุณใช้ Google Web Fonts (โฮสต์โดย Google) Google จะเชื่อมโยงกับแบบอักษรที่ถูกต้องสำหรับเบราว์เซอร์นั้นโดยอัตโนมัติ


1
+1 สำหรับการเชื่อมโยงไปยังบทความที่อธิบายรหัส CSS "ทั่วไป" เพื่อใช้และหนึ่ง "ลดลง" สำหรับเบราว์เซอร์ที่ทันสมัย!
ItalyPaleAle

2
ดังนั้นฉันจะต้องให้บริการเบราว์เซอร์อย่างชาญฉลาดด้วยรูปแบบที่แตกต่างกันไป ฉันรู้ว่าสิ่งนี้เป็นสิ่งที่ท้อแท้อย่างมาก แต่เราให้บริการหน้าเว็บของเรากับลูกค้าชาวจีนบางคนและเป็นเหตุผลหลักที่เราต้องการโฮสต์ พวกเขาปิดกั้นทรัพยากรของ Google ส่วนใหญ่
ไลโอเนลชาน

6

มันได้รับอนุญาตตามกฎหมายตราบเท่าที่คุณติดอยู่กับเงื่อนไขของใบอนุญาตแบบอักษร - มักจะ OFL

คุณจะต้องมีชุดของรูปแบบอักษรบนเว็บและFont Squirrel Webfont Generatorสามารถสร้างสิ่งเหล่านี้ได้

แต่ OFL จำเป็นต้องเปลี่ยนแบบอักษรหากมีการแก้ไขและการใช้เครื่องกำเนิดหมายถึงการปรับเปลี่ยนแบบอักษร


หรือขึ้นอยู่กับแบบอักษรคุณสามารถรับชุด Webfont ได้โดยตรงจากกระรอกตัวอักษร fontsquirrel.com/fonts/open-sans
Jack Frost

3

ฉันมีสคริปต์ที่เขียนด้วย PHP คล้ายกับของ@neverpanicที่ดาวน์โหลดทั้ง CSS และแบบอักษรโดยอัตโนมัติ ( ทั้งคำใบ้และไม่ถูกคำแนะนำ ) จาก Google จากนั้นจะให้บริการ CSS และแบบอักษรที่ถูกต้องจากเซิร์ฟเวอร์ของคุณเองตาม User Agent มันเก็บแคชของตัวเองดังนั้นแบบอักษรและ CSS ของตัวแทนผู้ใช้จะถูกดาวน์โหลดเพียงครั้งเดียว

มันอยู่ในระยะก่อนกำหนด แต่สามารถพบได้ที่นี่: DaAwesomeP / php-offline-fonts


2

ตามที่คุณต้องการโฮสต์แบบอักษรทั้งหมด (หรือบางส่วน) ที่เซิร์ฟเวอร์ของคุณเองคุณดาวน์โหลดแบบอักษรจาก repo นี้และใช้ตามที่คุณต้องการ: https://github.com/praisedpk/Local-Google-Fonts

หากคุณต้องการทำเช่นนี้เพื่อแก้ไขปัญหาการแคชเบราว์เซอร์ที่มากับ Google Fonts คุณสามารถใช้CDN แบบอักษรสำรองและรวมแบบอักษรเป็น:

<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />

หรือแบบอักษรเฉพาะเช่น:

<link href="https://pagecdn.io/lib/easyfonts/lato.css" rel="stylesheet" />

1

ฉันใช้grunt-local-googlefontในงาน grunt

module.exports = function(grunt) {

    grunt.initConfig({
       pkg: grunt.file.readJSON('package.json'),

        "local-googlefont" : {
            "opensans" : {
                "options" : {
                    "family" : "Open Sans",
                    "sizes" : [
                        300,
                        400,
                        600
                    ],
                    "userAgents" : [
                        "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)",  //download eot
                        "Mozilla/5.0 (Linux; U; Android 4.1.2; nl-nl; GT-I9300 Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30", //download ttf
                        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1944.0 Safari/537.36" //download woff and woff2
                    ],
                    "cssDestination" : "build/fonts/css",
                    "fontDestination" : "build/fonts",
                    "styleSheetExtension" : "css",
                    "fontDestinationCssPrefix" : "fonts"

                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-local-googlefont');
 };

จากนั้นเพื่อดึงข้อมูล:

grunt local-googlefont:opensans

หมายเหตุฉันใช้ส้อมจากต้นฉบับซึ่งทำงานได้ดีกว่าเมื่อดึงแบบอักษรด้วยช่องว่างในชื่อ


1

คุณสามารถดาวน์โหลดรูปแบบตัวอักษรทั้งหมดได้โดยตรงจาก Google และรวมไว้ใน css ของคุณเพื่อให้บริการจากเซิร์ฟเวอร์ของคุณ ด้วยวิธีนี้คุณไม่ต้องกังวลกับ Google ในการติดตามผู้ใช้เว็บไซต์ของคุณ อย่างไรก็ตามข้อเสียอาจทำให้ความเร็วในการแสดงผลของคุณช้าลง แบบอักษรมีความต้องการทรัพยากรค่อนข้างมาก ฉันยังไม่ได้ทำการทดสอบใด ๆ ในเรื่องนี้และสงสัยว่าใครมีความคิดที่คล้ายกัน


1

วิธีการแก้ปัญหาของฉันคือการดาวน์โหลดไฟล์ TTF จาก Google เว็บแบบอักษรแล้วใช้onlinefontconverter.com


1

ฉันสร้างสคริปต์ PHP ขนาดเล็กเพื่อรับลิงก์ดาวน์โหลดจาก URL นำเข้า CSS ของ Google Fonts เช่น: https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27pxs.Lato:400,300italic,900italic

คุณสามารถใช้เครื่องมือนี้ได้ที่นี่: http://nikoskip.me/gfonts.php

ตัวอย่างเช่นหากคุณใช้ URL นำเข้าด้านบนคุณจะได้รับสิ่งนี้:

ป้อนคำอธิบายรูปภาพที่นี่


1

หากคุณใช้ Webpack คุณอาจสนใจโครงการนี้: https://github.com/KyleAMathews/typefaces

เช่นคุณต้องการใช้แบบอักษร Roboto:

npm install typeface-roboto --save

จากนั้นเพียงนำเข้ามาไว้ที่จุดเข้าแอพของคุณ (ไฟล์ js หลัก):

import 'typeface-roboto'

1

คุณสามารถติดตามสคริปต์ที่พัฒนาโดยใช้ PHP คุณสามารถดาวน์โหลดแบบอักษร google ใด ๆ ได้ที่ไหนโดยใช้สคริปต์ มันจะดาวน์โหลดแบบอักษรและสร้างไฟล์ CSS และเก็บถาวรเพื่อ zip
คุณสามารถดาวน์โหลดซอร์สโค้ดได้จาก GitHub https://github.com/sourav101/google-fonts-downloader

$obj = new GoogleFontsDownloader;

if(isset($_GET['url']) && !empty($_GET['url']))
{
    $obj->generate($_GET['url']);
}

if(isset($_GET['download']) && !empty($_GET['download']) && $_GET['download']=='true')
{
    $obj->download();
}

/**
* GoogleFontsDownloader
* Easy way to download any google fonts.
* @author     Shohrab Hossain
* @version    1.0.0 
*/
class GoogleFontsDownloader
{
    private $url      = '';
    private $dir      = 'dist/';
    private $fontsDir = 'fonts/';
    private $cssDir   = 'css/';
    private $fileName = 'fonts.css';
    private $content  = '';
    private $errors   = '';
    private $success  = '';
    public  $is_downloadable  = false;

    public function __construct()
    {
        ini_set('allow_url_fopen', 'on');
        ini_set('allow_url_include', 'on');
    }

    public function generate($url = null)
    {
        if (filter_var($url, FILTER_VALIDATE_URL) === FALSE) 
        {
            $this->errors .= "<li><strong>Invalid url!</strong> $url</li>";
        }
        else
        {
            $this->url = $url;
            // delete previous files
            $this->_destroy();
            // write font.css
            $this->_css();
            // write fonts
            $this->_fonts();
            // archive files
            $this->_archive();
        }  
        // show all messages
        $this->_message();
    }

    public function download()
    { 
        // Download the created zip file
        $zipFileName = trim($this->dir, '/').'.zip';
        if (file_exists($zipFileName))
        {
            header("Content-type: application/zip");
            header("Content-Disposition: attachment; filename = $zipFileName");
            header("Pragma: no-cache");
            header("Expires: 0");
            readfile("$zipFileName");

            // delete file 
            unlink($zipFileName);
            array_map('unlink', glob("$this->dir/*.*"));
            rmdir($this->dir);

        } 
    }   

    private function _archive()
    {
        if (is_dir($this->dir))
        {
            $zipFileName = trim($this->dir, '/').'.zip';
            $zip = new \ZipArchive(); 
            if ($zip->open($zipFileName, ZipArchive::CREATE) === TRUE) 
            {
                $zip->addGlob($this->dir. "*.*");
                $zip->addGlob($this->dir. "*/*.*");
                if ($zip->status == ZIPARCHIVE::ER_OK)
                {
                    $this->success .= '<li>Zip create successful!</li>';
                    $this->is_downloadable = true;
                }
                else 
                {
                    $this->errors .= '<li>Failed to create to zip</li>';
                } 
            } 
            else 
            {
                $this->errors .= '<li>ZipArchive not found!</li>';
            }  
            $zip->close(); 
        }
        else
        {
            $this->errors .= "<li><strong>File</strong> not exists!</li>";
        } 
    }   

    private function _css()
    {  
        $filePath = $this->dir.$this->cssDir.$this->fileName;
        $content  = $this->_request($this->url);
        if (!empty($content))
        {
            if (file_put_contents($filePath, $content))
            {
                $this->success .= "<li>$this->fileName generated successful!</li>";
                $this->content = $content; 
            }
            else
            {
                $this->errors .= '<li>Permission errro in $this->fileName! Unable to write $filePath.</li>';
            }
        }
        else
        {
            $this->errors .= '<li>Unable to create fonts.css file!</li>';
        }
    }

    private function _fonts()
    {
        if (!empty($this->content))
        {
            preg_match_all('#\bhttps?://[^\s()<>]+(?:\([\w\d]+\)|([^[:punct:]\s]|/))#', $this->content, $match);
            $gFontPaths = $match[0];
            if (!empty($gFontPaths) && is_array($gFontPaths) && sizeof($gFontPaths)>0)
            {
                $count = 0;
                foreach ($gFontPaths as $url) 
                {
                    $name     = basename($url);
                    $filePath = $this->dir.$this->fontsDir.$name;
                    $this->content = str_replace($url, '../'.$this->fontsDir.$name, $this->content);

                    $fontContent  = $this->_request($url);
                    if (!empty($fontContent))
                    {
                        file_put_contents($filePath, $fontContent);
                        $count++;
                        $this->success .= "<li>The font $name downloaded!</li>";
                    }
                    else
                    {
                        $this->errors .= "<li>Unable to download the font $name!</li>";
                    } 
                }

                file_put_contents($this->dir.$this->cssDir.$this->fileName, $this->content);
                $this->success .= "<li>Total $count font(s) downloaded!</li>";
            }
        }
    }

    private function _request($url)
    {
        $ch = curl_init(); 
        curl_setopt_array($ch, array(
            CURLOPT_SSL_VERIFYPEER => FALSE,
            CURLOPT_HEADER         => FALSE,
            CURLOPT_FOLLOWLOCATION => TRUE,
            CURLOPT_URL            => $url,
            CURLOPT_REFERER        => $url,
            CURLOPT_RETURNTRANSFER => TRUE,
        ));
        $result = curl_exec($ch);
        curl_close($ch);

        if (!empty($result))
        {
            return $result;
        } 
        return false;
    }

    private function _destroy()
    {
        $cssPath = $this->dir.$this->cssDir.$this->fileName;
        if (file_exists($cssPath) && is_file($cssPath))
        {
            unlink($cssPath);
        } 
        else
        {
            mkdir($this->dir.$this->cssDir, 0777, true);
        }

        $fontsPath = $this->dir.$this->fontsDir;
        if (!is_dir($fontsPath))
        {
            mkdir($fontsPath, 0777, true);
        }
        else
        {
            array_map(function($font) use($fontsPath) {
                if (file_exists($fontsPath.$font) && is_file($fontsPath.$font))
                {
                    unlink($fontsPath.$font);
                }
            }, glob($fontsPath.'*.*')); 
        }
    }

    private function _message()
    {
        if (strlen($this->errors)>0)
        {
            echo "<div class='alert alert-danger'><ul>$this->errors</ul></div>";
        }  
        if (strlen($this->success)>0)
        {
            echo "<div class='alert alert-success'><ul>$this->success</ul></div>";
        } 
    } 
}

0

นอกจากนี้ในการk0pernicusผมอยากจะแนะนำที่ดีที่สุดที่ให้บริการท้องถิ่น นอกจากนี้ยังเป็นสคริปต์ทุบตี (v4) เพื่อให้ผู้ให้บริการเว็บเซิร์ฟเวอร์สามารถดาวน์โหลดและให้บริการแบบอักษรเว็บของ Google จากเว็บเซิร์ฟเวอร์ของตนเอง แต่นอกเหนือไปจากสคริปต์ทุบตีอื่น ๆ มันช่วยให้ผู้ใช้อัตโนมัติ (ผ่าน cron และอื่น ๆ ) โดยอัตโนมัติให้บริการไฟล์ฟอนต์และ css-files ที่ทันสมัย


0

มีสคริปต์ที่ง่ายมากที่เขียนด้วย Java ธรรมดาเพื่อดาวน์โหลดแบบอักษรทั้งหมดจากลิงก์ Google Web Font (รองรับแบบอักษรหลายตัว) นอกจากนี้ยังดาวน์โหลดไฟล์ CSS และปรับให้เหมาะกับไฟล์ในเครื่อง user-agent สามารถปรับเปลี่ยนเพื่อรับไฟล์อื่นนอกเหนือจาก WOFF2 เท่านั้น ดูhttps://github.com/ssc-hrep3/google-font-download

สามารถเพิ่มไฟล์ผลลัพธ์ลงในกระบวนการบิลด์ได้ (เช่น webpack build like vue-webpack)


0

คุณสามารถดาวน์โหลดแบบอักษรต้นฉบับได้จากhttps://github.com/google/fonts

หลังจากนั้นใช้font-rangerเครื่องมือเพื่อแยกแบบอักษร Unicode ขนาดใหญ่ของคุณออกเป็นหลายชุดย่อย (เช่นละติน, ซิริลลิก) คุณควรทำสิ่งต่อไปนี้ด้วยเครื่องมือ:

  • สร้างชุดย่อยสำหรับแต่ละภาษาที่คุณสนับสนุน
  • ใช้การตั้งค่าช่วง unicode สำหรับการบันทึกแบนด์วิดท์
  • ลบ bloat ออกจากแบบอักษรของคุณและปรับให้เหมาะกับเว็บ
  • แปลงฟอนต์ของคุณเป็นฟอร์แมท woff2 ที่ถูกบีบอัด
  • ให้. fallback ทางเลือกสำหรับเบราว์เซอร์รุ่นเก่า
  • ปรับแต่งการโหลดและการแสดงผลแบบอักษร
  • สร้างไฟล์ CSS ด้วยกฎ @ font-face
  • แบบอักษรเว็บโฮสต์ด้วยตนเองหรือใช้ภายในเครื่อง

Font-Ranger : https://www.npmjs.com/package/font-ranger

PS นอกจากนี้คุณยังสามารถทำให้เป็นอัตโนมัติโดยใช้ Node.js API

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.