פונטלנס

תוסף חינמי ל-Chrome

איזה פונט זה? לחיצה ימנית ותראו את ה-CSS

בחרו טקסט בכל אתר, לחצו עליו לחיצה ימנית ובחרו ״Inspect font with FontLens״. כלי בדיקת הפונטים ייפתח מעל הדף ויציג את המשפחה, הגודל, המשקל, גובה השורה, הצבע, CSS שמוכן להעתקה וכפתור להורדת הפונט.

הוספה ל-Chrome — בחינם

עובד גם ב-Edge, Brave, Opera ודפדפני Chromium אחרים.

כלי הבדיקה של FontLens: דוגמת Ag בין קווי cap-height, x-height ו-baseline, מאפייני הפונט וקטע Tailwind

במבט מהיר

מה הוא עושה
מציג את משפחת הפונט של הטקסט שבחרתם, הגודל, המשקל, גובה השורה, הצבע וסגנונות נוספים ששונים מברירת המחדל, עם CSS שמוכן להעתקה.
איך מתחילים
בחרו טקסט, לחצו לחיצה ימנית ובחרו ״Inspect font with FontLens״. פריט התפריט מופיע רק כשנבחר טקסט.
העתקה כ-
CSS, SCSS, SASS או Tailwind, עם גודל ביחידות px, rem, pt או em.
קובץ הפונט
״Download font״ מוריד את פונט האינטרנט ממקור @font-face. בדקו את רישיון הפונט לפני השימוש.
למי זה מתאים
מעצבי אתרים, מפתחי front-end, בודקי נגישות וסטודנטים שלומדים CSS.
מחיר
בחינם. אין צורך בחשבון ואין גרסה בתשלום.
נתונים
פועל בדפדפן שלכם. בלי שרתים ובלי איסוף נתונים. הבקשה היחידה שהוא שולח היא הורדת הפונט שאתם מתחילים.
עובד בדפדפנים
Chrome ודפדפני Chromium אחרים שמתקינים תוספים מ-Chrome Web Store. לא ב-Firefox או Safari.
מגבלות
קורא CSS של טקסט אמיתי בדפי אינטרנט. לא טקסט בתמונות, ב-canvas או בקובצי PDF, וגם לא בדפים של Chrome עצמו.
גרסה
2.2.0, עודכן ב-23 באוקטובר 2026

שתי לחיצות עד לפונט

  1. 1

    בחרו טקסט

    כותרת, פסקה או תווית של כפתור בכל דף אינטרנט.

  2. 2

    לחצו לחיצה ימנית

    בחרו ״Inspect font with FontLens״. כלי הבדיקה ייפתח מעל הדף ויציג את המשפחה, הגודל, המשקל, גובה השורה והצבע.

  3. 3

    העתיקו או שנו

    העתיקו CSS או Tailwind, נסו גודל או צבע אחר בתצוגה המקדימה החיה, או הורידו את קובץ הפונט.

למה משתמשים פותחים אותו

Aa

גלו את שם הפונט

ראיתם כותרת שאהבתם? בחרו אותה וגלו את המשפחה, המשקל ומקור הפונט: Google Fonts, Adobe Fonts או האתר עצמו.

{ }

השוו לעיצוב

השוו בין הערכים בדף החי לקובץ העיצוב, ואז העתיקו את הכללים כ-CSS, SCSS, SASS או Tailwind.

4.5:1

בדקו ניגודיות

ראו את יחס הניגודיות עם סימוני AA ו-AAA, ונסו טקסט כהה יותר או רקע בהיר יותר לפני פרסום העיצוב.

מה הוא עושה

  • דוגמת אותיות עם קווי מדידה

    המשפחה הראשונה ברשימה מוצגת בין קווי cap-height, x-height ו-baseline שנמדדו מהפונט עצמו.

  • פורמטים לקטעי קוד

    CSS, SCSS, SASS ו-Tailwind. העתיקו את כל הקטע או שורה אחת; הפורמט האחרון שבחרתם נשמר.

  • היחידות שלכם

    הציגו גודל ביחידות px, rem, pt או em בשדות ובקטע הקוד. rem מחושב לפי גודל הבסיס של הדף.

  • מקור הפונט

    תג מציין מהיכן מגיע הפונט: Google Fonts, Adobe Fonts, אירוח עצמי או system font שכבר מותקן במחשב שלכם.

  • בדיקת ניגודיות

    היחס בין הטקסט לרקע מוצג עם סימוני AA ו-AAA לטקסט רגיל וגדול, ומתעדכן כשמשנים צבעים.

  • Download font

    מוריד את הקובץ ממקור @font-face ונותן לו את שם המשפחה. אם השרת חוסם את ההורדה, המקור נפתח בכרטיסייה חדשה.

למה לוקח כל כך הרבה זמן למצוא ב-DevTools איזה פונט זה

דף מגדיר רשימת פונטים, והדפדפן משתמש בראשון שזמין. כדי לגלות באיזה פונט מדובר, פותחים את DevTools, מוצאים את הרכיב, קוראים את Computed panel ואז מחפשים את קובץ הפונט ב-Network panel. הגודל, המשקל, גובה השורה והצבע נמצאים במקומות שונים.

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

שום דבר לא יוצא מהדפדפן שלכם

  • בלי חשבון ובלי שרתים

    פונטלנס פועל בדפדפן שלכם. אין איסוף נתונים ואין מעקב.

  • קורא את מה שבחרתם

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

  • ארבע הרשאות

    context menu לפריט הלחיצה הימנית, active tab וגישה לדף כדי לפתוח את כלי הבדיקה, ו-storage לשמירת טקסט הדוגמה, היחידה ופורמט הקוד.

Chrome DevTools לעומת FontLens

Chrome DevTools לעומת FontLensChrome DevToolsפונטלנס
למצוא את הפונט של טקסטלבדוק, למצוא את הרכיב ולפתוח Computed panelלבחור טקסט, ללחוץ לחיצה ימנית ולבחור פריט אחד
להעתיק כ-Tailwind או SCSSלא; מעתיקים את הערכים אחד-אחדכרטיסייה של CSS, SCSS, SASS או Tailwind
לגלות מה מקור הפונטלחפש את קובץ הפונט ב-Network panelתג: Google Fonts, Adobe Fonts, אירוח עצמי או system
להוריד את קובץ הפונטלמצוא אותו ב-Network או ב-Sources ולשמורכפתור אחד
בדיקת ניגודיותבבורר הצבעים של Styles panelסימוני AA ו-AAA לצד תצוגה מקדימה חיה
מחירמובנהבחינם

שאלות נפוצות

איך מגלים באיזה פונט משתמש אתר?

הוסיפו את פונטלנס ל-Chrome, בחרו טקסט באתר, לחצו לחיצה ימנית ובחרו ״Inspect font with FontLens״. תראו את משפחת הפונט, הגודל, המשקל, גובה השורה, הצבע ומקור הפונט.

איך מעתיקים CSS של פונט מאתר?

בכלי הבדיקה בחרו בכרטיסייה CSS, SCSS, SASS או Tailwind ולחצו ״Copy all״, או העתיקו שורה אחת. אם צריך, החליפו קודם את היחידה ל-px, rem, pt או em.

אפשר להוריד פונט מאתר?

כשהטקסט משתמש ב-web font, ״Download font״ מוריד את הקובץ ממקור @font-face. ל-system font אין קובץ להורדה. בדקו את רישיון הפונט לפני השימוש בפרויקט שלכם.

FontLens יכול לזהות פונט בתמונה או ב-PDF?

לא. הוא קורא CSS של טקסט אמיתי בדפי אינטרנט, ולכן אינו יכול לזהות פונטים בתמונות, ב-canvas או בקובצי PDF.

איך בודקים ניגודיות טקסט לפי WCAG?

התצוגה המקדימה מציגה את יחס הניגודיות בין צבע הטקסט לרקע ואת סימוני AA ו-AAA לטקסט רגיל וגדול. הסימונים מתעדכנים כשמשנים אחד מהצבעים.

אפשר להציג גדלים ב-rem במקום ב-px?

כן. החליפו את היחידה ל-px, rem, pt או em, והשדות וקטע הקוד יתעדכנו. rem מחושב לפי גודל הפונט הבסיסי בדף, והבחירה שלכם נשמרת.

זה בחינם? הוא אוסף נתונים?

בחינם וללא צורך בחשבון. אין שרתים ואין איסוף נתונים; הבקשה היחידה היא הורדת הפונט שאתם מתחילים.

זה עובד ב-Edge, Brave או Opera?

רוב דפדפני Chromium יכולים להתקין תוספים מ-Chrome Web Store, כולל Edge, Brave, Opera ו-Vivaldi. Firefox ו-Safari אינם נתמכים.

עוד הרחבות חינמיות מבית PYROCTAL

איזה פונט זה? בשתי לחיצות.

הוספה ל-Chrome — בחינם