การดาวน์โหลดสคริปต์ไฟล์ CSS ด้วยแบบอักษรและปรับให้เข้ากับการทำงานในสภาพแวดล้อมปิด/ออฟไลน์ มีประโยชน์ตัวอย่างเช่นเมื่อโครงการต้องดำเนินการในเครือข่ายโดยไม่ต้องเชื่อมต่อกับอินเทอร์เน็ตหรือเมื่อคุณสร้างแอปพลิเคชันตามโครงการเช่นอิเล็กตรอน
สคริปต์สามารถ "ติดตั้ง" ด้วยตนเองโดยการโคลนนิ่ง ./main.js ไฟล์. js หรือด้วย npm:
npm install get-google-fonts
ตัวอย่างเช่น CSS ที่มีแบบอักษรที่ใช้เช่นนี้:
< link href =' https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic ' rel =' stylesheet ' >สามารถแทนที่ด้วย:
< link href =' fonts/fonts.css ' rel =' stylesheet ' > การใช้บรรทัดคำสั่งเป็นไปได้เมื่อติดตั้งสคริปต์เป็น global หรือคุณรู้เส้นทางเต็มไปยังไฟล์ cli.js โดยค่าเริ่มต้น NPM จะต้องการติดตั้งสคริปต์เป็นทั่วโลกและหลังจากสคริปต์นั้นจะแชร์ไฟล์ในไดเรกทอรี bin ชื่อ get-google-fonts จากนั้นคุณสามารถใช้คำสั่งนั้นได้ทุกที่
Usage:
get-google-fonts [OPTIONS] [ARGS]
Options:
-i, --input URL Input URL of CSS with fonts
-o, --output [STRING] Output directory (Default is ./fonts)
-p, --path [STRING] Path placed before every source of font in CSS (Default is ./)
-c, --css [STRING] Name of CSS file (Default is fonts.css)
-t, --template [STRING] Template of font filename (Default is {_family}-{weight}-{comment}{i}.{ext})
-u, --useragent STRING User-agent used at every connection
-q, --quiet Don't displays a lot of useful information
-b, --base64 Save fonts inside CSS file as base64 URIs
--non-strict-ssl Force to accepts only valid SSL certificates; in some
cases,such proxy or self-signed certificates
should be turned off
-w, --overwriting Allows overwrite existing files
--print-options Shows result options object without performing any
action
-s, --simulate Simulation; No file will be saved
-h, --help Display help and usage details
หากต้องการรับผลลัพธ์เช่นในตัวอย่างเพียงป้อนคำสั่งในโฟลเดอร์ด้วยไฟล์ HTML:
get-google-fonts -i "https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic"
Get-google-fonts สามารถใช้เป็นโมดูล
const GetGoogleFonts = require ( 'get-google-fonts' ) ; เพื่อให้ได้ผลลัพธ์เช่นในตัวอย่างเพียงสร้างวัตถุและเรียกใช้วิธี download
new GetGoogleFonts ( ) . download ( 'https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic' )
// => Promiseมีสามวิธีที่มีประโยชน์ในโมดูลทั้งหมด
พารามิเตอร์:
config ช่วยให้คุณกำหนดค่าการดาวน์โหลดทั้งหมดที่ทำโดยวัตถุนี้ ดูเพิ่มเติม ... [ไม่บังคับ]ตัวอย่าง:
let ggf_ttf = new GetGoogleFonts ( {
userAgent : 'Wget/1.18'
} )
let ggf_defaults = new GetGoogleFonts ( )พารามิเตอร์:
url URL ไปยัง CSS เป็นวัตถุแบบอักษรหรือสตริงธรรมดา สามารถเป็นอาร์เรย์ของข้อโต้แย้งแม่มดจะถูกส่งผ่าน getgooglefonts.constructurl ()config ช่วยให้คุณกำหนดค่าการดาวน์โหลดนี้ ดูเพิ่มเติม ... [ไม่บังคับ]ตัวอย่าง:
ggf . download ( [
{
Roboto : [ 400 , 700 ]
} ,
[ 'cyrillic' ]
] ) . then ( ( ) => {
console . log ( 'Done!' )
} ) . catch ( ( ) => {
console . log ( 'Whoops!' )
} )
// or
ggf . download ( 'https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic' , {
userAgent : 'Wget/1.18'
} ) . then ( ( ) => {
console . log ( 'Done!' )
} ) . catch ( ( ) => {
console . log ( 'Whoops!' )
} )สร้าง URL ของ Google Fonts โดยใช้พารามิเตอร์ที่กำหนด
พารามิเตอร์:
families ของชื่อตัวอักษรและน้ำหนักsubsets ของชุดย่อยตัวอย่าง:
GetGoogleFonts . constructUrl (
{
Roboto : [ '400' , 700 ] ,
'Roboto' : [ 400 , '700i' ] ,
'Alegreya Sans SC' : [ 300 ]
} ,
[ 'cyrillic' ]
)
// => https://fonts.googleapis.com/css?family=Roboto:400,700,700i|Alegreya+Sans+SC:300&subset=cyrillic วัตถุจะได้รับการพิจารณาดังนี้: ดาวน์โหลด config> getGoogleFonts Object Config> การกำหนดค่าเริ่มต้น
// Default config object
{
// Output directory when where all files will be saved.
// According to this path, relative paths will be resolved.
outputDir : './fonts' ,
// Path placed before every source of font in CSS.
// It's also can be URL of your website.
path : './' ,
// Template of font filename.
template : '{_family}-{weight}-{comment}{i}.{ext}' ,
// Name of CSS file. Like other files
// will be placed relative to output directory
cssFile : 'fonts.css' ,
// User-agent used at every connection. Accordingly, Google Fonts will
// send the appropriate fonts. For example, providing a wget's
// user-agent will end with the download of .ttf fonts.
// Default user-agent downloads .woff2 fonts.
userAgent : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 ' +
'(KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36' ,
// Save fonts inside CSS file as base64 URIs
base64 : false ,
// Force to accepts only valid SSL certificates; in some cases,
// such proxy or self-signed certificates should be turned off
strictSSL : true ,
// Allows overwrite existing files.
overwriting : false ,
// Displays a lot of useful information.
verbose : false ,
// Simulation; No file will be saved.
simulate : false
} ตัวแปรต่อไปนี้สามารถใช้ในเทมเพลต:
{comment} ข้อความจากความคิดเห็นที่วางไว้ก่อน @font-face Google Place มีชื่อชุดย่อยเช่นละติน{family} font-family เช่นแหล่งที่มา sans pro{_family} font-family (whitespace จะถูกแทนที่ด้วยขีดล่าง) เช่น source_sans_pro{weight} Font-weight เช่น 400{filename} ชื่อของไฟล์ต้นฉบับเช่น odeli1ahbydbqqeiah2zlc2q8seg17bfdxyr_jusrzg{ext} ส่วนขยายดั้งเดิมเช่น woff2{i} ตัวเลขที่เพิ่มขึ้นทีละครั้งในแต่ละครั้งที่มีการเพิ่มไฟล์ตัวอักษร มีประโยชน์ในการรักษาความเป็นเอกลักษณ์ของชื่อตัวอักษรในกรณีที่คุณไม่แน่ใจว่าตัวแปรก่อนหน้านั้นเพียงพอหรือไม่ มันเริ่มต้นจาก 1 โครงการนี้ได้รับอนุญาตภายใต้ใบอนุญาต Apache -2.0 - ดูไฟล์ License.md สำหรับรายละเอียด