CSS3 תומך בהטמעת גופנים. כלומר ניתן להציג אצל הגולש באתר גופנים שלא מותקנים אצלו במחשב. דוגמה לכך ניתן לראות בכותרת של האתר החדש שבניתי קטעים בהיסטוריה. השתמשתי ב־css כדי להטמיע את הגופן החופשי קולמוס כתר ארם צובא.
ההטמעה היא פשוטה מאוד. משתמשים ב־font-face כדי להטמיע את קובץ הגופן ואז ניתן להגדיר אותו לטקסט כמו כל גופן.
font-family: KeterAramTsova;
src: local("Keter Aram Tsova"),
url("KeterAramTsova.ttf"),
url("KeterAramTsova.eot"); /* For IE */
}
.blog-name {
font-family: KeterAramTsova,'Segoe UI',Arial,Helvetica,sans-serif;
}
אבל לשיטה הזו יש גם חסרונות. למשל אם תכנסו לוויקיפדיה בשפת אוריה תשימו לב להבהוב של הטקסט שנגרם מכך שהדפדפן טוען את הגופן רק אחרי שסיים לטעון את העמוד. אני סבור שהבאג הזה אמור להיפתר ברמת התקן או לפחות ברמת הדפדפן, נפתח באג בפיירפוקס אבל הוא נסגר בסוף. הפתרון ההגיוני יהיה לטעון את הגופן לפני טעינת הטקסט.
בינתיים יש כמה פתרונות שמתקנים את הבעיה או לפחות משפרים אותה.
- להסיר מקובץ הגופן את התווים המיותרים – כדי להאיץ את טעינת הקובץ כדאי להקטין את הנפח שלו. בעזרת תכנה לעריכת קובצי גופנים כמו fontforge ניתן לפתוח את קובץ הגופן ולהסיר ממנו את כל התווים שאין לנו צורך בהם. אני מחקתי מהקובץ את כל התווים באנגלית וביידיש וכמעט את כל סימני הפיסוק ונשארתי עם אותיות הא״ב, זה צמצם את גודל הקובץ פי עשרה.
- להפעיל מטמון – בעזרת הוספת השורות הבאות לקובץ .htaccess בשרת, אנחנו נגדיר לדפדפן לא להוריד כל פעם את הקובץ מהשרת אלא לטעון אותו מהמטמון.
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType font/truetype "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType font/woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
</IfModule> - להפעיל דחיסת gzip על הגופנים – לא מצאתי ממש דוגמה טובה לזה אז אני מקווה שהקוד הבא מספיק טוב, לקחתי אותו מתוך html5boilerplate. גם אותו מוסיפים לקובץ .htaccess
<IfModule mod_deflate.c>
<IfModule filter_module>
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/vnd.ms-fontobject
FilterProvider COMPRESS DEFLATE resp=Content-Type $image/svg+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/x-font-ttf
FilterProvider COMPRESS DEFLATE resp=Content-Type $font/opentype
</IfModule>
</IfModule> - אפשר גם להפעיל קוד JavaScript שיעכב את הצגת הדף עד לטעינת הגופן. אצל פול אייריש יש כמה רעיונות.
ובכלל מומלץ לקרוא את הפוסט של פול אייריש שיותר מפורט משלי. אבל למרות כל הפתרונות שכאן אני חושב שאלה רק מעקפים והפתרון צריך להיות ברמה מערכתית.
על 
על 
הי,
.
הקדמת אותי בכמה ימים, רציתי לפרסם פוסט דומה לשלך, למעשה כמעט סיימתי לכתוב אותו
רק הערה קטנה, חשוב לציין שעדיף להשתמש בגופנים מיועדים לווב Web Fonts כדי שיוצגו באופן זהה בדפדפנים שונים.
גופנים ישנים בעברית שאינם מותאמים לווב לא כ"כ עובדים באקספלורר.
אלכס
אלכסנדר: אשמח לקרוא את הפוסט שלך, אולי הוא יוסיף עוד טיפים.
ומי שמשתמש באקספלורר מגיע לו לסבול.
אני כנראה אפרסם אותו בשבוע הבא (אשלח לך קישור אם תרצה).
בכל מקרה, הכוונה שלי הייתי אחרת, הרבה מאוד גופנים (גם בעברית) מוצגים שונה בדפדפנים שונים. אלה, גופנים מותאמי ווב, מוצגים בכל הדפדפנים באופן זהה.
לדגמה, קיבלתי עיצוב להמרה והיה שם שימוש ב FF-Meta גופן.
בפועל הוא נראה כך: http://new.myfonts.com/fonts/fontfont/ff-meta.
אבל בוואב הוא נראה אחרת לגמרה https://typekit.com/fonts/ff-meta-web-pro.
אני אשמח לקישור.
ההטמעה בדף שקישרת אליו היא עם JS ולא CSS ואולי לכן הבעיה.
אם יש בעיה בהטמעה של CSS זה באג ושווה לדווח עליו.
רק משהו קטן ששמתי אליו לב: בתחתית אתר ההיסטוריה מופיע "נבנה בהתנדבות בידי עמיעד פיתוח אתרים" עם קישור אל file:// משהו, שזה בטח לא מה שהתכוונת…
דור.
דור: תודה על התיקון. זאת בעיה בתבנית שבשמירה חוזרת של קישור למטה היא שוברת אותו.
אני אלך לתקן שוב.