GlyphsMap.com

להציג מפת תווים באתר הפונטים שלך תוך שניות ולגמרי בחינם.

מעצבי פונטים? הנה 8 סיבות למה כדאי לכם להטמיע מפת תווים באתר הפונטים שלכם

  • הכל מוכן בשבילכם: הציגו מפות תווים באתר הפונטים שלכם על סמך קובץ הפונט בלבד ובלי עבודה נוספת
  • העתקה בהקלקה: כשמקליקים על תו ממפת התווים, הוא מועתק באופן מיידי וניתן להדביק אותו איפה שרוצים להשתמש בו (קנבה, פוטושופ, אפטר אפקטס וכו׳)
  • ללקוחות יש סיבה לחזור: לקוחות שלכם יחזרו לבקר באתר שלכם רק כדי להעתיק תו מסויים שהם זקוקים לו
  • תצוגה יפה לניקוד: במקום להציג רק את תו הניקוד, אוטומטית מצטרפת אליו אות רלוונטית (בחולם האות ו׳, בפתח האות א׳, ברפה האות פ׳ וכו׳)
  • תמיכה רספונסיבית: מפת התווים מותאמת לגודל המסך של הגולש (נייד, טאבלט ומחשב)
  • נראות בהתאמה אישית: אפשר לשנות את הצבעים והעיצוב של מפת התווים בעזרת CSS
  • טעינה מהירה: מפת התווים מציגה את התווים ללא תמונות אלא כפונט חי, מה שתורם למהירות הטעינה בדפדפנים השונים
  • תומך יוניקוד: במידה ויש לכם בפונט אמוג׳יז או תווי PUA, זה עדיין יציג אותם
  • כל פורמט שתרצו: עובד עם פורמט ttf / otf / woff / woff2
  • חינמי לשימוש: כדי שעוד אנשים יוכלו להיחשף לשירות, יוצג בתחתית מפת התווים ׳באדיבות GlyphsMap׳

שלב 1: מוסיפים את הסקריפט הזה בכל הדפים שבהם תוצג מפת הגליפים ב-HEAD/BODY

<script type="module" crossorigin src="https://run.glyphsmap.com/here.js"></script>

שלב 2: מוסיפים את מפת התווים בעמוד

א. יש להעלות את קובץ הגופן שלך ttf/otf/woff/woff2 לכל מקום ברשת ולהדביק כאן את ה-URL:

ב. להוסיף את מפת הגליפים איפה שתרצה בעמוד שלך:

<div glyphsmap-from-font-url="/fonts/FtPilKahol/FtPilKahol.ttf"></div>

Alternative:

<div glyphsmap-from-font-url style="display:none;">/fonts/FtPilKahol/FtPilKahol.ttf</div>

שלב 3: מוודאים שזה עובד

שלב 4 (אופציונלי): לעצב את זה איך שבא לך!

באמצעות CSS ניתן לעצב את זה.

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

[glyphsmap-from-font-url] .glyphsmap-container {
    gap: 3px !important;
	color: #003878;
}
[glyphsmap-from-font-url] .glyphsmap-container .glyphsmap-item {
	font-size: 1.5em !important;
}

שאלות ותשובות

למה חלק מהגליפים שלי הוחלפו באמוג׳יז?

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

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