Fontimize
1.0.0
เพิ่มประสิทธิภาพแบบอักษร (ชุดย่อย) ได้อย่างง่ายดายให้กับร่ายมนตร์เฉพาะที่จำเป็นสำหรับข้อความหรือ HTML ของคุณ!
คุณกังวลเกี่ยวกับขนาดดาวน์โหลดครั้งแรกของเว็บไซต์ของคุณหรือไม่? ต้องการการดาวน์โหลด megabytes และคุณได้ปรับปรุงและลดขนาด CSS และ JavaScript และรูปภาพของคุณ แต่เห็นแบบอักษรขนาดใหญ่บ้างไหม? Fontimize เหมาะสำหรับคุณ! เครื่องมือนี้วิเคราะห์ไฟล์ HTML และ CSS ของคุณ (หรือข้อความใด ๆ ) และสร้าง ชุดย่อยแบบอักษร ไฟล์ตัวอักษรที่มีเฉพาะอักขระหรือ glyphs ที่ใช้จริง
ในทางปฏิบัติคุณสามารถลดขนาดการดาวน์โหลดแบบอักษรให้เหลือ 10% หรือน้อยกว่าเดิม
Fontimize ใช้ TTF2WEB และขอบคุณมากและให้เครดิตกับผู้เขียนห้องสมุดที่ยอดเยี่ยมนั้น
ห้องสมุดนี้ถูกสร้างขึ้นสำหรับเว็บไซต์ส่วนตัวของฉัน มันใช้ฟอนต์ TTF สี่แบบรวมมากกว่า 1.5MB (นี่ไม่ใช่เรื่องผิดปกติ: หนึ่งสำหรับหัวเรื่องหนึ่งสำหรับข้อความปกติที่มีตัวแปรสำหรับตัวเอียงบวกหนึ่งในสี่สำหรับการเล่นโวหารพิมพ์ dropcaps)
หลังจากทำงาน Fontimize ขนาดทั้งหมดสำหรับ แบบอักษรทั้งหมดที่รวมกัน คือ 76KB
1.5MB ลงไปที่ 76KB ช่วยประหยัดได้ 95.2%! สิ่งนี้มีผลกระทบที่เห็นได้ชัดเจนในเวลาเริ่มต้นในการดาวน์โหลดหน้าเว็บบนเว็บไซต์รวมถึงผลกระทบอันยิ่งใหญ่ต่อการแสดงผล: ก่อนหน้าการโหลดเริ่มต้นของไซต์จะแสดงผลด้วยแบบอักษร Serif ทั่วไปจากนั้นแสดงอีกไม่กี่วินาทีต่อมาเมื่อแบบอักษรดาวน์โหลดซึ่งดูไม่ดีจริงๆ ตอนนี้คุณจะได้รับแบบอักษรใหม่ทันทีหรือก่อนที่คุณจะสังเกตเห็นและเว็บไซต์จะดูถูกต้องตั้งแต่เริ่มต้น
Fontimize เป็นไลบรารี Python และสามารถรวมอยู่ในซอฟต์แวร์ Python ของคุณหรือใช้สแตนด์อโลนบนบรรทัดคำสั่ง
เริ่มต้นด้วยการติดตั้งและนำเข้า fontimize:
$ python3 -m pip install fontimize
ในสคริปต์ของคุณ:
import fontimizeในการแยกชุดของชุดไฟล์ HTML บนดิสก์และไฟล์ CSS ที่ใช้และส่งออกฟอนต์ใหม่ (โดยค่าเริ่มต้นในโฟลเดอร์เดียวกันกับแบบอักษรดั้งเดิม) ที่มีร่ายมนตร์ที่ใช้ใน HTML:
all_html_files = [ 'input/one.html' , 'input/two.html' ]
font_results = fontimize . optimise_fonts_for_files ( all_html_files )
print ( font_results [ "css" ])
# Prints CSS files found used by any of the HTML input files:
# { 'input/main.css',
# 'input/secondary.css' }
print ( font_results [ "fonts" ])
# Prints pairs mapping the old fonts to the new optimised font generated for each. Use this to, eg, rewrite your CSS
# By default exports to the same folder as the input files; use `font_output_dir` to change
# { 'input/fonts/Arial.ttf': 'input/fonts/Arial.FontimizeSubset.woff2',
# 'input/fonts/EB Garamond.ttf': 'input/fonts/EB Garamond.FontimizeSubset.woff2' }
print ( font_results [ "chars" ]
# Prints the set of characters that were found or synthesised that the output fonts will use
# { ',', 'u', '.', '@', 'n', 'a', '_', 'l', 'i', 'h', 'Q', 'y', 'w', 'T', 'q', 'j', ' ', 'p', 'm', 's', 'o', 't', 'c' ... }
print ( font_results [ "uranges" ]
# Prints the same set of characters, formatted as ranges of Unicode characters
# U+0020, U+002C, U+002E, U+0040, U+0051, U+0054, U+005F, U+0061-007A ...optimise_fonts_for_files()นี่น่าจะเป็นวิธีที่คุณต้องการใช้
ปรับตัวอักษร / ชุดย่อยตามชุดไฟล์อินพุตบนดิสก์และ (โดยอัตโนมัติ) ไฟล์ CSS ภายนอกที่อ้างอิงไฟล์ HTML ใด ๆ ไฟล์จะถูกแยกวิเคราะห์เป็น HTML หากมีการขยายไฟล์ .htm หรือ .html (ข้อความที่มองเห็นได้ผู้ใช้จะถูกแยกออกและ CSS ถูกแยกวิเคราะห์) มิฉะนั้นไฟล์จะถือว่าเป็นข้อความ ส่งคืนรายการไฟล์ CSS ที่พบและแผนที่ของไฟล์แบบอักษรเก่าไปที่ได้รับการปรับปรุงใหม่
พารามิเตอร์:
html_files : list[str] : รายการเส้นทางซึ่งแต่ละรายการเป็นไฟล์ HTML แต่ละคนจะถูกวิเคราะห์font_output_dir = "" : เส้นทางไปยังที่ควรวางแบบอักษรย่อย โดยค่าเริ่มต้นสิ่งนี้จะว่างเปล่า ( "" ) ซึ่งหมายถึงการสร้างแบบอักษรใหม่ในตำแหน่งเดียวกันกับแบบอักษรอินพุต เนื่องจากฟอนต์ใหม่มีชื่อที่แตกต่างกัน (ดู subsetname พารามิเตอร์ถัดไป) คุณจะไม่เขียนทับฟอนต์อินพุต ไม่มีการตรวจสอบว่าฟอนต์เซ็ตย่อยมีอยู่แล้ว ก่อนที่จะเขียนหรือไม่subsetname = "FontimizeSubset" : ตัวอักษรที่ได้รับการปรับปรุงจะถูกเปลี่ยนชื่อในรูปแบบ OriginalName.FontimizeSubset.woff2 Fontimizesubset.woff2 สิ่งสำคัญคือต้องแยกความแตกต่างของแบบอักษรย่อยจากแบบอักษรดั้งเดิมกับร่ายมนตร์ทั้งหมด คุณสามารถเปลี่ยนชื่อชุดย่อยเอาต์พุตเป็นสตริงอื่น ๆ ที่ใช้ได้ในระบบไฟล์ของคุณverbose : bool = False : ถ้า True ให้ปล่อยข้อมูลการวินิจฉัยเกี่ยวกับไฟล์ CSS แบบอักษร ฯลฯ ที่พบและกำลังสร้างprint_stats : bool = True : พิมพ์ข้อมูลสำหรับขนาดทั้งหมดบนดิสก์ของแบบอักษรอินพุตและขนาดรวมของแบบอักษรที่ดีที่สุดและการประหยัดในเปอร์เซ็นต์ ตั้งค่านี้เป็น False หากคุณต้องการให้ทำงานอย่างเงียบ ๆfonts : list[str] = [] : รายการเส้นทางไปยังไฟล์แบบอักษร สิ่งเหล่านี้จะถูกเพิ่มลงในแบบอักษรใด ๆ ที่วิธีการค้นหาผ่าน CSS โดยปกติคุณจะระบุสิ่งนี้หากคุณผ่านไฟล์ข้อความมากกว่า HTMLaddtl_text : str = "" : อักขระเพิ่มเติมที่ควรเพิ่มลงในตัวที่พบในไฟล์ผลตอบแทน:
dict[str, typing.Any]return_value["css"] -> รายการไฟล์ CSS ที่ไม่ซ้ำกันที่ไฟล์ HTML ใช้return_value["fonts"] -> A dict โดยที่ keys() เป็นไฟล์ตัวอักษรดั้งเดิมและค่าสำหรับแต่ละคีย์คือไฟล์ตัวอักษรทดแทนที่ถูกสร้างขึ้น คุณสามารถใช้สิ่งนี้เพื่ออัปเดตการอ้างอิงไปยังไฟล์ตัวอักษรดั้งเดิม โปรดทราบว่า Fontimizer ไม่ได้เขียนอินพุต CSS ใหม่return_value["chars"] -> set ของอักขระที่พบเมื่อแยกวิเคราะห์อินพุตreturn_value["uranges] -> ช่วง Unicode สำหรับอักขระเดียวกัน:" U+1000-2000, U+2500-2501 "ฯลฯ หมายเหตุหมายเลขที่สองในแต่ละคู่ไม่มี" U+"optimise_fonts_for_html_contents() คล้ายกับ optimise_fonts_for_html_files ยกเว้นอินพุตคือ html เป็นสตริง (เช่น <head>...</head><body>...<body> ) มันไม่ได้แยกวิเคราะห์เพื่อค้นหาไฟล์ CSS ที่ใช้ (และใช้ฟอนต์ที่ใช้) ดังนั้นคุณต้องให้รายการไฟล์ฟอนต์เพื่อปรับให้เหมาะสม
พารามิเตอร์:
html_contents : list[str] : รายการสตริง HTML ข้อความจะถูกสกัดและใช้เพื่อสร้างรายการร่ายมนตร์สำหรับแบบอักษรที่ดีที่สุดfonts : list[str] : รายการเส้นทางในระบบไฟล์โลคัลของคุณเพื่อให้ไฟล์แบบอักษรเพื่อปรับให้เหมาะสม สิ่งเหล่านี้สามารถเป็นเส้นทางที่สัมพันธ์กัน พารามิเตอร์อื่น ๆ ( fontpath , subsetname , verbose , print_stats ) เหมือนกับ optimise_fonts_for_html_files
ผลตอบแทน:
dict where keys() เป็นไฟล์ตัวอักษรดั้งเดิมและค่าสำหรับแต่ละคีย์คือไฟล์ตัวอักษรทดแทนที่สร้างขึ้นoptimise_fonts_for_multiple_text() คล้ายกับ optimise_fonts_for_html_contents ยกเว้นอินพุตเป็นรายการของสตริง Python เนื้อหาของสตริงเหล่านั้นใช้ในการสร้างร่ายมนตร์สำหรับแบบอักษรที่ดีที่สุด: จะมีสัญลักษณ์สำหรับอักขระที่ไม่ซ้ำกันทุกตัวในสตริงอินพุต (ถ้าแบบอักษรอินพุตมีร่ายมนตร์ที่ต้องการ)
ส่งผ่านรายการไฟล์ตัวอักษร (พารามิเตอร์ fonts ) เป็นไฟล์ตัวอักษรอินพุตเพื่อปรับให้เหมาะสมตามข้อความ
พารามิเตอร์:
texts : list[str] : รายการสตริง Python แบบอักษรที่สร้างขึ้นจะมีร่ายมนตร์ที่สตริงเหล่านี้ใช้ พารามิเตอร์อื่น ๆ ( fonts , fontpath , subsetname , verbose , print_stats ) และค่าส่งคืนเป็น idential to optimise_fonts_for_html_contents
optimise_fonts()นี่คือวิธีหลัก วิธีการทั้งหมดข้างต้นจบลงที่นี่ ต้องใช้สตริงข้อความ Python Unicode ของข้อความและรายการเส้นทางไปยังไฟล์แบบอักษรเพื่อปรับให้เหมาะสมและสร้างชุดย่อยแบบอักษรที่มีร่ายมนตร์เฉพาะที่จำเป็นสำหรับข้อความอินพุต
พารามิเตอร์:
text: str : สตริง Python Unicode ชุดของอักขระ Unicode ที่ไม่ซ้ำกันถูกสร้างขึ้นจากนี้และไฟล์ตัวอักษรเอาต์พุตจะมี glyphs ทั้งหมดที่จำเป็นในการแสดงผลสตริงนี้อย่างถูกต้อง (สมมติว่าฟอนต์ที่มี glyphs เริ่มต้นด้วย) พารามิเตอร์อื่น ๆ ( fonts , fontpath , subsetname , verbose , print_stats ) และค่าส่งคืนเหมือนกับ optimise_fonts_for_html_contents และ optimise_fonts_for_multiple_text
เครื่องมือ commandline สามารถใช้สแตนด์อโลนหรือรวมเข้ากับท่อส่งเนื้อหา
การใช้งานง่าย ๆ :
python3 fontimize.py file_a.html file_b.html
นี่คือการแยกวิเคราะห์ HTML รวมถึงไฟล์ CSS ภายนอกที่อ้างอิงใด ๆ เพื่อค้นหาทั้งร่ายมนตร์และแบบอักษรที่ใช้ มันสร้างไฟล์ตัวอักษรใหม่ในตำแหน่งเดียวกันกับไฟล์ตัวอักษรอินพุต
python3 fontimize.py --text "The fonts will contain only the glyphs in this string" --fonts "Arial.tff" "Times New Roman.ttf"
สิ่งนี้จะสร้างร่ายมนตร์เฉพาะที่จำเป็นสำหรับสตริงที่ระบุและสร้าง Arial รุ่นใหม่และ Times New Roman ในรูปแบบ WOFF2 ในตำแหน่งเดียวกันกับไฟล์ตัวอักษรอินพุต
--text "string here" ( -t ): ร่ายมนตร์ที่ใช้ในการแสดงผลสตริงนี้จะถูกเพิ่มลงใน glyphs ที่พบในไฟล์อินพุตหากมีการระบุ คุณต้องผ่านไฟล์อินพุตหรือข้อความ (หรือทั้งสองอย่าง) มิฉะนั้นจะมีข้อผิดพลาด--fonts "a.ttf" "b.ttf" ( -f ): รายการเสริมของแบบอักษรอินพุต สิ่งเหล่านี้จะถูกเพิ่มเข้าไปในการอ้างอิงใด ๆ ที่อ้างอิงผ่าน HTML/CSS --outputdir folder_here ( -o ): ไดเรกทอรีที่จะวางไฟล์ตัวอักษรที่สร้างขึ้น สิ่งนี้จะต้องมีอยู่แล้ว--subsetname MySubset ( -s ): วลีที่ใช้ในชื่อไฟล์ตัวอักษรที่สร้างขึ้น เป็นสิ่งสำคัญที่จะต้องแยกความแตกต่างของแบบอักษรเอาต์พุตจากแบบอักษรอินพุตเพราะ (ตามคำจำกัดความเป็นชุดย่อย) พวกเขาไม่สมบูรณ์ --verbose ( -v ): เอาต์พุตข้อมูลรายละเอียดในขณะที่ประมวลผล--nostats ( -n ): ไม่พิมพ์ข้อมูลเกี่ยวกับผลลัพธ์ที่ได้รับการปรับปรุงในตอนท้าย การทดสอบหน่วยจะทำงานผ่าน tests.py และใช้ไฟล์ใน tests โปรดทราบว่าสิ่งนี้จะสร้างไฟล์เอาต์พุตใหม่ภายในโฟลเดอร์ testsoutput
โฟลเดอร์ tests มีหลายฟอนต์ที่ได้รับใบอนุญาตภายใต้ใบอนุญาต SIL Open Font
ฉันใช้ Fontimize เป็นส่วนหนึ่งของตัวสร้างไซต์แบบคงที่เพื่อสร้างเว็บไซต์ของฉัน มันทำงานเป็นขั้นตอนสุดท้ายการเพิ่มประสิทธิภาพแบบอักษรตามไฟล์ HTML ที่สร้างขึ้นที่เก็บไว้ในดิสก์ ค่าการส่งคืนจาก fontimize - เช่นแบบอักษรที่สร้างขึ้นและไฟล์ CSS ที่วิเคราะห์แล้วใช้เพื่อเขียน CSS ใหม่และชี้ไปที่แบบอักษรที่ได้รับการปรับปรุงใหม่
(การเขียนใหม่ CSS ไม่ได้เป็นคุณลักษณะที่จัดทำโดย fontimize; โปรดสร้างปัญหาหรือดึงคำขอหากคุณต้องการให้เป็นปัจจุบันไลบรารีจะสร้างไฟล์ตัวอักษรใหม่และส่งคืนการแมป (ไม่ว่าจะเป็นพจนานุกรมหรือเอาต์พุตข้อความ) ดิสก์คุณจะต้องทำอย่างชัดเจน
โดยค่าเริ่มต้นฟอนต์ย่อยใหม่จะถูกตั้งชื่อด้วยคำต่อท้าย "fontimizersubset" เช่น Arial.FontimizerSubset.woff2 คุณสามารถปรับแต่งชื่อของแบบอักษรเซ็ตย่อยโดยใช้พารามิเตอร์เมธอด subsetname หรือพารามิเตอร์ --subsetname=Foo พารามิเตอร์บรรทัดคำสั่ง FOO ในขณะที่ขอแนะนำให้ใช้ชื่อชุดย่อยเพื่อหลีกเลี่ยงความสับสนฟอนต์ที่ได้รับการปรับปรุงด้วยแบบอักษรดั้งเดิม (ซึ่งมีร่ายมนตร์ทั้งหมด) คุณสามารถใช้ชื่อที่คุณต้องการ ชื่อเริ่มต้น“ Fontimizersubset” เป็นเพียงข้อเสนอแนะในการชี้ผู้อื่นกลับไปที่ไลบรารีนี้หากพวกเขาพบมัน ไม่จำเป็นต้องเก็บชื่อนี้ไว้และคุณมีอิสระที่จะใช้วลีอื่น
CSS pseudo-lements:
Fontimize Parses CSS สำหรับทั้งแบบอักษรที่ใช้อย่างชัดเจนและสำหรับร่ายมนตร์ใด ๆ ที่แสดงบนหน้าจอ ซึ่งรวมถึงร่ายมนตร์ใน CSS pseudo-lements เช่น :before และ :after หากมีการกำหนดข้อความหรืออักขระในองค์ประกอบหลอกเหล่านี้พวกเขาจะรวมอยู่ในแบบอักษรย่อย
Inline CSS:
Fontimize ไม่ได้แยกวิเคราะห์ CSS แบบอินไลน์ในไฟล์ HTML สันนิษฐานว่ามีการใช้ CSS ภายนอกซึ่งพบผ่านแท็ก <link> ในส่วน <head> ของเอกสาร HTML จากนั้น Fontimize จะวิเคราะห์ไฟล์ CSS เหล่านั้นสำหรับแบบอักษรและ glyphs หากการแยกวิเคราะห์ CSS แบบอินไลน์จะเป็นประโยชน์โปรดเพิ่มปัญหา
อักขระเพิ่มเติม:
เมื่อพบคำพูดเดี่ยวหรือสองครั้งในข้อความอินพุตตัวอักษรย่อยจะรวมถึงคำพูดซ้ายและขวาที่สอดคล้องกัน ในทำนองเดียวกันหากพบเส้นประชุดย่อยจะรวมทั้ง en-dashes และ em-dashes
มันดีจริงๆ (แต่ไม่จำเป็น) ว่าถ้าคุณใช้ fontimizer เพื่อเชื่อมโยงไปยัง https://fontimize.daveon.design/ หรือ repo github นี้ นั่นคือการชี้ให้คนอื่น ๆ ไปที่เครื่องมือ ขอบคุณมาก :)
