الصفحة الرئيسية>موارد بناء الموقع>تحميل الخط
تنزيل

fontimize

قم بسهولة تحسين الخطوط (مجموعة فرعية) إلى الحروف الرسومية المحددة اللازمة للنص أو HTML!

هل أنت قلق بشأن حجم التنزيل الأولي لموقع الويب الخاص بك؟ تتطلب ميغابايت من التنزيلات ، وقمت بتحسين وتخصيص CSS و JavaScript والصور ، لكنك رصدت بعض الخطوط الكبيرة؟ fontimize لك! تقوم هذه الأداة بتحليل ملفات HTML و CSS (أو أي نص) وتنشئ مجموعات فرعية الخطية ، وملفات الخطوط التي تحتوي فقط على الأحرف أو الحروف الرسومية التي يتم استخدامها بالفعل.

في الممارسة العملية ، يمكنك تقليص حجم تنزيل الخط إلى 10 ٪ أو أقل من الأصل.

لقطة شاشة لخطوط الإدخال والخطوط المحسنة الناتجة ، مما يدل على حجم الملف بشكل كبير

يستخدم Fontimize TTF2WEB ، والكثير من الشكر والائتمان لمؤلف تلك المكتبة الرائعة.

مثال النتائج

تم إنشاء هذه المكتبة في الأصل لموقع الويب الخاص بي. استخدمت أربعة خطوط TTF مجموع ما يزيد قليلاً عن 1.5 ميجابايت. (هذا ليس غير عادي: واحد للعناوين ، واحدة للنص العادي مع متغير للمائل ، بالإضافة إلى الرابع ل quirk المطبعية ، dropcaps.)

بعد تشغيل fontimize ، يبلغ الحجم الكلي لجميع الخطوط مجتمعة 76 كيلو بايت.

1.5 ميجابايت إلى 76 كيلو بايت هو توفير 95.2 ٪! كان لهذا تأثير ملحوظ على الوقت الأولي لتنزيل صفحة على الموقع ، بالإضافة إلى تأثير هائل على التقديم: من قبل ، فإن الحمل الأولي للموقع سيُعرض بخطوط سيرف عامة ، ثم إعادة تقديم العطاء بعد بضع ثوانٍ بمجرد تنزيل الخطوط ، والتي بدت سيئة للغاية. الآن ، ستحصل على الخطوط الجديدة فورًا أو قبل أن تلاحظ وسيبدو الموقع صحيحًا من البداية.

الاستخدام

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 . من المهم التمييز بين الخطوط الفرعية من الخطوط الأصلية مع جميع الحروف الرسومية. يمكنك تغيير اسم المجموعة الفرعية إلى أي سلسلة أخرى صالحة على نظام الملفات الخاص بك.
  • verbose : bool = False : إذا كان True ، ينبعث من المعلومات التشخيصية حول ملفات CSS ، والخطوط ، وما إلى ذلك التي يتم العثور عليها وتولدها.
  • print_stats : bool = True : يطبع معلومات الحجم الكلي على القرص لخطوط الإدخال ، والحجم الإجمالي للخطوط المحسنة ، والتوفير بالنسبة المئوية. اضبط هذا على False إذا كنت تريد تشغيله بصمت.
  • fonts : list[str] = [] : قائمة بالمسارات إلى ملفات الخطوط. وتضاف هذه إلى أي خطوط التي تجدها الطريقة عبر CSS. عادة ما تحدد هذا إذا كنت تمر في الملفات النصية بدلاً من HTML
  • addtl_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] -> تتراوح أونيكود لنفس الأحرف:" U+1000-2000 ، U+2500-2501 "، وما إلى ذلك. لاحظ أن الرقم الثاني في كل زوج لا يحتوي

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 حيث تكون keys() هي ملفات الخطوط الأصلية ، والقيمة لكل مفتاح هي ملف الخط البديل الذي تم إنشاؤه

optimise_fonts_for_multiple_text()

على غرار optimise_fonts_for_html_contents ، باستثناء الإدخال هي قائمة بسلاسل Python. تُستخدم محتويات هذه الأوتار لإنشاء الرسوم الرسومية للخطوط المحسنة: سيكون هناك رسومية لكل حرف فريد في سلاسل الإدخال (إذا كانت خطوط الإدخال تحتوي على الحروف الرسومية المطلوبة.)

تمرير في قائمة ملفات الخطوط (معلمة fonts ) كملفات خط الإدخال لتحسينها بناءً على النص.

حدود:

  • texts : list[str] : قائمة سلاسل بيثون. سوف تحتوي الخطوط التي تم إنشاؤها على الحروف الرسومية التي تستخدمها هذه السلاسل.

المعلمات الأخرى ( fonts ، fontpath ، subsetname ، verbose ، print_stats ) وقيمة الإرجاع معرفون إلى optimise_fonts_for_html_contents .

optimise_fonts()

هذه هي الطريقة الرئيسية ؛ جميع الطرق أعلاه ينتهي هنا. يستغرق سلسلة من النصوص أحادي الأبعاد Python وقائمة من المسارات إلى ملفات الخطوط لتحسين ، وإنشاء مجموعات فرعية الخطية التي تحتوي فقط على الرسوم الحرارية الفريدة المطلوبة لنص الإدخال.

حدود:

  • text: str : سلسلة Python Unicode. يتم إنشاء مجموعة من أحرف Unicode الفريدة من هذا ، وسيحتوي ملفات خطوط الإخراج على جميع الحروف الرسومية المطلوبة لتقديم هذه السلسلة بشكل صحيح (على افتراض أن الخطوط تحتوي على الرسوم الحرارية لتبدأ.)

المعلمات الأخرى ( fonts ، fontpath ، subsetname ، verbose ، print_stats ) وقيمة الإرجاع متطابقة مع optimise_fonts_for_html_contents و optimise_fonts_for_multiple_text .

سطر الأوامر

يمكن استخدام أداة سطر الأوامر مستقلة أو مدمجة في خط أنابيب توليد المحتوى.

استخدام بسيط:

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 في نفس الموقع مثل ملفات خط الإدخال.

مرجع

مدخل

  • عادة ، تمرير ملفات الإدخال. سيتم تحليل HTML ل CSS والخطوط المشار إليها. سيتم تحليل جميع الملفات الأخرى كنص.
  • --text "string here" ( -t ): ستتم إضافة الرسوم الحرارية المستخدمة لتقديم هذه السلسلة إلى الرسوم الحرارية الموجودة في ملفات الإدخال ، إذا تم تحديد أي منها. يجب أن تمر إما ملفات الإدخال أو النص (أو كليهما) ، وإلا سيتم تقديم خطأ.
  • --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 . على الرغم من أنه يوصى باستخدام اسم مجموعة فرعية لتجنب الخلط بين الخط المحسن بالخط الأصلي (الذي يحتوي على جميع الرسوم الحرارية) ، يمكنك استخدام أي اسم تفضله. الاسم الافتراضي "fontimizersubset" هو ببساطة اقتراح لإعادة الآخرين إلى هذه المكتبة ، إذا واجهوها. ليس من الضروري الاحتفاظ بهذا الاسم ، وأنت حر في استخدام عبارة مختلفة.

  • عناصر CSS الزائفة:
    توصيف CSS لكل من الخطوط التي يتم استخدامها بشكل صريح ولأي رسومات رسومية معروضة على الشاشة. ويشمل ذلك الحروف الرسومية في عناصر CSS الزائفة مثل :before و :after . إذا تم تعريف النص أو الأحرف في هذه العناصر الزائفة ، فسيتم تضمينها في الخطوط الفرعية.

  • مضمّن CSS:
    لا يتم تحليل Fontimize حاليًا CSS في ملفات HTML. يفترض أنه يتم استخدام CSS الخارجية ، والتي يجدها من خلال علامات <link> في قسم <head> من مستند HTML. ستقوم Fontimize بعد ذلك بتحليل ملفات CSS للخطوط والخيول. إذا كان تحليل CSS المضمّن مفيدًا ، فيرجى إثارة مشكلة.

  • شخصيات إضافية:
    عندما يتم العثور على عروض أسعار واحدة أو مزدوجة في نص الإدخال ، سيتضمن الخط الفرعي أيضًا اقتباسات اليسار واليمين المقابلة. وبالمثل ، إذا تم العثور على اندفاعة ، فستتضمن المجموعة الفرعية كل من الكثافة والكفاح.

  • من الجيد حقًا (ولكن غير مطلوب) أنه إذا كنت تستخدم fontimizer ، للربط بـ https://fontimize.daveon.design/ أو هذا github repo. هذا هو توجيه الآخرين إلى الأداة. شكرا جزيلا :)

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل