สวัสดีครับ
เนื่องจากผมทำฟอนต์ลิงอยู่ แล้วหงุดหงิดใจที่มันหาวิธีทดสอบ kerning ลำบากมากเลย
ก็เลยนึกได้ว่า เออ เราก็หลอก AI ให้เขียนเว็บขึ้นมาก็ได้นี่หว่า
ขอบคุณการมีอยู่ของ Gemini จริงๆ นี่ใช้เวลาทำชั่วโมงเดียวก็เสร็จ (ทีแรกว่าจะนอน
)
อาศัยว่าเฆี่ยนตีมันหน่อย ปรับไปปรับมา ถูกใจละ
เลยเอามาบอกต่อครับ
ลองเล่นเลยยย
anndo.com/kส่วนฟีเจอร์ของเว็บ เนื่องจากง่วงแล้ว ให้ เไ สรุปให้ละกันครับ
Instant Font Loader (Serverless)
- ระบบ Drag & Drop: สามารถลากไฟล์ฟอนต์นามสกุล .ttf, .otf, .woff จากเครื่องมาวางเพื่อเปลี่ยนฟอนต์ได้ทันที
- System Font Support: สามารถพิมพ์ชื่อฟอนต์ที่มีอยู่ในเครื่อง (เช่น Arial, Sukhumvit Set) เพื่อเรียกมาทดสอบได้โดยไม่ต้องอัปโหลด
Smart Matrix Generator
- ระบบสร้างชุดข้อความอัตโนมัติ (Matrix Pattern) สำหรับตรวจ Kerning หน้า-หลัง
- รองรับหลายภาษาและหมวดหมู่: ภาษาไทย (รวมสระ, วรรณยุกต์, เลขไทย), ภาษาอังกฤษ, ตัวเลขอารบิก และสัญลักษณ์พิเศษ
- Smart Toggle: สามารถเลือกเปิด-ปิดเฉพาะชุดตัวอักษรที่ต้องการทดสอบได้แบบ Real-time โดยไม่ลบข้อความส่วนอื่นทิ้ง
Interactive Physics Engine
- Momentum Scrolling: ระบบ Drag Mode ที่จำลองแรงเฉื่อย (Inertia) และความหนืด ทำให้การลากหน้าจอมีความลื่นไหลเหมือนใช้งานบนมือถือ
- Precision Zooming: รองรับการซูม 2 รูปแบบ คือการหมุนเมาส์ (Scroll wheel) และฟีเจอร์ Press-to-Zoom (คลิกค้างเพื่อซูม 30%) โดยใช้ตำแหน่งเมาส์เป็นจุดศูนย์กลางในการซูม
UI/UX Design
- Spectrum Color Bar: แถบเลือกสีธีมแบบไล่เฉดสีบรรทัดเดียว (Single-line) แสดงผลเต็มความกว้าง
- Floating Options Panel: หน้าต่างเครื่องมือแบบลอยตัว สามารถลากย้ายตำแหน่งได้และพับเก็บ (Collapse) ได้
- Smart Sliders: แถบปรับค่า Font Size, Line Height และ Letter Spacing พร้อมระบบ Hover to Reset (เมื่อนำเมาส์ไปชี้ที่หัวข้อ ตัวเลขจะเปลี่ยนเป็นปุ่มรีเซ็ตค่าเริ่มต้น)
Performance & Polish
- Dark Mode Default: เริ่มต้นใช้งานด้วยธีมสีเข้มเพื่อถนอมสายตาและเน้นการมองเห็นช่องไฟ
- No Reflow Zooming: ใช้เทคนิค CSS Transform ในการซูม ทำให้ตำแหน่งตัวอักษรและบรรทัดไม่ขยับ (Reflow) ช่วยให้ตรวจสอบจุดผิดพลาดได้แม่นยำ
- 100% Client-side: ประมวลผลบน Browser ทั้งหมด ไม่มีการส่งข้อมูลไปที่ Server
ทำไมมันดูโม้จัง เอาเถอะ
