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

ผู้ที่คุ้นเคยกับฟอนต์และหลงใหลในฟอนต์เหล่านี้มักจะใช้เครื่องมือระบุฟอนต์ออนไลน์ฟรี^{(free online font identifier tools)}เพื่อช่วยค้นหาฟอนต์บนเว็บ เครื่องมือออนไลน์เหล่านี้กำหนดให้คุณต้องป้อนURLหรืออัปโหลดรูปภาพด้วยแบบอักษรที่แสดง ซึ่งจะได้รับการตรวจสอบแล้ว ในกรณีที่คุณไม่ต้องการพบกับความยุ่งยากในการเรียนรู้การใช้เครื่องมือใหม่ โพสต์นี้เหมาะสำหรับคุณ วันนี้ เราจะพูดถึงวิธีที่ผู้ใช้สามารถระบุแบบอักษรที่หน้าเว็บบางหน้าใช้โดยไม่ต้องใช้ส่วนขยายเบราว์เซอร์ แอปพลิเคชัน หรือเครื่องมือออนไลน์ใดๆ

ขั้นตอนที่เราจะพูดถึงในบทความนี้จะเกี่ยวกับการตั้งค่าที่เว็บเบราว์เซอร์ส่วนใหญ่เสนอให้ นั่นคือ ' เครื่องมือสำหรับนักพัฒนา^{(Developer Tools)} ' หรือแบบเฉพาะเจาะจงคือตัวเลือกที่เรียกว่าInspect Element ^{(Inspect Element)}ในที่นี้ เราจะพูดถึงวิธีการระบุแบบอักษรในสองเบราว์เซอร์– Chrome , EdgeและFirefox

ระบุ^(Identify)แบบอักษรบนหน้าเว็บโดยใช้ตรวจสอบองค์ประกอบ^{(Inspect Element)}ในFirefox

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

จากรายการตัวเลือกที่แสดงขึ้น (เมนูบริบท) ให้คลิกที่Inspect Element ^{(Inspect Element)}การ ทำเช่น^(Doing)นั้นจะเปิดเครื่องมือสำหรับนักพัฒนา^{(Developer Tools)}ที่ด้านล่างของหน้า

ที่มุมล่างขวาของ ส่วน เครื่องมือสำหรับการพัฒนา^{(Development Tools)}คุณจะพบหัวข้อย่อยที่ชื่อFontsให้คลิกที่หัวข้อนั้น

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

หากคุณสนใจที่จะทราบข้อมูลเพิ่มเติมเกี่ยวกับฟอนต์ที่ใช้อยู่Firefoxได้ช่วยคุณในเรื่องนั้นด้วย หากคุณเลื่อนลงไปที่ส่วนแบบอักษรและคลิกที่ 'แบบอักษรทั้งหมดบนหน้า' แท็บแบบอักษรจะขยายออกและคุณจะเห็นแบบอักษรทั้งหมดที่ใช้บนหน้าเว็บที่คุณกำลังเรียกดูในขณะนี้และที่ที่พวกเขา กำลังถูกใช้ ไม่เพียงแค่นั้น แต่คุณยังดูตัวอย่างลักษณะของฟอนต์นั้นๆ ได้อีกด้วย การวางเมาส์เหนือแบบอักษรในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์^{(Developer Tools)}จะเน้นส่วนต่างๆ ของหน้าเว็บที่ใช้แบบอักษรนั้น

ระบุแบบอักษรโดยใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์^{(Developer Tools)}ในChrome

กระบวนการนี้คล้ายกับขั้นตอนที่อธิบายไว้ข้างต้น ทำตามสองขั้นตอนแรกเหมือนกับที่คุณทำกับFirefoxเพื่อเปิดเครื่องมือสำหรับนักพัฒนา^{(Developer Tools)}ที่ด้านขวาของหน้า

คลิกที่หัวข้อย่อย 'คำนวณแล้ว'

เลื่อน^(Scroll)ลงมาเล็กน้อยแล้วคุณจะพบข้อมูลเกี่ยวกับฟอนต์ที่คุณสนใจ (ตระกูลฟอนต์ ขนาด ฯลฯ)

ขออภัยChromeไม่ได้ให้ข้อมูลเพิ่มเติมแก่คุณเหมือนกับFirefox

ระบุ^(Identify)แบบอักษร^(Font)ที่ใช้โดยใช้เครื่องมือสำหรับนักพัฒนา Edge^{(Edge Developer Tools)}

1. เปิดขอบ
2. คลิกขวาและเลือกข้อความ
3. เลือก ตรวจสอบ
4. ในเครื่องมือสำหรับนักพัฒนา^{(Developer Tools)}ที่เปิดขึ้น ให้ดูภายใต้Computed
5. คุณจะเห็นรายละเอียดแบบอักษร

ถ้าคุณคิดว่าคุณไม่สามารถหลีกเลี่ยงปัญหาด้วยเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์^{(Developer Tools)} ของเบราว์เซอร์ได้ และเครื่องมือออนไลน์นั้นก็เหมาะกับคุณมากกว่า มีเครื่องมือหลายอย่างที่ทำงานได้ดี

อ่านต่อไป^{(Read next)} : วิธีค้นหาทางเลือกฟรีที่คล้ายคลึงกันกับแบบอักษรแบบชำระ^{(find similar free alternatives to paid Fonts)}เงิน

Identify fonts in Chrome, Edge and Firefox using Developer Tools

A typical web pagе generally consists of several diffеrent elements with most of them coded in different сolors and written in dіfferent fonts and styles. Ѕometimes, we come across web pages so beautifully designed that they make us want to dеlve deep into their attributes; a very elegant theme or a nice, professionаl font, perhaps.

People who know their way around fonts and are fascinated by them often use free online font identifier tools to help discover fonts on the web. These online tools require you to enter a URL or upload an image with the font showcased, which is then inspected. In case you don’t want to go through the hassle of learning to use a new tool, this post is for you. Today, we will discuss how users can identify what font a particular web page is using without using a browser extension, an application, or any online tools.

The procedure that we will be discussing in this article will revolve around a setting that most web browsers offer, namely ‘Developer Tools,’ or to be specific, an option called Inspect Element. Here, we will discuss how fonts can be identified in two browsers – Chrome, Edge and Firefox.

Identify fonts on a webpage using Inspect Element in Firefox

Visit the web page of the font of which you want to identify and right-click on the text that is written in the font you are interested in.

From the list of options that show up (the context menu), click on Inspect Element. Doing so would open the Developer Tools on the bottom of the page.

On the bottom right corner of the Development Tools section, you will find a subhead named Fonts, click on it.

It will then display for you the properties of the font you wanted to look into like its size, line height, weight, etc., and also whether or not the font is in italics or not, though that is always apparent.

If you are interested to know more about the font in use, Firefox has you covered with that too. If you scroll down the fonts section and click on ‘All fonts on the page,’ the fonts tab will expand and you will be shown all the fonts that are being used on the web page you are browsing at the moment, and also where they are being used. Not just that, but you also get a preview of how a particular font looks. Hovering your mouse over the fonts in the Developer Tools will highlight the sections of the web page that use that font.

Identify a font using Developer Tools in Chrome

The process is similar to the one described above. Follow the first two steps as you did with Firefox to open the Developer Tools on the right side of the page.

Click on the ‘Computed’ sub-head.

Scroll down a bit and you will find information about the font you’re interested in (font’s family, size, etc.)

Unfortunately, Chrome doesn’t provide you with any additional information like Firefox does.

Identify which Font is used using Edge Developer Tools

1. Open Edge
2. Right-click and select the text
3. Select Inspect
4. In the Developer Tools that open, look under Computed
5. You will see the Font details.

If you don’t think you can’t work around with browser Developer Tools and that online tools would suit you better, there are several of them that work very well.

Read next: How to find similar free alternatives to paid Fonts.

Related posts

• วิธีการดาวน์โหลด Font จาก A Website โดยใช้ Developer Tools

• ล้าง Site Data สำหรับไซต์เฉพาะใน Chrome or Edge โดยใช้ Developer Tools

• วิธีการเปลี่ยน Default Font ใน Chrome, Edge, Firefox browser

• Developer Tools ปิดการใช้งานใน Edge ใช้ Registry or Group Policy

• Fix Blurry File Open dialog กล่องใน Google Chrome and Microsoft Edge

• วิธีใช้ Avast extension บน Chrome, Firefox, และ Edge เบราว์เซอร์

• วิธีใช้ Chrome, Edge, Firefox, Opera Browsers As A Notepad

• ล้าง Cookies, Site Data, Cache สำหรับเว็บไซต์เฉพาะ: Chrome Edge Firefox

• Security, Privacy, Cleaning เครื่องมือสำหรับ Edge, Firefox, Chrome, Opera

• ปิดการใช้งานเปิดใช้งาน Cookies ใน Chrome, Edge, Firefox, Opera, IE เบราว์เซอร์

• Add Opera-like Speed Dial ถึง Chrome, Edge or Firefox

• 400 Bad Request, Cookie Too Large - Chrome, Edge, Firefox, IE

• เปิดใช้งาน Adobe Flash Player ใน Chrome, Edge, Firefox, IE, Opera

• วิธีการเปลี่ยนโฮมเพจใน Chrome, Firefox, Opera, Edge เบราว์เซอร์

• วิธีแปล Web page ใน Chrome, Firefox and Edge

• วิธีทำ Flash work ใน Chrome, Edge, Firefox NOW

• นำ Saved Passwords ทั้งหมดในครั้งเดียวใน Chrome, Firefox, Edge

• ปิดการใช้งานถอนการติดตั้ง Adobe Flash, Shockwave ใน Chrome, Firefox, Edge, IE

• วิธีการซ่อนไอคอน Browser Extension ใน Chrome, Edge or Firefox

• Restart Chrome, Edge or Firefox โดยไม่ต้องสูญเสียแท็บใน Windows 11/10