מדריך טוב יותר חדות איקונים UI עם גופני אינטרנט

אם אתה מכיר באמצעות פורמטים של תמונות מפת סיביות (כמו PNG ו- GIF) כדי להציג סמלים באתר, אז אתה גם מכיר את חסרונותיה. קודם כל, בהתאם לממד וכמה פרטי צבע שיש לסמל, גודל קובץ סמל יכול להיות גדול מאוד.

אם יש לנו יותר מדי סמלים לשים באתר אינטרנט, זה גם עלול להאט את ביצועי האתר כמו בקשות HTTP רבים צריך להתבצע על ידי הדפדפן. למרות בעיה זו ניתן לפתור עם ספרייט CSS, גודל הקובץ עדיין גדול.

סמל מפת סיביות יש גם חסרונות גמישות ומדרגיות; נניח שאנחנו צריכים להגדיל או להגדיל את הסמל לרמה מסוימת, או להציג אותו דרך רזולוציית מסך גבוהה מאוד, כגון על המסך הרשתית; את הסמל בהחלט להתברר מטושטשת.

ובכן, אם אתה לוקח כמה מן העניינים האלה בחשבון, אתה כנראה צריך להשתמש גופני סמל.

באמצעות גופני סמל

An גופן היא קבוצה של סמלים ארוזים בגופן אינטרנט, כי מאוחר יותר יכול להיות מוטבע על אתר באמצעות @סוג גופן. כמו כריס ב CSS-trick יש לציין, ישנם יתרונות רבים של שימוש בגופן על מנת לספק תמונה סמלים;

• גופן הוא אובייקט מבוסס וקטור אשר, מטבעו, הוא עצמאי ברזולוציה, כך סמל יישאר פריך ברזולוציות מסך שונות, כולל רזולוציות מסך גבוהות מאוד (כמו רמת הרשתית).
• זה גם מדרגי, המאפשר את זה להיות מוגדל ברמות רבות מבלי לאבד איכות ודייקנות.
• מאז הסמל הוא בעצם גופן, אנחנו יכולים גם לשלוט על צבע, שקיפות, צל טקסט ואפילו לשנות את גודל זה דרך גיליון הסגנון
• אנחנו יכולים גם הנפשת את הסמל עם CSS3.
• הסמל נקרא עם @סוג גופן אשר נתמך כבר מ - Internet Explorer 4 (עם .eot).
• בקשת HTTP קטנה יותר וגודל קובץ נמוך יותר.

הנה כמה גופני הסמל הטוב ביותר שאנו יכולים למצוא:

• גופן מדהים
• IcoMoon
• מדיה חברתית סמלים
• Zurb קרן סמלים

ודא שבדקת את הרישיון ועקוב אחריו לפני הטמעתו באתר שלך כדי לכבד את הזמן של המחבר ואת העבודה הקשה.

@ כלל גופן-פנים

כפי שהזכרנו, הסמלים מוטבעים באמצעות @סוג גופן באמצעות גיליון הסגנון המגדיר חדש משפחת גופן. בדוגמה הבאה נשתמש בסמלי האינטרנט;

 @ font-face font-family: 'WebSymbolsRegular'; src: url ('גופנים / websymbols-regular-webfont.eot'); src: url ('גופנים / webymbols-web-webfont.eot?' #) 'פורמט (' Embedded-opentype '), כתובת אתר (' גופנים / webymbols-regular-webfont.woff ') פורמט (' woff '), url ('fonts / websymbols-regular-webfont.svg #' WebSymbolsRegular ') פורמט (' svg ');  

לאחר מכן, במסמך ה- HTML, אנחנו רק צריכים להוסיף את התווים המייצגים את הסמל, ובמקום להוסיף את התווים החדשים משפחת גופן נרחב במסמך, אנו יכולים לעשות באופן ספציפי יותר על ידי הוספת מעמד נוסף אלמנטים מסוימים כי סמל צריך להיות שניתנו לתוך, כך;

 
 
ח
 
אני
 
י
 
א
 
אני
 
 

בחזרה לגיליון הסגנון אנו מגדירים את החדש משפחת גופן עבור הכיתה שהוספנו זה עתה:

 .icon-font font-family: WebSymbolsSegular; font-size: 12pt;  

• הדגמה @ font-face

שימוש באלמנטים פסאודו

אם הסמל מטופל כאלמנט צדדי, אנו יכולים גם להעביר את הסמל דרך אלמנט פסאודו. בהנחה שסימון ה- HTML שלנו הוא כדלקמן:

 
 
תשובה
 
השב לכולם
 
קדימה
 
קובץ מצורף
 
תמונה
 
 

אנחנו יכולים לעשות את זה ככה בגיליון הסגנון:

 ul.icon-font.pseudo li: לפני font-family: WebSymbolsRegular; margin-right: 5px;  ul.icon-font.pseudo li: nth-child (1): לפני content: "h";  ul.icon-font.pseudo li: nth-child (2): לפני content: "i";  ul.icon-font.pseudo li: nth-child (3): לפני content: "j";  ul.icon-font.pseudo li: nth-child (4): לפני content: "A";  ul.icon-font.pseudo li: nth-child (5): לפני content: "I";  

• הדגמה פסאודו אלמנט

שימוש פרטי Unicode

יש מצב שבו הסמלים לא היו מוטבעים באותיות (A, B, C, D, וכו '), אבל היו מוטבע Unicode שימוש פרטי כדי למזער התנגשות בין הדמויות. כמו ב FontAwesome, המחבר יש למזלו הוסיף את כל התווים קוד בגיליון הסגנון, אשר נראה ככה;

 .icon-glass: לפני content: "\ f0c6";  

אבל כאשר אנחנו צריכים לשלב את הסמל ישירות לתוך ה- HTML, משהו כמו הקוד הבא \ f0c6 לא יעבד את הסמל המחודד, מכיוון שהוא אינו תו חוקי המקודד ב- HTML.

HTML צריך סימון סימוכין מספרי כדי לעבד תווים מיוחדים. יש לנו מכוסה על זה קצת הדרכה הקודם שלנו על לחצנים CSS3; תו זה הוא קידומת עם שילוב של סימן אמפרסנד (&), סימן חשיש (#) ו איקס ולאחר מכן את המספר הקסדצימלי המייצג את התו.

לדוגמה, f0c6 הוא מספר הקסדצימלי, כך שההתייחסות המספרי המספרי ב- HTML תהיה & # xf0c6;, ב FontAwesome כי הקוד יציג את סמל קליפ, ככה;

• הדגמה Unicode

גופן משנה

ייתכן שהסמלים באוסף אינם נחוצים. במקרה זה, אנו יכולים לשחרר את התווים שאינם בשימוש על ידי הגדרת הגופן כי יהיה גם התוצאה בגודלי קובץ גופן נמוכים יותר. למרבה המזל, יש כלי שימושי מ FontSquirrel לעשות את העבודה בקלות, @ גופן גנרטור הפנים.

לאחר שתעבור לדף זה ותוסיף את הגופן, בחר מומחה. תראה כמה אפשרויות נוספות; בחר תת - קבוצה מותאמת אישית.

בדוגמה זו, אנו משתמשים בגופן Sociolico כדי להציג סמלי מדיה חברתית באתר האינטרנט שלנו, אך הסמלים שנזדקק להם הם רק Dribble, Facebook ו- Twitter אשר בהתאמה מיוצגים על ידי תווים אלה; ד, ו ו t. אז, לשים את התווים בשדה קלט תווים בודדים כדלקמן:

ועשינו. עכשיו אנחנו יכולים להוריד את הגופן ובמקרה שלי גודל הגופן התברר להיות רק 3Kb ל 5Kb. כמו כן, זכור כי רק תווים תועבר לסמל רק d, f ו- t, בעוד הדמויות האחרות יעשו רק מכתב רגיל.

מחשבה סופית

דבר אחד שאנחנו לא יכולים לעשות על התרגול הזה הוא להוסיף אפקטים מפורטים מאוד כמו לסמל.

עם זאת, אם העיצוב הכולל שלנו אינו דורש פירוט ברמה זו, גישה זו יכולה להיות דרך טובה יותר לשרת סמלים באתרים. יש לו גמישות, יכולת הרחבה, הוא מוכן לרשתית עם גודל קובץ קטן מאוד, מה עוד אנחנו יכולים לבקש?

לבסוף, אם אתה רוצה לצלול עמוק לתוך הנושא הזה, להלן יש לנו להרכיב כמה הפניות שימושי, כמו גם הדגמה וקוד המקור שלנו להורדה.

• כיצד להפוך את סמל משלך Webfont - WebDesignerDepot.com
• הצגת גופנים ותכונות נתונים - 24Ways
• שימוש פרטי Unicode - ויקיפדיה

• הדגמה
• הורד מקור