ฉันจะรู้ได้อย่างไรว่าแบบอักษรที่เว็บไซต์ใช้คืออะไร

36

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

font-identification web-fonts canonical

— Yisela
แหล่งที่มา

1

ดูคำตอบของฉันที่ Stack Overflow สำหรับเครื่องมือในตัวใน Chrome และ Firefox และตัวเลือกคัดลอกวางสำหรับ Safari: stackoverflow.com/questions/884177/…

— Arjan

หากไม่มีตัวแทน 10 คนให้ตอบฉันเลยทำที่นี่: เหมือนตอนนี้ (2018.3), Fount ไม่พร้อมใช้งานและ WhatFont ไม่สามารถเข้าถึงได้ใน Firefox add-on store; ในที่สุดฉันต้องป้อน DevTool ของ Chrome / IE / FF / Opera ของแท็บ "Style" แก้ไขคุณสมบัติเพื่อลบแต่ละแบบอักษรและดูว่าแบบอักษรที่ใช้นั้นคืออะไร มันเป็นความสงสารใหญ่ที่ DevTools ทั้งหมดแสดงเฉพาะกองเต็มรูปแบบของตัวอักษรและไม่นำไปใช้จริงอย่างใดอย่างหนึ่ง แม้ใน FF "การจับคู่ที่ดีที่สุด" ไม่ใช่การจับคู่ที่ดีที่สุด ป๊อปอัป "ตรงกับที่ดีที่สุด" จะแสดงให้เห็นทุกแบบอักษรในสแต็ก ........ โง่ใช่มั้ย

— WesternGun

@WesternGun, สิ่งที่คุณหมายถึง"ทุก DevTools" ? Firefox และ Chrome แสดงแบบอักษรจริงได้ดี ดูภาพหน้าจอในคำตอบที่ฉันเชื่อมโยงในความคิดเห็นก่อนหน้าของฉัน

— Arjan

ตกลงฉันมองข้ามภาพหน้าจอ @Arjan ตอนนี้มันชัดเจน

— WesternGun

44

ตัวเลือก 1: ใช้ส่วนขยายเบราว์เซอร์ (ง่าย)

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

ตัวเลือก 2: ตรวจสอบ CSS ด้วยตัวตรวจสอบเบราว์เซอร์ด้วยตนเอง (ขั้นสูง)

เว็บเบราว์เซอร์ส่วนใหญ่ให้คุณค้นหาแบบอักษรได้ง่ายโดยใช้right-click→ 'ตรวจสอบ' หรือ 'ตรวจสอบองค์ประกอบ' F12นอกจากนี้ยังสามารถทำได้โดยการกด นี่จะแสดงรายการของสไตล์ที่แนบกับเว็บไซต์ซึ่งคุณสามารถสำรวจเพื่อค้นหาแบบอักษรที่ใช้ในองค์ประกอบ HTML ใด ๆ

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

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

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

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

— Yisela
แหล่งที่มา

1

ย้ายที่ดี :-) หนึ่งความคิด - วิธีที่จะบอกว่าตัวอักษรในกองตระกูลตัวอักษรเป็นสิ่งที่คุณเห็นบนหน้าจอจริง? ฉันมักจะทำโดยการทดลองและข้อผิดพลาดการลบแบบอักษรแรกจนกว่าจะทำให้ลักษณะที่ปรากฏเปลี่ยน แต่ฉันแน่ใจว่ามีวิธีที่ดีกว่า ใน WhatFont มันเป็นตัวเอียง? (ยินดีต้อนรับ ps กลับมา!)

— user56reinstatemonica8

@ user568458 ขอบคุณ :) ฉันต้องการเพิ่มภาพหน้าจอของกระบวนการค้นหาแบบอักษรด้วยตัวตรวจสอบ ฉันมีเวลาที่ยากลำบากตัวเองแม้หลังจากใช้มานานหลายปี! แต่จริงๆแล้วฉันไม่มีเทคนิคที่เหมาะสมฉันลองผิดลองถูกด้วย ใน WhatFont ฉันเชื่อว่ามันเป็นตัวเอียงหมายความว่าไม่ใช่แบบอักษรของระบบ

— Yisela

@Yisela จากความอยากรู้ทำไมหน้าจอ WhatFont แสดงตัวอักษรสีน้ำเงิน (# ea4858) ของตัวอักษรสีน้ำเงิน? มันเป็นเพียงสีที่คุณคว้ามาก่อนหน้านี้หรือมีข้อผิดพลาด? แก้ไข: โอ้ฉันเห็นว่ามันอาจเป็นสีโฮเวอร์เมื่อคุณเลือกองค์ประกอบนั้นซึ่งดูเหมือนไม่เหมาะ แต่ก็ยังเจ๋ง

— DasBeasto

@DasBeasto ใช่แล้วมันเป็นสีที่ลอยอยู่! i.imgur.com/5NLjaEV.pngจุดดีอีกครั้งสำหรับการตรวจสอบด้วยตนเองเพราะมันช่วยให้คุณเลือกสถานะการโต้ตอบที่แตกต่างกัน

— Yisela

3

นอกจากนี้ยังต้องการเพิ่ม Firefox (v35.0) มีตัวตรวจสอบองค์ประกอบที่ดีสำหรับแบบอักษร คุณสามารถเลือกแท็บแบบอักษรที่จะบอกรายละเอียดทั้งหมดเกี่ยวกับองค์ประกอบที่คุณเลือก (ตระกูลฟอนต์สไตล์ประเภทไฟล์) หรือกด "แสดงแบบอักษรทั้งหมดที่ใช้ในหน้า" ซึ่งจะแสดงสิ่งที่ดาวน์โหลดทั้งหมดจากเซิร์ฟเวอร์ จากนั้นคุณสามารถไปที่แท็บที่คำนวณซึ่งจะบอกสิ่งต่าง ๆ เช่นขนาดสี ฯลฯ โดยไม่มีความยุ่งเหยิงและการสืบทอดเช่น Chrome

— DasBeasto

11

'องค์ประกอบการตรวจสอบ' ของเบราว์เซอร์ไม่สมบูรณ์แบบ

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

อีกเครื่องมือที่มีประโยชน์เป็นFount

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

การใช้ Fount นั้นง่ายเหมือนการเพิ่มบุ๊คมาร์ค ไม่จำเป็นต้องติดตั้งแอพหรือส่วนขยายใด ๆ

หลังจากเพิ่มบุ๊กมาร์ก:

ไปที่ไซต์ใดก็ได้และคลิกที่บุ๊คมาร์ค Fount
คลิกที่ประเภทใดก็ได้ที่คุณต้องการระบุ ทำซ้ำ
หากต้องการปิด Fount เพียงคลิกที่ bookmarklet อีกครั้ง

Fount ใช้งานได้ใน Safari, Chrome, Firefox และ IE8 +

— Cai
แหล่งที่มา

Fount นั้นดีเพราะมันใช้งานกับ IE ได้เช่นกัน แต่ WhatFont ค่าโดยสารนั้นดีกว่าเพราะมันจะแสดงฟอนต์ที่มองเห็นได้จริงรวมถึงฟอนต์ที่ระบุใน HTML markup ดังนั้นการเปรียบเทียบจึงรวดเร็ว

— Moiz Tankiwala

1

ไซต์ดาวน์ ... ไม่พร้อมใช้งานในปี 2561

— WesternGun

@FaithReaper เว็บไซต์ (และสคริปต์) ยังคงทำงานได้อย่างสมบูรณ์ดีสำหรับฉัน

— Cai

1

ฉันเข้าสู่ไซต์และเห็นบล็อกสีเทาทางซ้ายโดยไม่มีคำแนะนำหรือไม่มีอะไรเลย ฉันไม่สามารถอัพโหลดภาพได้ แต่มันดูแปลก ๆ fount.artequalswork.com/

— WesternGun

@FaithReaper เว็บไซต์ควรมีลักษณะเช่นนี้: i.stack.imgur.com/goShP.png (คุณไม่ได้อัปโหลดภาพ แต่มันเป็นเพียงบุ๊คมาร์คที่คุณใช้ในการตรวจสอบแบบอักษรที่ใช้ในเว็บไซต์สด)

— Cai

1

ฉันรักส่วนขยายเบราว์เซอร์ Chrome CSSViewer คุณเพียงแค่คลิกและเลื่อนไปที่แบบอักษรที่คุณต้องการระบุและมันจะแสดงแบบอักษรของตระกูลคุณ

— user86140
แหล่งที่มา

-2

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

ส่วนเสริมนี้เป็นวิธีที่ดีที่สุดในการค้นหาแบบอักษรและ css อื่น ๆ เช่นน้ำหนักแบบอักษรขนาดและหน้าเว็บฟอร์มอื่น ๆ อีกมากมาย

— Khushbu Solanki
แหล่งที่มา

3

สวัสดี Khushbu ยินดีต้อนรับสู่ GDSE คุณช่วยบอกเราว่า "FontFinder" ทำอะไรได้บ้าง? นอกจากนี้หากคุณเป็นพันธมิตรกับผลิตภัณฑ์คุณจะต้องเปิดเผยความร่วมมือในคำตอบของคุณ ดูวิธีการไม่ได้เป็นผู้ส่งสแปม

— Cai

2

ข้อความในคำตอบข้างต้นเป็นสำเนาและวางจากchrome.google.com/webstore/detail/font-finder/ ......

— ChrisW