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

ในบทความนี้ เราจะพูดถึงวิธีดาวน์โหลดแบบอักษรจากเว็บไซต์ในเบราว์เซอร์ Chrome หรือ Edge โดยใช้เครื่องมือสำหรับนักพัฒนา(download fonts from websites in Chrome or Edge browser using Developer Tools)ซอฟต์แวร์ ทั้งChromeและEdgeมาพร้อมกับนักพัฒนาเว็บและเครื่องมือสร้างเว็บในตัวที่ใช้ตรวจสอบเว็บไซต์โดยตรงในเบราว์เซอร์ คุณสามารถทำสิ่งต่างๆ ได้มากมายด้วยเครื่องมือสำหรับนักพัฒนา (Developer Tools)ตัวอย่างเช่น ช่วยให้คุณสามารถระบุแบบอักษรบนเว็บไซต์(identify fonts on a website)ค้นหาภายในไฟล์ต้นทาง ใช้ตัวตกแต่งในตัว จำลองเซ็นเซอร์และตำแหน่งทางภูมิศาสตร์ และอื่นๆ

ตอนนี้ คุณยังสามารถดาวน์โหลดแบบอักษร(download fonts)จากเว็บไซต์โดยใช้เครื่องมือสำหรับนักพัฒนา(Developer Tools)ซอฟต์แวร์ ในการดาวน์โหลดแบบอักษรจากเว็บไซต์ คุณจะต้องผ่านตัวเลือกบางอย่างและลองใช้เคล็ดลับ ลองตรวจสอบขั้นตอนในรายละเอียด

วิธีดาวน์โหลดแบบอักษรจากเว็บไซต์ใน Chrome หรือ Edge โดยใช้เครื่องมือสำหรับนักพัฒนา

ดาวน์โหลด(Download)แบบอักษร(Font)จากเว็บไซต์(Website)โดยใช้เครื่องมือสำหรับนักพัฒนา Chrome(Chrome Developer Tools)

ในโพสต์นี้ เราจะแสดงขั้นตอนในการดาวน์โหลดแบบอักษรจากเว็บไซต์ในGoogle Chrome (Google Chrome)คุณสามารถใช้ขั้นตอนเดียวกันนี้เพื่อดาวน์โหลดแบบอักษรของเว็บไซต์ในเบราว์เซอร์Microsoft Edge นี่คือขั้นตอนในการทำเช่นนั้น:

  1. เปิด Google Chrome
  2. ไปที่เว็บไซต์ที่คุณต้องการดาวน์โหลดแบบอักษร
  3. เปิดเครื่องมือสำหรับนักพัฒนา
  4. ไปที่แท็บเครือข่าย
  5. คลิก(Click)ที่ ตัวเลือก แบบอักษร(Font)และเลือกแบบอักษรที่จะดาวน์โหลด
  6. ดาวน์โหลดไฟล์ฟอนต์
  7. เปลี่ยนชื่อไฟล์ที่ดาวน์โหลดด้วยนามสกุลไฟล์ฟอนต์

ให้เราตรวจสอบขั้นตอนเหล่านี้โดยละเอียด!

ขั้น แรก เปิดGoogle Chromeและไปที่เว็บไซต์ที่คุณต้องการดาวน์โหลดแบบอักษร ถัด(Next)ไป ไปที่เมนูสามแถบแล้วคลิกตัวเลือก More Tools > Developerอีกวิธีหนึ่ง คุณยังสามารถกดCtrl + Shift + Iเพื่อเปิดแผงเครื่องมือสำหรับนักพัฒนา ได้อย่างรวดเร็ว(Developer Tools)

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

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

ตอนนี้จะระบุรูปแบบฟอนต์ได้อย่างไร? เพียง(Well)แค่วางเมาส์เหนือแบบอักษรและดูนามสกุลไฟล์ในตอนท้าย อ้างถึงภาพหน้าจอด้านล่าง

หลังจากนั้น เพียงคลิกขวาที่ฟอนต์ จากนั้นจากเมนูบริบท ให้คลิกที่ตัวเลือกCopy > Copy Response

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

ตอนนี้ ไปที่ โฟลเดอร์ ดาวน์โหลด(Downloads) ของคุณ ที่ดาวน์โหลดไฟล์ฟอนต์ด้านบน ตอนนี้คุณต้องเปลี่ยนชื่อไฟล์นี้ด้วยนามสกุลไฟล์ฟอนต์ ก่อนอื่นให้ไปที่แท็บมุมมอง ใน ( View)File Explorerจากนั้นตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือกนามสกุลไฟล์ (File name extensions)ตอนนี้ เลือกไฟล์ฟอนต์ที่ดาวน์โหลดมา และคลิกที่ตัวเลือกเปลี่ยนชื่อ (Rename)เพิ่มนามสกุลไฟล์ฟอนต์ที่ระบุ (เช่น . woff2 ) แล้วกดปุ่ม Enter

Voilaนี่คือวิธีดาวน์โหลดไฟล์ฟอนต์จากเว็บไซต์

เนื่องจาก ขณะนี้ Microsoft Edgeใช้Chromiumเช่นChromeคุณสามารถดาวน์โหลดไฟล์แบบอักษรใน เบราว์เซอร์ Edgeโดยทำตามขั้นตอนเดียวกับด้านบน

หวังว่าบทความนี้จะช่วยให้คุณเรียนรู้วิธีดาวน์โหลดแบบอักษรจากเว็บไซต์ใน เบราว์เซอร์ ChromeหรือEdgeโดยใช้เครื่องมือสำหรับนักพัฒนา(Developer Tools)ซอฟต์แวร์

เคล็ดลับ(TIP) : มีคำแนะนำและเคล็ดลับสำหรับเครื่องมือพัฒนา Chrome(Chrome Development Tools Tips and Tricks) อีกมากมาย ที่คุณสามารถเรียนรู้ได้

ตอนนี้อ่านแล้ว: (Now read:) ใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพื่อล้างข้อมูลไซต์สำหรับเว็บไซต์เฉพาะใน Chrome หรือ(Use Developer Tools to clear Site Data for a particular website in Chrome or Edge) Edge



About the author

ฉันเป็นนักพัฒนาเว็บที่มีประสบการณ์มากกว่า 10 ปี ฉันเชี่ยวชาญด้านการพัฒนา Chrome OS และเคยทำงานในโครงการต่างๆ มากมายตั้งแต่สตาร์ทอัพขนาดเล็กไปจนถึงบริษัทที่ติดอันดับ Fortune 500 ฉันยังเป็นผู้เชี่ยวชาญในบัญชีผู้ใช้และความปลอดภัยของครอบครัว และได้พัฒนาแอพ Android ที่ประสบความสำเร็จหลายตัว



Related posts