วิธีดูแบบอักษรที่เว็บไซต์ใช้

หากคุณเคยใช้ฟอนต์ที่คุณเคยเห็นบนเว็บไซต์มาก่อน คุณอาจสงสัยว่าจะรู้จักชื่อนี้ได้อย่างไร เพื่อให้คุณนำไปใช้ในเนื้อหาของคุณเองได้ การออกแบบตัวอักษรที่มีคุณภาพสามารถปรับปรุงประสบการณ์การอ่านของผู้เยี่ยมชมของคุณได้ ดังนั้นการพยายามค้นหาจึงอาจคุ้มค่า โดยไม่คำนึงถึงเหตุผลในการตรวจสอบว่าแบบอักษรใดที่ใช้บนเว็บไซต์มีเครื่องมือมากมายที่สามารถช่วยได้

ในบทความนี้ เราจะพูดถึงสาเหตุที่คุณอาจต้องการดูว่าเว็บไซต์ใช้แบบอักษรใด เราจะแสดงวิธีการดำเนินการดังกล่าวให้คุณทราบด้วย

มาเริ่มกันเลย!

สมัครสมาชิกช่อง Youtube ของเรา

ทำไมคุณอาจต้องการตรวจสอบแบบอักษรที่เว็บไซต์ใช้

ดังที่เราได้กล่าวไปแล้ว แบบอักษรที่สวยงามและอ่านง่ายสามารถปรับปรุงประสบการณ์ผู้ใช้ (UX) และความสามารถในการอ่านของไซต์ของคุณได้ นอกจากนี้ยังช่วยให้มั่นใจว่าผู้เยี่ยมชมสามารถมีส่วนร่วมกับเนื้อหาของคุณได้อย่างสะดวกสบายโดยไม่ต้องพยายามถอดรหัส หากข้อความของคุณดูมีสไตล์แต่อ่านไม่ออก ผู้อ่านจะพบว่าเนื้อหาของคุณเข้าใจหรือชื่นชมได้ยาก

ปุ่มเรียกร้องให้ดำเนินการ (CTA) อาจกลายเป็นปุ่มทั้งหมด แต่ไม่มีประโยชน์หากข้อความไม่สามารถอ่านได้ นี่คือเหตุผลที่คุณอาจพบว่าการเก็บรายการแบบอักษรที่ดึงดูดความสนใจของคุณทั้งมีสไตล์และอ่านง่ายอาจสะดวก จากนั้นคุณสามารถใช้มันบนไซต์ของคุณหรือสำหรับลูกค้าได้ในอนาคต

วิธีดูว่าเว็บไซต์ใช้แบบอักษรใด (มี 3 วิธีให้เลือก)

มีหลายวิธีที่คุณสามารถใช้เพื่อตรวจสอบว่าเว็บไซต์ใช้แบบอักษรใด คุณลักษณะการตรวจสอบเบราว์เซอร์ของคุณเป็นโซลูชันที่ใช้งานได้ดีเยี่ยม แต่มีส่วนขยายที่สามารถสร้างเอฟเฟกต์ที่เท่าเทียมกันได้ คุณยังสามารถค้นหาแบบอักษรจากรูปภาพโดยใช้เครื่องมือออนไลน์ ลองมาดูที่แต่ละตัวเลือกเหล่านี้กัน

1. ระบุแบบอักษรโดยใช้เครื่องมือตรวจสอบเบราว์เซอร์

วิธีที่ง่ายที่สุดวิธีหนึ่งในการตรวจสอบแบบอักษรที่เว็บไซต์ใช้คือใช้เครื่องมือตรวจสอบของเบราว์เซอร์ แม้ว่าเราจะทำงานร่วมกับ Chrome Inspector ในตัวอย่างนี้ แต่ก็ควรสังเกตว่าเบราว์เซอร์อื่นๆ มีคุณลักษณะที่เทียบเท่ากัน

ขั้นแรก ให้คลิกขวาบนหน้าเว็บที่มีแบบอักษรที่คุณต้องการค้นหา จากเมนูผลลัพธ์ ให้เลือก ตรวจสอบ:

หากคุณต้องการใช้แป้นพิมพ์ลัด ให้ลองใช้ Ctrl+Shift+I สำหรับ Windows หรือ Linux หากคุณใช้ Mac จะเทียบเท่ากับ Cmd+Shift+I

ในหน้าต่างทางด้านขวาของหน้าจอ ให้มองหาข้อความโดยใช้แบบอักษรที่คุณต้องการเช็คเอาท์ มันจะถูกเน้นเมื่อคุณเลือกองค์ประกอบ HTML ที่เกี่ยวข้อง:

จากนั้น คลิกที่แท็บ Computed และค้นหา "font-family":

คุณควรเห็นชื่อแบบอักษรและรูปแบบที่แสดงไว้ที่นี่

หากต้องการดู CSS ที่เกี่ยวข้องกับฟอนต์ ให้ดูที่แท็บ สไตล์ คุณสามารถเลื่อนดูเพื่อค้นหาค่าที่เกี่ยวข้องกับแบบอักษร อย่างไรก็ตาม เนื่องจากอาจมีการแทนที่และกฎของรูปแบบที่ไม่เกี่ยวข้องที่นี่ แท็บที่ คำนวณ แล้วมักจะมีประโยชน์มากกว่า

2. ค้นหาแบบอักษรผ่านส่วนขยายเบราว์เซอร์

ส่วนขยายของเบราว์เซอร์ช่วยให้ค้นหารายละเอียดแบบอักษรบนเว็บไซต์ได้ตรงไปตรงมายิ่งขึ้น โดยเฉพาะอย่างยิ่งหากคุณไม่สะดวกใจกับตัวตรวจสอบ นอกจากนี้ยังสามารถให้คำตอบที่คุณต้องการได้เร็วกว่า เพื่อให้คุณกลับไปทำงานต่อได้

ส่วนเสริมดังกล่าว ได้แก่ :

• Fontanello: ใช้งานได้ฟรี ส่วนขยายนี้ช่วยให้คุณค้นหาชื่อฟอนต์ น้ำหนัก รูปแบบ และอื่นๆ ได้ง่ายๆ โดยการไฮไลต์และคลิกขวาบนฟอนต์ในขณะที่คุณกำลังเรียกดู
• WhatFont: ปรับปรุงการตรวจจับแบบอักษรให้ดียิ่งขึ้น WhatFont ช่วยให้คุณสามารถดูชื่อแบบอักษรได้เพียงแค่วางเมาส์เหนือมัน
• CSS Peeper: สร้างขึ้นโดยคำนึงถึงนักออกแบบเว็บไซต์ ส่วนขยายนี้มีประสิทธิภาพมากกว่าเล็กน้อย และสามารถบอกรายละเอียดเพิ่มเติมแก่คุณจากโค้ด CSS ของหน้าเว็บ

อย่างไรก็ตาม แต่ละส่วนขยายเหล่านี้รองรับเบราว์เซอร์ที่หลากหลาย WhatFont สามารถใช้ได้กับ Firefox, Chrome, Safari และ Internet Explorer Fontanello นั้นใช้ได้เฉพาะกับ Firefox และ Chrome เท่านั้น CSS Peeper เป็นเครื่องมือเฉพาะของ Chrome ที่คุณจะใช้กับแพลตฟอร์มอื่นไม่ได้

เพื่อจุดประสงค์ในการค้นหาชื่อแบบอักษรที่ต้องการอย่างรวดเร็ว WhatFont เป็นตัวเลือกที่ง่ายที่สุดในการใช้งาน เนื่องจากมีการรองรับเบราว์เซอร์ส่วนใหญ่ เราจะใช้สำหรับการสาธิตอย่างรวดเร็ว

เมื่อคุณติดตั้ง WhatFont แล้ว คุณสามารถตรวจสอบแบบอักษรที่เว็บไซต์ใช้ได้โดยการเปิดใช้งานในแถบเครื่องมือของเบราว์เซอร์และเลื่อนเมาส์ไปที่ข้อความบางส่วน:

เมื่อคุณวางเมาส์เหนือข้อความเป็นครั้งแรก คุณจะเห็นเฉพาะชื่อแบบอักษรเท่านั้น อย่างไรก็ตาม การคลิกที่ชื่อจะแสดงป๊อปอัปแบบขยายพร้อมรายละเอียดเพิ่มเติม เช่น ขนาด น้ำหนัก สี และความสูงของเส้น นอกจากนี้ยังสามารถระบุได้ว่าแบบอักษรมีให้ใช้งานผ่าน Typekit หรือ Google Fonts หรือไม่

เมื่อคุณตรวจสอบรายละเอียดแบบอักษรเสร็จแล้ว คุณสามารถออกจากเครื่องมือโดยใช้ปุ่ม ออกจาก WhatFont ที่มุมบนขวาของหน้าต่างเบราว์เซอร์ของคุณ

3. ตรวจจับแบบอักษรในรูปภาพ

สุดท้าย คุณสามารถลองดูแบบอักษรที่ใช้ในรูปภาพได้ ซึ่งรวมถึงแบบอักษรที่คุณเคยเห็นในโลโก้หรืออินโฟกราฟิก จากประสบการณ์ของเรากับตัวตรวจจับแบบอักษร WhatTheFont เป็นเครื่องมือออนไลน์ที่มีประสิทธิภาพสูงสุดสำหรับงานนี้

ในการใช้ WhatTheFont คุณจะต้องอัปโหลดรูปภาพที่เป็นปัญหาและเลือกส่วนที่มีแบบอักษรที่เกี่ยวข้อง:

จากนั้นจะส่งคืนหน้าผลลัพธ์ที่มีแบบอักษรหลายแบบที่คล้ายคลึงกัน หากไม่ตรงทั้งหมด ไปยังหน้าที่คุณพยายามระบุ:

อัตราความสำเร็จของคุณที่นี่อาจแตกต่างกันไปขึ้นอยู่กับแหล่งที่มาและความนิยมของแบบอักษร หากชื่อแบบอักษรที่แน่นอนมีความสำคัญต่อคุณมาก อาจเป็นเรื่องยากที่จะหาเครื่องมือที่จะให้สิ่งที่คุณต้องการ

อย่างไรก็ตาม หากคุณเปิดใจใช้แบบอักษรที่คล้ายกับที่พบในรูปภาพ ตัวตรวจจับออนไลน์จะเหมาะกับความต้องการของคุณ

บทสรุป

แบบอักษรที่ดึงดูดสายตาและอ่านง่ายสามารถปรับปรุงประสบการณ์การอ่านสำหรับผู้เยี่ยมชมเว็บไซต์ของคุณ สิ่งนี้อาจเตือนให้คุณคอยมองหาแบบอักษรใหม่ที่คุณสามารถใช้บนเว็บไซต์หรือสำหรับลูกค้าของคุณ ไม่ว่าเหตุผลของคุณที่ต้องการตรวจสอบว่าเว็บไซต์ใช้แบบอักษรใด มีเครื่องมือมากมายที่สามารถช่วยคุณได้

ในโพสต์นี้ เราได้พูดถึงสามวิธีในการดูว่าเว็บไซต์ใช้แบบอักษรใด:

1. ระบุแบบอักษรโดยใช้เครื่องมือตรวจสอบเบราว์เซอร์ของคุณ
2. ค้นหาแบบอักษรโดยใช้ส่วนขยายของเบราว์เซอร์ เช่น WhatFont
3. ตรวจจับแบบอักษรในภาพโดยใช้ WhatTheFont

คุณมีคำถามใด ๆ เกี่ยวกับวิธีการตรวจสอบแบบอักษรที่ใช้บนเว็บไซต์หรือไม่? แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง!

รูปภาพโดย rudall30 / shutterstock.com