פונטלנס

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

יצא לכם פעם להגיע לעמוד אינטרנט, להתפעל מהכיתוב, ולתהות "איזה פונט זה?" FontLens עונה על השאלה הזו בלחיצה אחת. סמנו כל טקסט בכל אתר, לחצו על הכפתור הימני בעכבר, ובחרו "בדיקת פונט עם FontLens". חלונית נקייה וממוקדת נפתחת ישירות מעל העמוד וחושפת בדיוק איך הטקסט הזה מעוצב: הגופן, גודלו, משקלו, גובה השורה, הצבע, וכל פרט אחר מאחורי העיצוב. בין אם אתם מעצבים שעושים הנדסה הפוכה לפריסה, מפתחים שמתאימים עיצוב למפרט, או פשוט סקרנים לגבי כותרת יפה, הכלי הזה הופך כל דף אינטרנט לספר פתוח של טיפוגרפיה. FontLens הוא מאתר פונטים ובודק CSS בכלי אחד. הוא לא רק אומר לכם את שם ה-font-family, הוא מספק לכם קוד מוכן לשימוש, אזור משחק אינטראקטיבי לבחינת רעיונות, וכלי נגישות כדי לוודא שהטקסט שלכם קריא. אין צורך בחשבון. אין צורך להירשם. פשוט סמנו, לחצו על הכפתור הימני, ובדקו. 🔍 מה אפשר לעשות • לחשוף את הטיפוגרפיה המלאה של כל מילה מסומנת: font-family, font-size, font-weight, line-height והצבע במבט חטוף • לראות עיצובים נוספים שקל לפספס, כמו letter-spacing, text-transform, ו-font-style • להעתיק כל מאפיין בודד בלחיצה אחת, או לתפוס את כלל החוקים כמקטע CSS שלם • להמיר את המקטע ל-Tailwind, SCSS, או SASS באמצעות לשוניות פשוטות, ואז להעתיק את הכל או שורה אחר שורה • להתנסות בתצוגה מקדימה חיה וניתנת לעריכה: לכתוב מחדש את מילות הדוגמה, לשנות את הערכים, להחליף את הרקע, ולצפות בעדכון המיידי • לזהות את מקור הפונט באמצעות תג ספק (Google Fonts, Adobe Fonts, אירוח עצמי, או פונט מערכת מובנה) • לשמור פונט ווב למחשב באמצעות כפתור "הורדת פונט", הנשלף ישירות מהמקור שלו • לבדוק את ניגודיות הצבעים מול תקני WCAG, עם היחס המדויק בתוספת תוצאות "עובר" או "נכשל" עבור AA ו-AAA • לבחור ולדגום צבעים עם בורר צבעים מלא, כולל טפטפת לדגימת כל פיקסל על המסך • להחליף יחידות מידה בין px, rem, pt, ו-em, שינוי שיוחל הן על השדות והן על הקוד המיוצא 🖱️ איך זה עובד השימוש ב-FontLens לוקח שניות. סמנו את המילים שברצונכם לבחון, לחצו לחיצה ימנית על הטקסט המסומן, ובחרו "בדיקת פונט עם FontLens" מהתפריט. החלונית מופיעה מעל העמוד הנוכחי, מעוצבת בצורה נקייה כך שהיא לעולם לא תתנגש עם המראה של האתר עצמו. משם תוכלו לקרוא את הפרטים, להעתיק את מה שאתם צריכים, או להתחיל לערוך. התצוגה המקדימה החיה היא המקום שבו הדברים נעשים מהנים. שנו את הנוסח כדי לבחון כותרת אמיתית, שנו מעט את הגודל, התאימו את המשקל, או הגדירו צבע רקע חדש כדי לראות איך הפונט מחזיק מעמד. העריכות שלכם נשמרות כשאתם עוברים בין עמודים וחוזרים מאוחר יותר, כך שרעיון שהתחלתם באתר אחד יחכה לכם באתר הבא. כאשר תרצו לחזור לערכים המקוריים, כפתור "אפס לאתר" משחזר את כל מה שהעמוד משתמש בו בפועל. צריכים את הנכס הגולמי? עבור פונט ווב שניתן להורדה, כפתור אחד מביא את הקובץ האמיתי ממיקום ה-@font-face שלו. עבור פונט שכבר מגיע עם מערכת ההפעלה שלכם, FontLens יגיד לכם שזהו פונט מובנה, כך שתדעו שהוא זמין ללא כל צורך בהורדה. 🔒 פרטיות לפני הכל FontLens פועל כולו בתוך הדפדפן שלכם. אין איסוף נתונים, אין מעקב, אין אנליטיקה, ואין שרתים חיצוניים המעורבים בבדיקת הטקסט. כל מה שאתם בוחנים נשאר על המחשב שלכם. התוסף מבצע בקשת רשת אחת בלבד, ורק כאשר אתם לוחצים במכוון על "הורדת פונט", ובנקודה זו הוא פונה למקור של הפונט עצמו כדי להוריד את הקובץ. שום דבר אחר לא עוזב את המכשיר שלכם. ההרשאות מצומצמות בכוונה. הרשאת תפריט ההקשר (context-menu) מוסיפה את האפשרות בתפריט הלחיצה הימנית. הרשאת הלשונית הפעילה (active-tab) מאפשרת לכלי לקרוא את הטקסט שבחרתם בלשונית שבה הפעלתם אותו, ובשום מקום אחר. הרשאת האחסון (Storage) שומרת את טקסט התצוגה המקדימה שלכם ואת העדפות יחידות המידה והפורמט שלכם כך שהן ייזכרו בפעם הבאה. אין גישה רחבה להיסטוריית הגלישה שלכם ואין הרשאות מארח גורפות. 👥 למי זה מיועד • מעצבי אתרים שרוצים לזהות גופן, לתפוס פלטת צבעים, ולעשות שימוש חוזר בסגנונות במהירות • מפתחי פרונט-אנד שמתאימים עיצוב למודל (mockup) או שואבים ערכים מדויקים של font-family וריווח ישירות לקוד • מהנדסי UI ו-UX שבוני מערכות טיפוגרפיות עקביות ונאמנות למותג • סטודנטים שלומדים CSS וטיפוגרפיה ורוצים לראות איך אתרים אמיתיים בנויים • בודקי נגישות שמוודאים שטקסט עומד בדרישות הניגודיות של WCAG לפני העלאה לאוויר • בלוגרים, אנשי שיווק, וקוראים סקרנים שפשוט רוצים לדעת באיזה פונט אתר מסוים משתמש ✨ למה אנשים משאירים אותו • לחיצה ימנית אחת נותנת לכם את התשובה במקום לחפור בכלי המפתחים • הקוד מוכן להעתקה ב-CSS רגיל, Tailwind, SCSS, או SASS, כך שהוא נכנס ישירות לפרויקט שלכם • התצוגה המקדימה הניתנת לעריכה מאפשרת לכם ליצור אבות טיפוס לבחירות טיפוגרפיות מבלי לגעת בשורת קוד אחת • בודק הניגודיות משלב נגישות בתהליך העבודה שלכם במקום להשאיר אותה כמחשבה שנייה • בורר הצבעים והטפטפת מאפשרים לכם לדגום צבעים מדויקים מכל מקום בעמוד ולעשות בהם שימוש חוזר • ערכות נושא בהירה וכהה עוקבות אוטומטית אחר מערכת ההפעלה שלכם, כך שהוא מרגיש בבית ביום ובלילה • החלפת יחידות מידה בין px, rem, pt, ו-em שומרת על תאימות הפלט לאופן שבו בסיס הקוד שלכם כתוב 🎨 מבט מקרוב על הפרטים טיפוגרפיה היא יותר מסתם שם. FontLens חושף את ההחלטות הקטנות שגורמות לטקסט להרגיש נכון, ממשקל הכותרת ועד ל"אוויר לנשימה" ב-line-height והריווח העדין של ה-letter-spacing. ראיית הערכים הללו זה לצד זה עוזרת לכם להבין מדוע עיצוב מסוים עובד וכיצד לשחזר אותו. גם תג הספק מוסיף הקשר, ומספר לכם במבט חטוף אם אתם מסתכלים על נכס של Google Fonts, פונט של Adobe Fonts, קובץ באירוח עצמי, או ברירת מחדל של המערכת, שזהו לעיתים קרובות הרמז הראשון כאשר אתם יוצאים להתאים או למצוא גופן. כלי הצבע מציעים יותר מקריאה סטטית. בורר הצבעים מציע ריבוע HSV עם סליידרים לגוון (hue) ושקיפות (alpha), והוא תומך בפורמטים HEX, RGB, ו-HSL כך שתוכלו לעבוד באיזה פורמט שמתאים לכם. שלבו זאת עם הטפטפת ותוכלו לדגום את הגוון המדויק של כל אלמנט ולהכניס אותו לתצוגה המקדימה או להערות שלכם. 🚀 התחילו לבדוק הוסיפו את FontLens, סמנו כמה מילים, ולחצו על הכפתור הימני כדי לחשוף את הטיפוגרפיה, הסגנונות, והצבעים מאחורי כל עמוד. זהו בן לוויה מהיר, פרטי, ושימושי באמת לכל מי שאכפת לו איך הרשת נקראת. התקינו אותו, שמרו אותו בהישג יד, ולעולם לא תצטרכו לתהות שוב לגבי פונט מסתורי.