15 שימושי אינטרנט טיפוגרפיה כלים, ספריות ומסגרות
התמודדות עם טיפוגרפיה באינטרנט כבר quirky אמיתי. לכל דפדפן יש אלגוריתם משלהם כדי להציג גופנים אשר יכול להוביל פערים בלתי צפויים. יש רק כמה תכונות CSS אתה יכול להשתמש כדי לקבל קצת שליטה על גופנים, כגון צימוד גופן, החלקת גופן, ביצירת DropCaps וכו 'על גבי זה, אנחנו צריכים להתמודד עם הרבה בעיות פריסה כשמדובר גופנים.
החדשות הטובות הן שיש משאבים שבהם אתה יכול להשתמש כדי להשתלט על הגלגל כשמדובר טיפוגרפיה באתר. הנה 15 כלי אינטרנט, ספריות ומסגרות אתה יכול להשתמש לשם כך.
עוד על הונגקיאט:
- 9 וורדפרס תוספים לעשות יותר עם הגופנים שלך
- 20 Best וורדפרס טיפוגרפיה תוספים כדי לשפר את הקריאות
- טוב יותר ו חדות ממשק משתמש סמלים עם גופני אינטרנט
סוג עיבוד
בקצור נמרץ, סוג עיבוד עובד כמו Modernizr, אלא רק מזהה את מנוע הדפדפן עבור טיוח גופן. ספריה זו מוסיפה שיעורים מותאמים אישית המבוססים על תגליות שלה אשר ניתן להשתמש בהם כדי להחיל כללי עיצוב ספציפיים עבור טיוח סוג.
KerningJS
Kerning אינו ניתן להתאמה לשימוש באינטרנט עדיין - צימוד גופן התמיכה היא עדיין גרועה כרגע - אבל נכס רגיל חדש מגיע בדרך שלנו. KerningJS היא ספריית Javascript שנותן לך כמה תכונות חדשות עבור שליטה טובה יותר kerning, למשל -מכתב- kern.
#heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;
זכור שהדוגמה שלעיל אינה סטנדרטית וישימה רק עם KerningJS.
DropcapJS
למרות יצירת dropcap הוא doable עם סטנדרטים CSS הנוכחי, התוצאה היא לא מושלמת עדיין. לפעמים זה ממש לא רצוי. DropcapJS, שפותחה על ידי Adobe Web Platform, הוא הפקיד את המשימה לאפשר מעצב אינטרנט ליישם dropcap מושלם בקלות.
בטנה
בטנה היא ספריית JavaScript אשר מוסיף את קו בכיתה בכל שורה של הפסקה שלך. זה מאפשר לך לסדר את הקו בנפרד. זה מדמה את הרעיון של :: nth-line (), :: nth-last-line () ו ::שורה אחרונה pseudo- מחלקות אשר אינו קיים ב- CSS עדיין. הנה דוגמה כיצד אנו מסמנים את השורה הראשונה של פסקה עם LiningJS:
p. [first] font-weight: 600; טקסט-המרה: אותיות רישיות;
בנוסף, LiningJS תומך גם זרימת פסקה סינית.
קו תחתון
קו תחתון היא ספריית JavaScript שהופכת את הטקסט לטוב יותר. בדוק את ההדגמה כדי לראות למה אני מתכוון, כדי להיות בטוח לרחף מעל השורות. השווה את ההדגמה עם פלט קו תחתון של CSS הנוכחי קישוט טקסט רגיל ואתה בטח יהיה אוהד של underlineJS מדי.
FlowType
תוסף זה יהיה דינמי להתאים את גודל הגופן מבוסס על רוחב עטיפה ספציפיים. FlowType מסייע לך להחיל מספר אידיאלי של תווים בשורה בכל רוחב מסך. הספרייה מגיעה עם אפשרויות שבו ניתן להגדיר מינימום / רוחב המסך המרבי, מינימום / גודל גופן מקסימלי, יחס הגופן.
HatchShow
HatchShow מרחיב את הגודל של הגופן כדי למלא את כל רוחב המיכל שלה. הפלאגין עובד מהקופסה עם האלגוריתם; בקיצור, הוא מודד את רוחב המכל, ואורך תו הגופן ומוסיף את הגודל המתאים של הגופן.
GridLover
GridLover הוא כלי נהדר כדי ליצור סגנונות בסיסיים עבור טיפוגרפיה טיפוגרפיה (גודל, גובה קו, ואת השוליים) עם ממשק המשתמש קל המחוון. הוא מייצר את הסגנונות ב- SCSS, LESS, ו- Stylus כך שתוכל לכלול אותו מיד בפרויקט שלך ללא קשר ל- CSS-Preprocessor שבו אתה משתמש.
TypeScale
TypeScale הוא כלי מקוון שיעזור לך בקלות לקבוע את גודל הגופן הנכון עבור אתר האינטרנט שלך. הכלי מספק GUI אינטואיטיבי פשוט להוסיף גודל גופן בסיס, קנה מידה, ומשפחת גופנים ברצונך להשתמש. התוצאות יהיו דמיינו בשבילך, כך שתוכל לשחק עם הסולם, כדי לקבל רק את הערך הנכון. פשוט לתפוס את CSS ברגע שתסיים.
מודולרי סולם
מודולרי סולם הוא כלי כדי ליצור אידיאלי גופן קנה המידה של הגוף ואת הכותרת הכותרת. זה פלטי ב Sass שבו יש להשתמש בשילוב עם ספריית Sass שלה. לחלופין, תוכל להשתמש ב- JavaScript .
גופן לרוחב
גופן לרוחב (FTW) היא ספריית Javascript שגורמת לגופן להתאים למכל רוחב. זה יקבע את גודל הגופן יחד עם המרווח מילה נדרש עבור הגופן. אם אתה רוצה לעשות כותרת יפה, זה הספרייה ייתכן שתרצה לנסות.
FFFFallback
FFFFallback, כלי שימושי המאפשר לך למצוא את מחסנית הגופן הטובה ביותר כי יהיה לבזות בחינניות. הכלי מגיע בצורה של bookmarklet, אשר תנתח את משפחת הגופנים בדף שלך ולהציע קבוצה של גופנים לשימוש כמו חזרה.
זוג גופן
Google Font הוא אחד מספקי הגופנים הפופולריים ביותר באינטרנט, המשמשים כמיליונים, ומארח מעל 500 משפחות גופן. זוג גופן הוא אוסף של גופני Google מותאמים, שבהם ניתן למצוא שילוב שונה בין משפחות גופן לבין פרצופים מסוג בקלות. גופן זוג עושה בחירה זיווג גופן קצת פחות מכריע.
הקלד הגדרות
הקלד הגדרות היא אוסף של כלל CSS מוגדר להגדיר קנה המידה הגופן הנכון, קצב אנכי, יחס תגובה של טיפוגרפיה. TypeSettings מגיע Sass ו Stylus המאפשר גמישות כדי לענות על הצרכים הפרויקט שלך על ידי התאמת המשתנים.
תבנית
תבנית הוא כנראה אחד של סטרטר המלאה ביותר עבור הגדרת טיפוגרפיה. סוג אוניות עם קומץ של סגנונות טיפוגרפיים בסיסיים כי הכתובת קנה מידה, צבעים, הון קטן, dropcap, הזחה, מקף, blockquote, בלוק קוד ועוד דברים רבים.
עכשיו קרא: ראווה של עיצובים עם טיפוגרפיה יפה
