15 أدوات مفيدة للطباعة على الويب ، المكتبات والأطر
لقد كان التعامل مع الطباعة على الويب أمرًا غريبًا حقيقيًا. كل مستعرض لديه خوارزمية خاصة بهم لتقديم الخطوط مما قد يؤدي إلى تناقضات غير متوقعة. لا يوجد سوى عدد قليل من خصائص CSS التي يمكنك استخدامها للتحكم في الخطوط ، مثل تقنين الخطوط ، تجانس الخطوط ، في إنشاء DropCaps إلخ. علاوة على ذلك ، يتعين علينا التعامل مع الكثير من مشكلات التخطيط عندما يتعلق الأمر بالخطوط.
والخبر السار هو أن هناك موارد يمكنك استخدامها للسيطرة على العجلة عندما يتعلق الأمر بطباعة الموقع. هنا 15 أدوات الويب والمكتبات والأطر يمكنك استخدامها لتحقيق هذه الغاية.
المزيد عن هونغكيات:
- 9 الإضافات ووردبرس] لبذل المزيد مع الخطوط الخاصة بك
- 20 أفضل ملحقات الطباعة وورد لتعزيز قابلية القراءة
- أفضل وأكثر وضوحا الرموز واجهة المستخدم مع خطوط الويب
TypeRendering
شيء صغير, TypeRendering يعمل مثل Modernizr ، إلا أنه يحدد فقط محرك المتصفح لتقديم الخطوط. تضيف هذه المكتبة فئات مخصصة بناءً على الاكتشافات التي يمكن استخدامها لتطبيق قواعد تصفيف محددة لتقديم الكتابة.
KerningJS
Kerning غير قابل للتخصيص للاستخدام على الويب حتى الآن - تقنين-الخط لا يزال الدعم ضعيفًا في الوقت الحالي - لكن خاصية قياسية جديدة تقترب من طريقنا. KerningJS هي مكتبة Javascript تمنحك بعض الخصائص الجديدة لتحسين التحكم في المسافات بين الحروف ، على سبيل المثال -أحرف تقنين.
#heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0؛
ضع في اعتبارك أن المثال أعلاه غير قياسي وقابل للتطبيق فقط مع KerningJS.
DropcapJS
على الرغم من أن إنشاء dropcap أمر قابل للتنفيذ وفقًا لمعايير CSS الحالية ، فإن النتيجة ليست مثالية بعد. في بعض الأحيان هو بصراحة غير مرغوب فيه. DropcapJS ، التي طورتها Adobe Web Platform ، أوكلت إليها مهمة السماح لمصمم الويب بتطبيق dropcap المثالي بسهولة.
LiningJS
LiningJS هي مكتبة جافا سكريبت التي تضيف خط الطبقة في كل سطر من فقرتك. هذا يسمح لك بنمط الخط بشكل منفصل. انه يحاكي فكرة :: خط الألف (), :: الألف-السطر الأخير () و ::الخط الأخير الطبقات الزائفة التي ليست موجودة في CSS لا يزال. فيما يلي مثال على كيفية تصميمنا للسطر الأول من الفقرة باستخدام LiningJS:
p .line [first] font-weight: 600؛ تحويل النص: أحرف كبيرة ؛
بالإضافة إلى ذلك ، يدعم LiningJS أيضًا تدفق الفقرات الصينية.
UnderlineJS
UnderlineJS هي مكتبة JavaScript التي تجعل النص أفضل. تحقق من العرض التوضيحي لمعرفة ما أقصد ، تأكد من التمرير فوق الخطوط. مقارنة العرض التوضيحي مع إخراج التسطير الحالي لـ CSS النص الديكور القياسية ، وربما كنت من محبي underlineJS أيضا.
FlowType
سيقوم هذا البرنامج المساعد بضبط حجم الخط ديناميكيًا بناءً على عرض مجمع محدد. FlowType يساعدك على تطبيق عدد مثالي من الأحرف في كل سطر في أي عرض الشاشة. تأتي المكتبة مع خيارات حيث يمكن للمرء ضبط عرض الشاشة دقيقة / ماكس ، وحجم الخط / دقيقة ونسبة الخط.
HatchShow
HatchShow يوسع حجم الخط لملء عرض الحاوية بالكامل. البرنامج المساعد يعمل من خارج منطقة الجزاء مع الخوارزمية. باختصار ، فإنه يقيس عرض الحاوية وطول حرف الخط ويلحق الحجم المناسب للخط.
GridLover
GridLover هي أداة رائعة لإنشاء أنماط أساسية لترتيب الطباعة (الحجم ، ارتفاع الخط ، والهامش) مع واجهة مستخدم سهلة التمرير. يقوم بإنشاء الأنماط في SCSS و LESS و Stylus بحيث يمكنك تضمينها على الفور في مشروعك بغض النظر عن CSS-Preprocessor الذي تستخدمه.
TypeScale
TypeScale هي أداة عبر الإنترنت ستساعدك في تحديد حجم الخط الصحيح لموقعك بسهولة. توفر الأداة واجهة مستخدم رسومية بسيطة لإدراج حجم الخط الأساسي وحجمه وأسرة الخط التي تريد استخدامها. سيتم عرض النتائج لك حتى تتمكن من التنقل باستخدام المقياس ، لتحصل على القيمة الصحيحة فقط. مجرد الاستيلاء على المغلق بمجرد الانتهاء من ذلك.
مقياس وحدات
مقياس وحدات هي أداة لإنشاء خط تحجيم مثالي للنص الأساسي والعنوان. يتم إخراجه في Sass والذي يجب استخدامه مع مكتبة Sass الخاصة به. بالتناوب ، يمكنك استخدام JavaScript .
الخط إلى العرض
الخط إلى العرض (FTW) هي مكتبة Javascript التي تجعل الخط ملائمًا لحاوية العرض الخاصة به. سيحدد حجم الخط مع تباعد الكلمات المطلوب للخط. إذا كنت تريد تحديد عنوان جميل ، فهذه هي المكتبة التي قد ترغب في تجربتها.
FFFFallback
FFFFallback, أداة سهلة الاستخدام تتيح لك العثور على أفضل مجموعة من الخطوط التي ستتدهور برشاقة. تأتي الأداة في شكل إشارة مرجعية ، والتي ستحلل مجموعة الخطوط على صفحتك وتقترح مجموعة من الخطوط لاستخدامها كخلفية احتياطية.
زوج الخط
يعد Google Font من أكثر مكتبات خطوط الويب شيوعًا التي يستخدمها الملايين ، ويستضيف أكثر من 500 عائلة خطوط. زوج الخط هي مجموعة من خطوط Google المقترنة ، حيث يمكنك العثور على مجموعة متنوعة بين عائلات الخطوط وكتابة الوجوه بسهولة. يجعل "زوج الخط" اختيار الاقتران الخط أقل قليلاً الساحقة.
TypeSettings
TypeSettings هي مجموعة من قواعد CSS لتعيين تحجيم الخط المناسب والإيقاع العمودي والنسبة المستجيبة للطباعة. يأتي TypeSettings في Sass و Stylus والذي يسمح بالمرونة لتلبية احتياجات المشروع من خلال ضبط المتغيرات.
Typeplate
Typeplate ربما تكون واحدة من مجموعة أدوات التشغيل الأكثر اكتمالا لإعداد الطباعة. يتم شحن Typeplate مع عدد قليل من أنماط الطباعة الأساسية التي تعالج القياس ، والألوان ، ورأس المال الصغير ، و dropcap ، والمسافة البادئة ، والوصل ، و blockquote ، و code code ، والكثير من الأشياء.
اقرأ الآن: عرض لتصاميم الويب مع الطباعة الجميلة
