Computer >> คอมพิวเตอร์ >  >> ซอฟต์แวร์ >> เบราว์เซอร์

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

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

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

วิธีค้นหาแบบอักษรโดยใช้เครื่องมือตรวจสอบองค์ประกอบ

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

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

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

  1. เปิดเว็บไซต์ที่คุณต้องการใช้
  2. เน้นข้อความที่มีแบบอักษรที่คุณต้องการระบุ แล้วคลิกขวา
  3. คลิกที่ ตรวจสอบ จากเมนูบริบท วิธีค้นหาแบบอักษรของหน้าเว็บโดยใช้เครื่องมือตรวจสอบองค์ประกอบและส่วนขยายเบราว์เซอร์
  4. เมื่อเมนูตรวจสอบเปิดขึ้น ให้คลิกที่ คำนวณแล้ว .
  5. เลื่อนลงเพื่อค้นหา Font-Family ส่วน. คุณสามารถค้นหาชื่อแบบอักษรและรูปแบบ รวมทั้งขนาดได้ที่นี่ วิธีค้นหาแบบอักษรของหน้าเว็บโดยใช้เครื่องมือตรวจสอบองค์ประกอบและส่วนขยายเบราว์เซอร์

วิธีอื่นๆ ในการใช้เครื่องมือตรวจสอบ

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

  1. เปิดเว็บไซต์ที่คุณต้องการใช้
  2. กด Ctrl + Shift + C (คำสั่ง + Shift + C บน Mac)
  3. วางเมาส์เหนือข้อความเพื่อแสดงรูปแบบแบบอักษร ขนาด รหัสสี และระยะขอบ วิธีค้นหาแบบอักษรของหน้าเว็บโดยใช้เครื่องมือตรวจสอบองค์ประกอบและส่วนขยายเบราว์เซอร์

คุณยังสามารถตรวจสอบรายการแบบอักษรที่ใช้บนเว็บเพจได้โดยใช้เครื่องมือตรวจสอบ วิธีการมีดังนี้:

  1. ไปที่หน้าเว็บ
  2. เปิดซอร์สโค้ดโดยกด Ctrl + Shift + I (คำสั่ง + Shift + ฉัน บน Mac)
  3. คลิก เครือข่าย แท็บ จากนั้นเลือก แบบอักษร แท็บ
  4. ที่นี่ คุณจะเห็นรายการแบบอักษรทั้งหมดที่ใช้บนหน้าเว็บ วิธีค้นหาแบบอักษรของหน้าเว็บโดยใช้เครื่องมือตรวจสอบองค์ประกอบและส่วนขยายเบราว์เซอร์

หากต้องการดูรายการแบบอักษรทั้งหมดแบบเรียลไทม์ คุณอาจต้องรีเฟรชหน้าเว็บ

วิธีระบุแบบอักษรโดยใช้ส่วนขยายเบราว์เซอร์

หากคุณต้องการวิธีที่สะดวกกว่าในการระบุแบบอักษร คุณอาจต้องติดตั้งส่วนขยายเบราว์เซอร์ค้นหาแบบอักษร แม้ว่าจะมีส่วนขยายเบราว์เซอร์หลายตัวที่ช่วยตรวจจับแบบอักษรบนเว็บ แต่ส่วนขยายที่ได้รับความนิยมสูงสุด 2 รายการคือ WhatFont และ Font Finder .

มาดูกระบวนการระบุแบบอักษรโดยใช้ส่วนขยายทั้งสองกัน

1. WhatFont

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

  1. เมื่อเปิดใช้งาน WhatFont ในเบราว์เซอร์ของคุณ ให้วางเมาส์เหนือข้อความเพื่อแสดงแบบอักษร วิธีค้นหาแบบอักษรของหน้าเว็บโดยใช้เครื่องมือตรวจสอบองค์ประกอบและส่วนขยายเบราว์เซอร์
  2. เมื่อคุณคลิกที่ข้อความ หน้าต่างป๊อปอัปจะปรากฏขึ้นพร้อมกับรายละเอียดแบบอักษรที่เหลือ เช่น ขนาดแบบอักษร สี และรูปแบบ วิธีค้นหาแบบอักษรของหน้าเว็บโดยใช้เครื่องมือตรวจสอบองค์ประกอบและส่วนขยายเบราว์เซอร์
  3. นอกจากนี้ คุณสามารถเลือกข้อความหลายส่วนพร้อมกันเพื่อเปรียบเทียบแบบอักษรต่างๆ ในหน้าเดียวกันได้ วิธีค้นหาแบบอักษรของหน้าเว็บโดยใช้เครื่องมือตรวจสอบองค์ประกอบและส่วนขยายเบราว์เซอร์

2. ตัวค้นหาแบบอักษร

Font Finder ยังแสดงรายละเอียดแบบอักษรเมื่อคุณวางเมาส์เหนือข้อความบนเว็บไซต์ อย่างไรก็ตาม มีรายละเอียดทางเทคนิคมากมาย ดังนั้นอาจสร้างความสับสนเล็กน้อยหากคุณไม่คุ้นเคยกับการออกแบบเว็บ

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

ที่กล่าวว่า Font Finder เหมาะสำหรับนักพัฒนาเว็บที่ต้องการแทนที่ฟอนต์ที่มีอยู่ด้วยฟอนต์ใหม่ในแบบเรียลไทม์ ทำให้ง่ายต่อการทดสอบแบบอักษรก่อนทำการเปลี่ยนแปลงถาวร

วิธีทดสอบแบบอักษรโดยใช้ Font Finder มีดังนี้:

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

แล้วการตรวจสอบแบบอักษรในรูปภาพล่ะ

หากคุณต้องการระบุแบบอักษรในรูปภาพ ส่วนขยายของเบราว์เซอร์และเครื่องมือตรวจสอบของเบราว์เซอร์อาจไม่ช่วยอะไร อย่างไรก็ตาม คุณสามารถลองใช้เครื่องมือตรวจสอบรูปภาพออนไลน์ เช่น WhatFontIs, FontSquirrel, Fontspring, WhatTheFont และอื่นๆ อีกมากมาย

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

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

ตรวจหาแบบอักษรจากเว็บและนำไปใช้ในการออกแบบของคุณ

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