ความสำเร็จของเว็บไซต์ของคุณขึ้นอยู่กับลักษณะที่ปรากฏในอัตราส่วนมาก การมีการผสมผสานสีและธีมที่เหมาะสมจะทำให้ผู้เยี่ยมชมอยู่บนไซต์ของคุณนานขึ้น นอกจากสีและโครงสร้างของไซต์ แบบอักษรที่คุณเลือกก็เล่นบทบาทสำคัญในการทำให้ผู้ชมมีส่วนร่วม
บางทีคุณพบไซต์ที่น่าสนใจขณะเล่นเว็บ และคุณอยากรู้ว่าใช้แบบอักษรอะไร ด้วยส่วนขยายออนไลน์และเครื่องมือ Inspect Element ในตัวของเบราว์เซอร์ การระบุแบบอักษรเป็นเรื่องรวดเร็วและง่าย
วิธีหาแบบอักษรโดยใช้เครื่องมือ Inspect Element
ในกรณีที่คุณไม่รู้ เครื่องมือ Inspect Element ในตัวของเบราว์เซอร์อนุญาตให้คุณตรวจสอบซอร์สโค้ดของเว็บไซต์ คุณสามารถเข้าใจองค์ประกอบการออกแบบของไซต์โดยดู CSS, HTML และข้อมูลอื่นๆ มันเป็นวิธีที่ดีในการได้แรงบันดาลใจเมื่อออกแบบไซต์ของคุณเอง
กระบวนการระบุแบบอักษรโดยใช้เครื่องมือ Inspect Element ค่อนข้างง่าย และคุณไม่ต้องมีทักษะการเขียนโค้ด เครื่องมือนี้มีในเบราว์เซอร์ทุกตัวบนตลาด และแต่ละตัวมีเลย์เอาต์คล้ายกัน
นี่คือวิธีระบุแบบอักษรโดยใช้เครื่องมือ Inspect ของเบราว์เซอร์ของคุณ
- เปิดเว็บไซต์ที่คุณต้องการใช้
- ไฮไลท์ข้อความที่มีแบบอักษรที่คุณต้องการระบุ และคลิกขวา
- คลิก Inspect จากเมนูบริบท
- เมื่อเมนู Inspect เปิด ให้คลิกที่ Computed
- เลื่อนลงเพื่อหาส่วน Font-Family ที่นี่คุณสามารถหาชื่อแบบอักษรและสไตล์ รวมถึงมิติของมัน
วิธีอื่นๆ ในการใช้เครื่องมือ Inspect
หากคุณต้องการวิธีเร็วกว่าในการหาแบบอักษรของไซต์โดยใช้เครื่องมือ Inspect ลองวิธีนี้แทน:
- เปิดเว็บไซต์ที่คุณต้องการใช้
- กด Ctrl + Shift + C (Cmd + Shift + C บน Mac)
- ชี้เมาส์ไปที่ข้อความเพื่อแสดงสไตล์แบบอักษร ขนาด รหัสสี และ margin
คุณยังสามารถตรวจสอบรายการแบบอักษรที่ใช้บนหน้าเว็บโดยใช้เครื่องมือ Inspect นี่คือวิธีทำ:
- ไปที่หน้าเว็บ
- เปิดซอร์สโค้ดโดยกด Ctrl + Shift + I (Cmd + Shift + I บน Mac)
- คลิกแท็บ Network แล้วเลือกแท็บ Font
- ที่นี่ คุณจะเห็นรายการแบบอักษรทั้งหมดที่ใช้บนหน้าเว็บ
เพื่อรับรายการแบบอักษรทั้งหมดแบบเรียลไทม์ คุณอาจต้องรีเฟรชหน้าเว็บ
วิธีระบุแบบอักษรโดยใช้ส่วนขยายเบราว์เซอร์
หากคุณต้องการวิธีที่สะดวกกว่าในการระบุแบบอักษร คุณอาจต้องการติดตั้งส่วนขยายเบราว์เซอร์หาแบบอักษร แม้จะมีส่วนขยายเบราว์เซอร์หลายตัวที่ช่วยตรวจจับแบบอักษรบนเว็บ สองตัวที่ยอดนิยมที่สุดคือ WhatFont และ Font Finder
มาดูกระบวนการระบุแบบอักษรโดยใช้ทั้งสองส่วนขยาย
1. WhatFont
WhatFont ได้รับความนิยมอย่างกว้างขวางสำหรับการตรวจจับแบบอักษรหลายแบบพร้อมกัน นี่คือวิธีใช้เครื่องมือนี้
- เมื่อ WhatFont เปิดใช้งานในเบราว์เซอร์ของคุณ ชี้เมาส์ไปที่ข้อความเพื่อแสดงแบบอักษรของมัน
- เมื่อคุณคลิกที่ข้อความ หน้าต่างป๊อปอัพจะปรากฏพร้อมรายละเอียดแบบอักษรที่เหลือ เช่น ขนาดแบบอักษร สี และสไตล์
- เพิ่มเติม คุณสามารถเลือกหลายส่วนของข้อความพร้อมกันเพื่อเปรียบเทียบแบบอักษรที่แตกต่างกันบนหน้าเดียวกัน
2. Font Finder
Font Finder แสดงรายละเอียดแบบอักษรเมื่อคุณชี้เมาส์ไปที่ข้อความใดๆ บนเว็บไซต์ อย่างไรก็ตาม มันให้รายละเอียดทางเทคนิคมาก ดังนั้นอาจสับสนเล็กน้อยหากคุณไม่คุ้นเคยกับการออกแบบเว็บ
ด้วย ذلك Font Finder เหมาะสำหรับนักพัฒนาเว็บที่ต้องการแทนที่แบบอักษรที่มีอยู่ด้วยแบบใหม่ในเวลาเรียลไทม์ สิ่งนี้ทำให้ง่ายต่อการทดสอบแบบอักษรก่อนทำการเปลี่ยนแปลงถาวร
นี่คือวิธีทดสอบแบบอักษรโดยใช้ Font Finder:
- ไฮไลท์ส่วนของข้อความจากหน้าเว็บ
- คลิกขวาที่มันและเลือก Font Finder จากเมนูบริบท
- เลือก Replace font with และใส่ชื่อแบบอักษร มาลองเพิ่ม Calibri และดูว่ามันเปลี่ยนแบบอักษรในพรีวิวอย่างไร
- หากคุณต้องการรีเซ็ตแบบอักษร ให้รีเฟรชหน้า
แบบอักษรในภาพจะตรวจสอบอย่างไร?
หากคุณต้องการระบุแบบอักษรในภาพ ส่วนขยายเบราว์เซอร์และเครื่องมือ Inspect ของเบราว์เซอร์อาจช่วยไม่ได้ อย่างไรก็ตาม คุณสามารถลองเครื่องมือตรวจสอบภาพออนไลน์อย่าง WhatFontIs, FontSquirrel, Fontspring, WhatTheFont และอื่นๆ
กระบวนการระบุแบบอักษรจากภาพส่วนใหญ่เหมือนกันในทุกเครื่องมือ มาลองระบุแบบอักษรในภาพโดยใช้ WhatTheFont
- หากยังไม่ได้ ดาวน์โหลดภาพที่คุณต้องการใช้
- นำเข้าภาพเข้า WhatTheFont
- WhatTheFont จะตรวจจับข้อความในภาพของคุณโดยอัตโนมัติ ย่อหรือขยายกล่องครอปให้ล้อมรอบแบบอักษรที่คุณต้องการระบุ กด ปุ่มลูกศร (arrow button) เมื่อเสร็จ
- WhatTheFont จะจับคู่แบบอักษรในภาพกับแบบอักษรในแกลเลอรีของมัน และจะแสดงแบบอักษรที่เกี่ยวข้องใกล้เคียง
- หากคุณไม่พบการจับคู่ที่ดีทันที คุณสามารถกด Show more results ต่อไปเพื่อดูแบบอักษรที่เกี่ยวข้องมากขึ้น
ตรวจจับแบบอักษรจากเว็บและใช้ในดีไซน์ของคุณ
แบบอักษรเล่นบทบาทสำคัญในความสำเร็จของเว็บไซต์หรือดีไซน์กราฟิก หากคุณพบแบบอักษรที่น่าสนใจขณะเล่นเว็บ คุณสามารถตรวจจับมันได้ง่ายด้วยวิธีด้านบน
