@ Fontface: הבעת את זה עם גופן על פי בחירתך; שימוש WebFonts
CSS סיים 10 שנות קיומה השנה! מי בסביבה כבר זמן מה, להרוויח את לחמם (או לא) באמצעות CSS, אז אולי מודעים עד כמה היינו רעבים לבחירה טובה של גופנים. גם עם חוסר של גופנים מעצבים כמו אלה על גן זן CSS עשו שימוש בתמונות-CSS רקע להחליף גופנים במרדף אחר לעשות קצת צדק עם העיצובים שלהם. ניסינו גם פלאש / JavaScript ® פריצות להשיג מטרות העיצוב שלנו. בשום פנים ואופן לא זה הדרך הלא נכונה להשיג את הגופנים אנו חפצים לתוך עיצובים האינטרנט שלנו, אבל בהחלט, זה לא הדרך הרצויה ביותר. ושוב מעצב אינטרנט שנים, כמוני, יש לסמוך באופן מלא על עשרה בערך גופנים עבור העיצובים שלהם.
ההתפתחויות האחרונות בתקני אינטרנט ותבניות גופן מאפשרים להפוך טקסט ב-HTML הגופנים שאינם הגופנים אותם ברירת המחדל ישנים. מגיע "@ fontface" decleration CSS.
@ Fontface provids פתרון קישור לקובץ גופן בפועל לאחזר אותה מהאינטרנט. באמצעות @ fontface, מעצבי יכול להשתמש בגופנים מבלי להקפיא את הטקסט כתמונות רקע. היישום הוא מאוד ישר קדימה, כפי שנראה בהמשך, אך כמו כל הדברים הטובים יש חלק CON אליו, לא כל הדפדפנים תומכים "סוג הגופן" אחת. אם אתם מתכננים להשתמש fontface @ באתר עם המחייב תמיכה דפדפנים, אז תצטרך לספק מקורות שונים למוצרי סוגי גופנים של אותו דבר.
- TrueType - פורמט שנועד להיראות טוב על המסך. מומלץ במיוחד עבור Windows דפדפנים (Chrome).
- OpenType (CFF) - פורמט זה הוא טוב יותר לעבודת ההדפסה לא תמיד נראה טוב ב-Windows.
- EOT - אתה צריך את זה בפורמט אם אתה רוצה למקד את Internet Explorer. IE לא להשתמש בכל תבנית אחרת. של EOT שלנו ייחשב "לייט", שכן הם דחוסים ולא תחום מוגבל.
- SVG - זה בפורמט XML נתמך על ידי מספר דפדפני כולל iPhone.
- WOFF - זה לדפדפנים, אינטרנט רק עיצוב הגופן הוא קל משקל (נתוני הגופן הוא דחוס), ואפשר גם עם הידור TrueType או PostScript (CFF) מתאר. היא נתמכת כיום על ידי פיירפוקס 3.6 +.
באמצעות @ fontface
@ Font-הפנים { גופן משפחתי: "CalligraphyFLFRegular '; src: url ("CalligraphyFLF.eot '); src: מקומית ("CalligraphyFLF"), המקומית ("CalligraphyFLF '), בפורמט URL (" CalligraphyFLF.woff ") (" woff "), כתובת האתר (" CalligraphyFLF.ttf') בפורמט ("TrueType"), כתובת האתר ("CalligraphyFLF . SVG # CalligraphyFLF ') בפורמט ("SVG"); } @ Font-הפנים { גופן משפחתי: "הגופן שלך"; src: url ("גופנים / font_filename.eot"); src: מקומית ("שם חלופי"), המקומית ("Alternatename"), ("גופנים / font_filename.woff") בפורמט URL ("woff"), ("גופנים / font_filename.otf") בפורמט URL ("OpenType"), ("גופנים / font_filename.svg # font_filename") בפורמט URL ("SVG"); } h2 {font-family: "הגופן שלך", ג'ורג'יה, serif;}
כפי שניתן לראות מהדוגמה לעיל, לכלול את הגופן גופן שנבחר, יש קישור לסדרה של fonttypes על גופן את אותו הדבר. ולכן אנשים מתייחסים אליו כאל "קיט גופן".
ישנן ערכות גופנים הזמינות במפורש מאפשר קישור עם נכס @ font-CSS הפנים לה על פי הסכם הרשיון למשתמש קצה (EULA).
WebFont משאבים שימושיים:
- עבור @ גופן פנים הטבעת גופנים בדף ויקי ב http://webfonts.info/wiki/index.php?title=Main_Page
- ריי Larabie . הוא מעצב בעל שם גופן שעשה מאות גופני TrueType מעניינים זמינים לשימוש חופשי באינטרנט. הגופנים שלו אלגנטי, דקורטיבי, ושובבה.
- דיטר Steffmann עוד מעצב גופן גדול. גם הוא עשה גופנים יפים רבים זמינים לכל אחד להשתמש.
- חנות גופן : מציעה גופנים שעוצבו במיוחד לשימוש באינטרנט. יותר מ 30 המשפחות FontFont המצליחים ביותר זמינה כעת FontFonts אינטרנט. FontShop גם WebFont מפורט הוראות שימוש http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
- סנאי גופן : מציגה את כל הגופנים סנאי גופן מציע לשימוש עם הטבעה CSS @ font-הפנים. סנאי גופן מציע כמות מרשימה של סוג, עושה את זה פשוט מת לבחור אחד החוצה, בלי בעיות "מציע" - ערכות הגופנים על פי בחירתך, בפורמטים שונים, ארוזים עם הדגמה HTML & CSS המשתמשת הנוכחי מאוד @ font-הפנים בתחביר . הם גם מציעים דרך לגרום @ משלך גופן פנים ערכות . אם הגופן שבו ברצונך להשתמש כבר רישיון מתאים (אלה שמגיעים עם המחשב הם לא בהכרח בסדר), גנרטור מייצר EOT, SVG, ו - היי! קבצים WOFF.
