ฟอนต์เลนส์

ตรวจสอบฟอนต์ง่ายๆ แค่เลือกข้อความแล้วคลิกขวา ดูได้ทั้งขนาด น้ำหนัก สี และ CSS พร้อมคัดลอก ปรับแต่ง ดูตัวอย่าง และดาวน์โหลด

เคยเข้าชมหน้าเว็บแล้วชื่นชมตัวอักษรจนสงสัยไหมว่า "นี่มันฟอนต์อะไร" FontLens ตอบคำถามนั้นได้ในคลิกเดียว เพียงเลือกข้อความใดก็ได้บนเว็บไซต์ไหนก็ได้ คลิกขวา แล้วเลือก "ตรวจสอบฟอนต์ด้วย FontLens" แผงควบคุมที่สะอาดตาและตรงประเด็นจะเปิดขึ้นมาทับหน้าเว็บนั้นๆ และเผยให้เห็นสไตล์ของข้อความนั้นอย่างละเอียด ไม่ว่าจะเป็นรูปแบบตัวอักษร ขนาด น้ำหนัก ความสูงของบรรทัด สี และทุกรายละเอียดเบื้องหลังการออกแบบ ไม่ว่าคุณจะเป็นนักออกแบบที่กำลังแกะแบบเลย์เอาต์ นักพัฒนาที่ต้องการเทียบสเปก หรือแค่คนที่สงสัยเกี่ยวกับหัวข้อข่าวที่สวยงาม เครื่องมือนี้จะเปลี่ยนทุกหน้าเว็บให้กลายเป็นหนังสือการออกแบบตัวพิมพ์ที่เปิดอ่านได้ FontLens คือเครื่องมือค้นหาฟอนต์และตรวจสอบ CSS ที่รวมอยู่ในที่เดียว ไม่เพียงแค่บอกชื่อตระกูลฟอนต์ (font-family) ให้คุณ แต่ยังมอบโค้ดที่พร้อมใช้งาน พื้นที่ทดลองแบบอินเทอร์แอคทีฟเพื่อทดสอบไอเดีย และเครื่องมือด้านการเข้าถึงเพื่อให้แน่ใจว่าข้อความของคุณอ่านง่าย ไม่ต้องมีบัญชี ไม่ต้องสมัครสมาชิก เพียงแค่เลือก คลิกขวา และตรวจสอบ 🔍 สิ่งที่คุณทำได้ - เปิดเผยข้อมูลการออกแบบตัวพิมพ์ทั้งหมดของคำที่เลือก: ตระกูลฟอนต์, ขนาดฟอนต์, น้ำหนักฟอนต์, ความสูงบรรทัด และสีได้ในพริบตา - เห็นสไตล์เพิ่มเติมที่มักถูกมองข้าม เช่น ระยะห่างระหว่างตัวอักษร (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) ใช้สำหรับจดจำข้อความพรีวิวของคุณ以及การตั้งค่าหน่วยและรูปแบบที่คุณต้องการสำหรับครั้งถัดไป ไม่มีการเข้าถึงประวัติการท่องเว็บในวงกว้าง และไม่มีการขอสิทธิ์โฮสต์แบบครอบคลุม 👥 เหมาะสำหรับใคร - นักออกแบบเว็บไซต์ที่ต้องการระบุรูปแบบตัวอักษร, เก็บชุดสี และนำสไตล์กลับมาใช้ใหม่อย่างรวดเร็ว - นักพัฒนาส่วนหน้า (Front-end) ที่ต้องการเทียบงานกับต้นแบบ หรือดึงค่าตระกูลฟอนต์และระยะห่างที่แม่นยำไปใช้ในโค้ด - วิศวกร UI และ UX ที่กำลังสร้างระบบการออกแบบตัวพิมพ์ที่สอดคล้องและตรงตามแบรนด์ - นักเรียนนักศึกษาที่กำลังเรียนรู้ CSS และการออกแบบตัวพิมพ์ที่ต้องการเห็นว่าเว็บไซต์จริงสร้างขึ้นมาอย่างไร - ผู้ตรวจสอบการเข้าถึง (Accessibility) ที่ต้องการยืนยันว่าข้อความตรงตามข้อกำหนดความต่างของสี WCAG ก่อนส่งมอบงาน - บล็อกเกอร์, นักการตลาด และผู้อ่านที่อยากรู้อยากเห็นที่เพียงต้องการรู้ว่าเว็บไซต์นั้นใช้ฟอนต์อะไร ✨ เหตุผลที่ผู้คนเลือกใช้ต่อเนื่อง - เพียงคลิกขวาครั้งเดียวก็ได้คำตอบ แทนที่จะต้องไปขุดหาในเครื่องมือสำหรับนักพัฒนา - โค้ดพร้อมคัดลอกในรูปแบบ CSS, Tailwind, SCSS หรือ SASS ทำให้สามารถนำไปวางในโปรเจกต์ของคุณได้ทันที - หน้าพรีวิวที่แก้ไขได้ช่วยให้คุณสร้างต้นแบบการเลือกตัวพิมพ์ได้โดยไม่ต้องแตะโค้ดแม้แต่บรรทัดเดียว - เครื่องมือตรวจสอบความต่างของสีช่วยสร้างการเข้าถึงให้เป็นส่วนหนึ่งของขั้นตอนการทำงาน แทนที่จะปล่อยให้เป็นเรื่องท้ายสุด - เครื่องมือเลือกสีและดูดสีหมายความว่าคุณสามารถสุ่มตัวอย่างและนำสีที่ต้องการจากที่ใดก็ได้บนหน้าเว็บมาใช้ซ้ำได้ - ธีมสว่างและมืดจะปรับตามระบบปฏิบัติการของคุณโดยอัตโนมัติ ทำให้รู้สึกเป็นส่วนหนึ่งไม่ว่าจะกลางวันหรือกลางคืน - การสลับหน่วยวัดระหว่าง px, rem, pt และ em ทำให้ผลลัพธ์ที่ได้สอดคล้องกับรูปแบบการเขียนโค้ดของคุณ 🎨 มองลึกลงไปในรายละเอียด การออกแบบตัวพิมพ์เป็นมากกว่าแค่ชื่อ FontLens เผยให้เห็นการตัดสินใจเล็กๆ น้อยๆ ที่ทำให้ข้อความรู้สึกใช่ ตั้งแต่น้ำหนักของหัวข้อ ไปจนถึงพื้นที่ว่างในความสูงบรรทัด และระยะห่างระหว่างตัวอักษรที่ละเอียดอ่อน การเห็นค่าเหล่านี้เคียงข้างกันช่วยให้คุณเข้าใจว่าทำไมการออกแบบถึงได้ผล และจะสร้างมันขึ้นมาใหม่ได้อย่างไร ป้ายระบุผู้ให้บริการยังเพิ่มบริบทเข้ามาด้วย โดยบอกคุณได้ทันทีว่าคุณกำลังดูทรัพยากรจาก Google Fonts, ฟอนต์จาก Adobe Fonts, ไฟล์ที่โฮสต์เอง หรือฟอนต์เริ่มต้นของระบบ ซึ่งมักเป็นเบาะแสแรกเมื่อคุณต้องการหาหรือจับคู่รูปแบบตัวอักษร เครื่องมือเกี่ยวกับสีนั้นทำได้มากกว่าการแสดงผลแบบคงที่ เครื่องมือเลือกสีมีจัตุรัส HSV พร้อมแถบเลื่อนเฉดสีและความโปร่งใส และยังรองรับรูปแบบ HEX, RGB และ HSL เพื่อให้คุณทำงานในรูปแบบที่ถนัด เมื่อใช้ร่วมกับเครื่องมือดูดสี คุณสามารถดึงเฉดสีที่แม่นยำขององค์ประกอบใดๆ แล้วนำไปใช้ในหน้าพรีวิวหรือบันทึกย่อของคุณได้ทันที 🚀 เริ่มตรวจสอบเลย เพิ่ม FontLens, ไฮไลต์ข้อความ แล้วคลิกขวาเพื่อเผยการออกแบบตัวพิมพ์ สไตล์ และสีที่อยู่เบื้องหลังทุกหน้าเว็บ นี่คือเพื่อนคู่ใจที่รวดเร็ว เป็นส่วนตัว และมีประโยชน์อย่างแท้จริงสำหรับทุกคนที่ใส่ใจว่าเว็บควรอ่านอย่างไร ติดตั้งไว้ให้พร้อมใช้งาน และไม่ต้องสงสัยเกี่ยวกับฟอนต์ปริศนาอีกต่อไป