การดาวน์โหลดแบบอักษร Google และตั้งค่าไซต์ออฟไลน์ที่ใช้

ฉันมีแม่แบบและมีการอ้างอิงถึงแบบอักษร Google เช่นนี้:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>

ฉันจะดาวน์โหลดและตั้งค่าให้ใช้ในหน้าของฉันที่ใช้งานออฟไลน์อยู่ตลอดเวลาได้อย่างไร

เพียงไปที่ Google Fonts - http://www.google.co.th/fonts/เพิ่มแบบอักษรที่คุณชอบในคอลเล็กชันของคุณแล้วกดปุ่มดาวน์โหลด จากนั้นเพียงใช้ @fontface เพื่อเชื่อมต่อแบบอักษรนี้กับหน้าเว็บของคุณ แต่ถ้าคุณเปิดลิงค์ที่คุณใช้อยู่คุณจะเห็นตัวอย่างของการใช้ @fontface

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

สำหรับตัวอย่าง

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

เพียงแค่เปลี่ยนที่อยู่ URL ไปที่ลิงก์ในเครื่องของไฟล์แบบอักษรที่คุณดาวน์โหลด

คุณสามารถทำได้ง่ายยิ่งขึ้น

เพียงดาวน์โหลดไฟล์คุณได้ทำการเชื่อมโยง:

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

ตั้งชื่อ opensans.css หรือมากกว่านั้น

จากนั้นเพียงเปลี่ยนลิงก์ใน url () เป็นพา ธ ของคุณไปยังไฟล์ฟอนต์

จากนั้นแทนที่สตริงตัวอย่างของคุณด้วย:

<link href='opensans.css' rel='stylesheet' type='text/css'>

ลองดูGoogle webfonts helper

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

เคยต้องการทราบหรือไม่ว่า Google ให้บริการพื้นที่จัดเก็บ webfonts ของตนหรือไม่ บริการนี้อาจมีประโยชน์หากคุณต้องการดาวน์โหลดไฟล์. eot, .woff, .woff2, .svg, .ttf ทั้งหมดของตัวแปรตัวอักษรโดยตรงจาก google (โดยปกติตัวแทนผู้ใช้ของคุณจะกำหนดรูปแบบที่ดีที่สุด)

ดูที่หน้า Githubของพวกเขาด้วย

พบวิธีทีละขั้นตอนเพื่อให้บรรลุนี้ (สำหรับ 1 ตัวอักษร):
( ณ วันที่ Sep-9 2013 )

1. เลือกแบบอักษรของคุณที่http://www.google.co.th/fonts
2. เพิ่มหนึ่งที่ต้องการในคอลเลกชันของคุณโดยใช้ปุ่มสีน้ำเงิน "เพิ่มในคอลเลกชัน"
3. คลิกปุ่ม "ดูทุกสไตล์" ใกล้ปุ่ม "นำออกจากคอลเลกชัน" และตรวจสอบให้แน่ใจว่าคุณได้เลือกสไตล์อื่นที่คุณอาจต้องการเช่น 'ตัวหนา' ...
4. คลิกปุ่มแท็บ 'ใช้' ที่ด้านล่างขวาของหน้า
5. คลิกที่ปุ่มดาวน์โหลดด้านบนพร้อมรูปลูกศรลง
6. คลิกที่ "ไฟล์ zip" บนข้อความป๊อปอัพที่ปรากฏขึ้น
7. คลิกปุ่ม "ปิด" บนป๊อปอัพ
8. เลื่อนหน้าไปเรื่อย ๆ จนกว่าคุณจะเห็นแท็บ 3 แท็บ "Standrd | @import | Javascript"
9. คลิกแท็บ "@import"
10. เลือกและคัดลอก URL ระหว่าง'url('และ')'
11. คัดลอกไว้ในแถบที่อยู่ในแท็บใหม่แล้วไปที่นั่น
12. ทำ "ไฟล์> บันทึกหน้าเป็น ... " แล้วตั้งชื่อว่า "neededfontname.css" (แทนที่ตามนั้น)
13. ขยายไฟล์. zip แบบอักษรที่คุณดาวน์โหลด (ควรแยกไฟล์. ttf)
14. ไปที่ " http://ttf2woff.com/ " และแปลงไฟล์. ttf ใด ๆ ที่แยกจาก zip เป็น. woff
15. แก้ไขdesiredfontname.cssและแทนที่ URL ใด ๆ ที่อยู่ภายใน [ระหว่าง'url('และ')'] ด้วยไฟล์. woff ที่ถูกแปลงที่สอดคล้องซึ่งคุณได้รับบน ttf2woff.com; เส้นทางที่คุณเขียนควรเป็นไปตามเซิร์ฟเวอร์ doc_root ของคุณ
16. บันทึกไฟล์และย้ายไปที่ตำแหน่งสุดท้ายแล้วเขียน<link/>แท็ก CSS ที่เกี่ยวข้องเพื่อนำเข้าไฟล์เหล่านี้ในหน้า HTML ของคุณ
17. จากนี้ไปอ้างอิงตัวอักษรนี้ตามfont-familyชื่อในสไตล์ของคุณ

แค่นั้นแหละ. เพราะฉันมีปัญหาเดียวกันและวิธีแก้ปัญหาด้านบนไม่ได้ผลสำหรับฉัน

คำตอบอื่น ๆ ไม่ผิด แต่ฉันคิดว่านี่เป็นวิธีที่เร็วที่สุด

1. ดาวน์โหลดไฟล์ zip จากแบบอักษร Google แล้วเปิดเครื่องรูด
2. อัปโหลดไฟล์ฟอนต์ 3 ต่อครั้งไปที่http://www.fontsquirrel.com/tools/webfont-generator
3. ดาวน์โหลดผลลัพธ์

ผลการค้นหามีรูปแบบตัวอักษรทั้งหมด: WOFF, SVG, TTF, EOT

และเป็นโบนัสที่เพิ่มเข้ามาพวกเขาสร้างไฟล์ css ให้คุณเช่นกัน!

3 ขั้นตอน:

1. ดาวน์โหลดแบบอักษรที่กำหนดเองของคุณในไฟล์ Goole Fonts และดาวน์โหลด. css ตัวอย่าง: ดาวน์โหลดhttp://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300 และบันทึกเป็นexample.css
2. เปิดไฟล์ที่คุณดาวน์โหลด ( example.css ) ตอนนี้คุณต้องดาวน์โหลดไฟล์ font-face ทั้งหมดและบันทึกไว้ในไดเรกทอรีfont
3. แก้ไขexample.css : แทนที่ไฟล์ font-face ทั้งหมดเป็นการดาวน์โหลด. css ของคุณ

Ex:

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

ดู src: -> url ดาวน์โหลดhttp://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2และบันทึกลงในไดเรกทอรีฟอนต์ หลังจากนั้นให้เปลี่ยน url เป็นไฟล์ที่คุณดาวน์โหลดทั้งหมด ตอนนี้มันจะดูเหมือน

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

** ดาวน์โหลดแบบอักษรทั้งหมดมีไฟล์. css หวังว่าจะช่วยได้

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

NPM - Google Font ดาวน์โหลดs

โครงการรูปแบบอักษรที่สร้างแพคเกจ NPM ที่มาเปิดรูปแบบอักษร:

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

เพียงแค่ค้นหา NPMสำหรับการเรียกดูแบบอักษรที่มีเช่นอักษร-Robotoหรืออักษร-เปิดซองและติดตั้งเช่นนี้typeface-<typefacename>

$ npm install typeface-roboto    --save 
$ npm install typeface-open-sans --save 
$ npm install material-icons     --save 

NPM - Google Fonts Download- ERS

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

นี่คือตัวเลือกบางส่วน:

• ปลั๊กอินเว็บแพ็คแบบอักษรของ Google
• Google Fonts ออฟไลน์
• Google แบบอักษร
• รับ Google แบบอักษร

อ่านเพิ่มเติม :

• วิธีการโฮสต์ไอคอนวัสดุแบบออฟไลน์
• ใช้ไอคอนวัสดุออฟไลน์และแบบอักษร Roboto ในแอป Electron

เป็นหลักคุณรวมถึงแบบอักษรในโครงการของคุณ

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url('path/to/OpenSans.eot');
src: local('Open Sans'), local('OpenSans'), url('path/to/OpenSans.ttf') format('truetype');

เมื่อใช้ Google แบบอักษรเวิร์กโฟลว์ของคุณแบ่งออกเป็น 3 ขั้นตอน: "เลือก", "ปรับแต่ง", "ฝัง" หากคุณมองอย่างใกล้ชิดที่ด้านขวาสุดของหน้า "ใช้" มีลูกศรเล็ก ๆ ที่ช่วยให้คุณสามารถดาวน์โหลดแบบอักษรในคอลเลกชันของคุณ

หลังจากนั้นและเมื่อติดตั้งฟอนต์บนระบบของคุณแล้วคุณต้องใช้มันเหมือนกับฟอนต์ทั่วไปอื่น ๆ โดยใช้font-familyคำสั่ง CSS

ฉันทำตามคำตอบของ duydbเพื่อสร้างรหัสไพ ธ อนด้านล่างซึ่งทำให้กระบวนการนี้เป็นไปโดยอัตโนมัติ

import requests

with open("example.css", "r") as f:
    text = f.read()
    urls = re.findall(r'(https?://[^\)]+)', text)

for url in urls:
    filename = url.split("/")[-1]
    r = requests.get(url)
    with open("./fonts/" + filename, "wb") as f: 
        f.write(r.content)
    text = text.replace(url, "/fonts/" + filename)

with open("example.css", "w") as f:
        f.write(text)

หวังว่านี่จะช่วยได้ด้วยความตายคัดลอกวาง

คุณต้องดาวน์โหลดแบบอักษรและอ้างอิงในเครื่อง

ดาวน์โหลดCSSจากลิงก์ที่คุณโพสต์แล้วดาวน์โหลดทั้งหมดของWOFFไฟล์และ (ถ้าจำเป็น) TTFแปลงให้

จากนั้นเปลี่ยนCSSจากลิงค์ที่คุณโพสต์เพื่อรวมแบบอักษรในเครื่อง

จาก

url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)

ถึง

url(/path/to/font/font.woff)

Voila! อาจมีบางอย่างที่คุณต้องทำ แต่ข้างต้นเป็นพื้นฐาน บทความนี้อธิบายดีขึ้นเล็กน้อย

เพียงดาวน์โหลดแบบอักษรและแยกในโฟลเดอร์ จากนั้นลิงก์แบบอักษรนั้น รหัสด้านล่างทำงานให้ฉันอย่างถูกต้อง

body { 
  color: #000; 
  font-family:'Open Sans';
  src:url(../../font/Open_Sans/OpenSans-Light.ttf); 
}