ฟอนต์เลนส์

ส่วนขยายฟรีสำหรับ Chrome

ฟอนต์นี้ชื่ออะไร? คลิกขวา เพื่อดู CSS

เลือกข้อความบนเว็บไซต์แล้วคลิกขวา จากนั้นเลือก “Inspect font with FontLens” เครื่องมือตรวจสอบฟอนต์จะเปิดทับหน้าเว็บ แสดง family ขนาด น้ำหนัก ระยะบรรทัด สี โค้ด CSS ที่พร้อมคัดลอก และปุ่มดาวน์โหลดฟอนต์

เพิ่มใน Chrome — ฟรี

ยังใช้งานได้ใน Edge, Brave, Opera และเบราว์เซอร์ Chromium อื่นๆ

เครื่องมือตรวจสอบ FontLens แสดงตัวอย่าง Ag ระหว่างเส้น cap-height, x-height และ baseline พร้อมคุณสมบัติฟอนต์และโค้ด Tailwind

ภาพรวม

ทำอะไรได้บ้าง
แสดง family ขนาด น้ำหนัก ระยะบรรทัด สี และสไตล์อื่นของข้อความที่เลือกซึ่งต่างจากค่าเริ่มต้น พร้อม 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 เอง
Version
2.2.0, อัปเดตเมื่อ 23 ตุลาคม 2569

สองคลิกก็รู้ชื่อฟอนต์

  1. 1

    เลือกข้อความ

    เลือกหัวข้อ ย่อหน้า หรือข้อความบนปุ่มจากหน้าเว็บใดก็ได้

  2. 2

    คลิกขวา

    เลือก “Inspect font with FontLens” เครื่องมือตรวจสอบจะเปิดทับหน้า พร้อมแสดง family ขนาด น้ำหนัก ระยะบรรทัด และสี

  3. 3

    คัดลอกหรือปรับแต่ง

    คัดลอก CSS หรือ Tailwind ลองเปลี่ยนขนาดหรือสีในตัวอย่างสด หรือดาวน์โหลดไฟล์ฟอนต์

เหตุผลที่คนเปิดใช้

Aa

รู้ชื่อแบบอักษร

เห็นหัวข้อที่ชอบใช่ไหม เลือกข้อความเพื่อดู family น้ำหนัก และแหล่งที่มาของฟอนต์ เช่น Google Fonts, Adobe Fonts หรือเว็บไซต์นั้นเอง

{ }

เทียบกับแบบจำลอง

เทียบค่าบนหน้าเว็บจริงกับไฟล์ออกแบบ แล้วคัดลอกกฎเป็น CSS, SCSS, SASS หรือ Tailwind

4.5:1

ตรวจสอบคอนทราสต์

ดูอัตราส่วนคอนทราสต์พร้อมเครื่องหมาย AA และ AAA แล้วลองใช้ข้อความสีเข้มหรือพื้นหลังสีอ่อนก่อนเผยแพร่งานออกแบบ

ทำอะไรได้บ้าง

  • ตัวอย่างพร้อมเส้นบอกขนาด

    แสดง family แรกในรายการ โดยวางระหว่างเส้น cap-height, x-height และ baseline ที่วัดจากตัวฟอนต์จริง

  • รูปแบบโค้ด

    CSS, SCSS, SASS และ Tailwind คัดลอกโค้ดทั้งหมดหรือทีละบรรทัดได้ และระบบจำรูปแบบที่ใช้ล่าสุด

  • เลือกหน่วยได้

    แสดงขนาดเป็น px, rem, pt หรือ em ทั้งในช่องและโค้ด โดย rem อิงขนาด root ของหน้าเว็บ

  • แหล่งที่มาของฟอนต์

    ป้ายกำกับบอกว่าใช้ฟอนต์จาก Google Fonts, Adobe Fonts, โฮสต์เอง หรือ system font ที่มีในคอมพิวเตอร์

  • ตรวจสอบคอนทราสต์

    ดูอัตราส่วนระหว่างข้อความกับพื้นหลัง พร้อมเครื่องหมาย AA และ AAA สำหรับข้อความปกติและขนาดใหญ่ ซึ่งอัปเดตเมื่อเปลี่ยนสี

  • Download font

    ดึงไฟล์จากแหล่ง @font-face และตั้งชื่อตาม family หากเซิร์ฟเวอร์บล็อก จะเปิดแหล่งที่มาในแท็บใหม่

ทำไมการหา “ฟอนต์นี้ชื่ออะไร” ใน DevTools ถึงใช้เวลานาน

หน้าเว็บระบุรายชื่อฟอนต์ไว้ แล้วเบราว์เซอร์จะใช้ตัวแรกที่มี หากอยากรู้ว่าใช้ตัวไหน ต้องเปิด DevTools หา element อ่าน Computed panel แล้วตามหาไฟล์ฟอนต์ใน Network panel ส่วนขนาด น้ำหนัก ระยะบรรทัด และสีอยู่คนละจุดกัน

FontLens อ่าน computed style ของข้อความที่คุณเลือก แล้วรวมไว้ใน panel เดียว ทั้ง family stack ตัวอย่างของ family แรก ค่าต่างๆ แหล่งฟอนต์ และ CSS เนื่องจากอ่าน CSS ของหน้าเว็บ จึงระบุฟอนต์ในภาพไม่ได้

ไม่มีข้อมูลออกจากเบราว์เซอร์

  • ไม่ต้องมีบัญชี ไม่มีเซิร์ฟเวอร์

    ฟอนต์เลนส์ทำงานในเบราว์เซอร์ของคุณ ไม่มีการวิเคราะห์ข้อมูลและไม่มีการติดตาม

  • อ่านเฉพาะสิ่งที่คุณเลือก

    เครื่องมือตรวจสอบอ่านสไตล์ของข้อความที่คุณคลิกขวา ไม่มีการส่งข้อมูลเกี่ยวกับหน้าเว็บออกไป

  • สิทธิ์ 4 รายการ

    context menu สำหรับรายการคลิกขวา, active tab และการเข้าถึงหน้าเว็บเพื่อเปิดเครื่องมือตรวจสอบ, storage สำหรับข้อความตัวอย่าง หน่วย และรูปแบบโค้ด

Chrome DevTools เทียบกับ FontLens

Chrome DevTools เทียบกับ FontLensChrome DevToolsฟอนต์เลนส์
ดูฟอนต์ของข้อความตรวจสอบ หา element แล้วเปิด Computed panelเลือกข้อความ คลิกขวา แล้วเลือกรายการเดียว
คัดลอกเป็น Tailwind หรือ SCSSไม่ได้ ต้องคัดลอกค่าแยกทีละรายการแท็บ CSS, SCSS, SASS หรือ Tailwind
ฟอนต์มาจากไหนค้นหาไฟล์ฟอนต์ใน Network panelป้ายกำกับ: Google Fonts, Adobe Fonts, โฮสต์เอง หรือระบบ
ดาวน์โหลดไฟล์ฟอนต์หาใน Network หรือ Sources แล้วบันทึกปุ่มเดียว
ตรวจสอบคอนทราสต์ในตัวเลือกสีของ Styles panelเครื่องหมาย AA และ AAA ข้างตัวอย่างสด
ราคามีมาให้แล้วฟรี

คำถามที่พบบ่อย

จะรู้ได้อย่างไรว่าเว็บไซต์ใช้ฟอนต์อะไร

เพิ่มฟอนต์เลนส์ใน Chrome เลือกข้อความบนเว็บไซต์ คลิกขวา แล้วเลือก “Inspect font with FontLens” คุณจะเห็น family ขนาด น้ำหนัก ระยะบรรทัด สี และแหล่งที่มาของฟอนต์

จะคัดลอก 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 คำนวณจาก root font size ของหน้าเว็บและระบบจำค่าที่คุณเลือก

ฟรีไหม มีการเก็บข้อมูลหรือเปล่า

ฟรีและไม่ต้องมีบัญชี ไม่มีเซิร์ฟเวอร์หรือการวิเคราะห์ข้อมูล คำขอเดียวที่ส่งคือการดาวน์โหลดฟอนต์ที่คุณเริ่มเอง

ใช้กับ Edge, Brave หรือ Opera ได้ไหม

เบราว์เซอร์ Chromium ส่วนใหญ่ติดตั้งส่วนขยายจาก Chrome Web Store ได้ รวมถึง Edge, Brave, Opera และ Vivaldi แต่ไม่รองรับ Firefox และ Safari

ส่วนขยายฟรีเพิ่มเติมจาก PYROCTAL

ฟอนต์นี้ชื่ออะไร? รู้ได้ในสองคลิก

เพิ่มใน Chrome — ฟรี