ยูทิลิตี้เพื่อกำหนดแบบอักษรที่ใช้ในเว็บไซต์? [ปิด]

9

ปิด. คำถามนี้เป็นคำถามปิดหัวข้อ ไม่ยอมรับคำตอบในขณะนี้

ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นหัวข้อสำหรับผู้ใช้ขั้นสูง

ปิดให้บริการใน5 ปีที่ผ่านมา

ตัวอย่างเช่น: ฉันชอบแบบอักษรที่ใช้บนเว็บไซต์: NYTimesดังนั้นสิ่งที่สามารถแสดงรายการแบบอักษรทั้งหมดที่ใช้โดยเว็บไซต์จะดีมาก!

ฉันไม่ต้องการยูทิลิตี้การประมวลผลภาพที่สามารถวิเคราะห์ภาพหน้าจอหรือเว็บไซต์ที่จะถามคำถามเกี่ยวกับแบบอักษรและแคบลงจากรายการ

บางสิ่งบางอย่างที่สามารถรวบรวมข้อมูลเว็บไซต์และแสดงแบบอักษรของ ... มันจะดีถ้ามันสามารถซ้อนทับแบบอักษรในภูมิภาค แต่มันจะไปไกลเกินไปฉันเดา

software-rec website fonts

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

? @Arjan ทำไม :-( ฉันได้กล่าวอย่างชัดเจนว่าสิ่งที่ฉันไม่ได้มองหาซึ่งเป็นเรื่องของส่วนใหญ่ของคำตอบที่นั่น.

— Lazer

Firefox ทำให้สิ่งนี้ง่ายมากในปัจจุบันสำหรับหน้าเดียว ดูคำตอบของฉันมีการปรับปรุง

— Arjan

20

มีหลายวิธีในการทำสิ่งนี้ให้สำเร็จ ฉันทำสิ่งนี้บ่อยมากเพราะฉันสนใจ CSS มากแค่ไหนและฉันก็ชอบวิชาการพิมพ์ด้วย สองวิธีที่ฉันชอบทำคือ:

ใช้ "ผู้ตรวจสอบ" กับเบราว์เซอร์ของคุณ (นี่คือสิ่งที่คุณกำลังมองหา!) - ฉันใช้Google Chrome (เพราะฉันชอบมาก) ซึ่งมีเครื่องมือตรวจสอบในตัว คุณควรลองทำดู คุณเพียงไปที่ไซต์คลิกขวาที่องค์ประกอบใดก็ตามที่คุณต้องการวิเคราะห์และคลิก "ตรวจสอบองค์ประกอบ" จากเมนูบริบท ผู้ตรวจสอบแสดงคุณสมบัติแบบไดนามิกของ HTML และ CSSดังนั้นหากคุณต้องการตรวจสอบองค์ประกอบข้อความคุณจะเห็นfont-familyคุณสมบัติ cssในตัวตรวจสอบ (ในแถบด้านขวา) ซึ่งจะบอกคุณว่าแบบอักษรคืออะไร (ดูด้านล่างสำหรับข้อมูลเกี่ยวกับวิธีการตีความ CSS นี้) คุณสามารถใช้ Firebug สำหรับ Firefox เพื่อทำสิ่งที่คล้ายกัน แต่ฉันเชื่อว่าเครื่องมือ Google Chrome Inspector นั้นยอดเยี่ยมกว่ามาก (ฉันเป็นนักพัฒนาเว็บ - ฉันใช้ทุกอย่าง!)
หรือคุณสามารถดูที่มาของหน้าและวิเคราะห์ CSS นี่คือวิธีการ:
1. เมื่อคุณอยู่ในหน้าให้ดูที่มา หากคุณอยู่ใน Internet Explorer ให้ไปที่ Page -> View Source หรือ View -> Source หากคุณใช้ Firefox, Chrome หรือเบราว์เซอร์สมัยใหม่อื่น ๆ ให้กด Ctrl + U (หรือ Apple + U ขึ้นอยู่กับระบบปฏิบัติการของคุณ)
2. ในรหัส HTML ให้ค้นหาเนื้อหาข้อความที่คุณพยายามวิเคราะห์ คุณควรหาแท็กบางอย่างที่มีข้อความและอาจมีแบบอักษรที่กำหนดรหัสลงใน HTML (ใช้<font>แท็กหรือในstyleแอตทริบิวต์ของ<p>หรือ<div>สิ่งที่แนบมา) หรืออาจอ้างอิง CSS บางอย่าง (มองหาclassหรือidแอตทริบิวต์ และเขียนสิ่งเหล่านี้)
3. หากเป็นอันหลัง (อ้างอิงถึง CSS บางตัว) ไปที่ด้านบนสุดของ HTML และค้นหา<link>แท็กใน<head>หน้า หากลิงค์อ้างอิงถึงสไตล์ชีทคุณจะเห็นมัน - สิ่งที่คุณต้องทำตอนนี้คือไปที่สไตล์ชีท CSS นั้นและค้นหาตัวระบุคลาสหรือรหัสที่คุณจดไว้ ที่ใดที่หนึ่งคุณจะพบfont-familyproerpty ที่สอดคล้องกัน(อย่าลืมคุณยังสามารถตั้งค่าแบบอักษรทั่วทั้งไซต์และสิ่งนี้จะอยู่ภายใต้<body>แท็กหรืออย่างอื่นนี่คือเหตุผลว่าทำไมคุณควรใช้เครื่องมือตรวจสอบ )

วิธีตีความfont-familycss:

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

ตัวอย่าง: สมมติว่านี่เป็น css สำหรับ<p>กล่องหุ้ม

p.thisisasampleclass
{
font-family: Calibri, "Comic Sans MS", Georgia, sans-serif;
}

ที่นี่เบราว์เซอร์จะพยายามใช้ Calibri ก่อนหากมีแบบอักษรให้ หากไม่เป็นเช่นนั้นจะใช้ Comic Sans MS หรือ Georgia หรือเพียงแค่แบบอักษร sans-serif ที่เป็นค่าเริ่มต้นหากไม่มีตัวอักษรอื่น

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

ตัวอย่างวิธีการค้นหาแบบอักษร NYTimes ด้วยเครื่องมือตรวจสอบ:

ฉันจะแนะนำคุณเกี่ยวกับวิธีค้นหาแบบอักษรสำหรับเนื้อหาข้อความหลักของบทความ NYTimesด้วย Google Chrome

ไปที่บทความเกี่ยวกับ NYTimes.com, คลิกขวาที่องค์ประกอบข้อความที่คุณต้องการที่จะหาแบบอักษรสำหรับการและกดตรวจสอบธาตุ
ดูที่แถบด้านข้างทางขวา ในดร็อปดาวน์สไตล์ที่คำนวณคุณจะเห็นคุณสมบัติ CSS สำหรับองค์ประกอบนี้ อย่างไรก็ตามอย่างที่คุณเห็นไม่มีคุณสมบัติแบบอักษรตระกูลที่นี่ในขณะนี้ซึ่งหมายความว่าแบบอักษรถูกกำหนดทั่วโลกไม่เพียง แต่สำหรับองค์ประกอบเฉพาะนี้ อย่างไรก็ตามมีวิธีที่จะหลีกเลี่ยงปัญหานี้ได้!
นี่คือสิ่งที่คุณทำ: เลือกปุ่มตัวเลือกถัดจาก "แสดงที่สืบทอด"
คุณสมบัติส่วนกลางอื่น ๆ มากมายจะปรากฏภายใต้ "สไตล์ที่คำนวณ"
เลื่อนลงในรายการเพื่อ "แบบอักษรตระกูล" ควรเป็นสีเทาซึ่งหมายความว่าเป็นทรัพย์สินส่วนกลางที่สืบทอดมา ที่นี่คุณสามารถดูแบบอักษรที่ใช้! Ta-da!

— Maxim Zaslavsky
แหล่งที่มา

ฉันจะเพิ่มคำอธิบายตัวอย่างสำหรับ NYTimes ในขณะนี้

— Maxim Zaslavsky

ppl ขอบคุณฉันรักสถานที่นี้ - www.superuser.com มากยิ่งขึ้นในขณะนี้ :)

— Lazer

@ Maximz2005 สำหรับตัวเลือกบางอย่างที่ฉันไม่ได้รับ "แบบเลื่อนลงแบบคำนวณ" ฉันเพิ่งได้สไตล์แบบเลื่อนลงที่ว่างเปล่า ทำไมถึงเป็นอย่างนั้น?

— Lazer

1

เนื่องจากผู้ตรวจสอบเป็นผู้ตรวจสอบ WebKit จริง ๆ ฉันคิดว่าเบต้าในภายหลังจะรวม WebKit รุ่นใหม่กว่าด้วยหรือไม่ รุ่นที่ใหม่กว่าสามารถแสดงบั๊กใหม่ได้ แต่ฉันสงสัยว่าเป็นไปได้หรือไม่ว่าคุณเพิ่งพบเจอ มีวิธีใดบ้างที่จะแสดงรุ่น WebKit ที่ใช้ใน Chrome?

— Arjan

1

Mine คือ WebKit 532.0 @Maxim Z ฉันลองใช้โครเมี่ยมของเพื่อน (รุ่น 3. บางอย่าง) มันทำงานได้อย่างสมบูรณ์แบบที่นั่น ในที่สุดฉันก็สามารถตรวจจับแบบอักษรตามที่ฉันต้องการได้ ตอนนี้ฉันเข้าใจแล้วว่าคุณลักษณะ "องค์ประกอบการตรวจสอบ" ยอดเยี่ยมแค่ไหน

— Lazer

7

มีสองสิ่งที่แตกต่าง:

ใช้แบบอักษรใด (โดยเบราว์เซอร์ / ระบบปฏิบัติการ)
แบบอักษรใดที่ถูกร้องขอ (โดยผู้สร้างเว็บไซต์)

1. แบบอักษรใดที่ใช้ (ทางเลือก)

หากต้องการทราบว่าแบบอักษรใดที่ใช้ในเบราว์เซอร์เฉพาะบนคอมพิวเตอร์ / ระบบปฏิบัติการของคุณทุกวันนี้ Firefox และ Chrome มีเครื่องมือในตัวสำหรับสิ่งนั้น เช่นเดียวกับผู้ตรวจสอบเพจ Firefox มีมุมมองแบบอักษร :

สำหรับรายละเอียดเพิ่มเติมให้ดูที่ฉันจะทราบได้อย่างไรว่าตัวอักษรใดที่เบราว์เซอร์ใช้เพื่อแสดงข้อความ บน Stack Overflow ซึ่งรวมถึง:

ข้อความอาจรวมถึงอักขระ Unicode ที่ไม่ได้อยู่ในแบบอักษรที่กำหนดไว้ใน CSS ดังนั้นแบบอักษรหลายรายการอาจใช้ในองค์ประกอบเดียว
ไม่เบราว์เซอร์บนเครื่องเดียวกันแต่ละอาจใช้ตัวอักษรเดียวกันประเภท (เช่น TrueType, แอปเปิ้ลเทคโนโลยีขั้นสูงไมโครซอฟท์ OpenType, OpenType PostScript) และด้วยเหตุนี้อาจจะใช้แบบอักษรที่แตกต่างกัน ดังนั้นคุณอาจต้องพิจารณาว่าจะใช้แบบอักษรใดในเบราว์เซอร์อื่น

2. ขอแบบอักษรใด

เพื่อบอกแบบอักษรที่ร้องขอ (โดยผู้สร้างเว็บไซต์) เครื่องมือเช่นตัวตรวจสอบเพจ Firefox ในตัวหรือส่วนขยาย Firebugช่วยในการตรวจสอบกฎ CSS เครื่องมือดังกล่าวไม่ได้บอกคุณว่าจะใช้แบบอักษรใดแต่จะแสดงแบบอักษรที่ต้องการสำหรับพื้นที่เฉพาะหรือแม้กระทั่งสำหรับคำที่ระบุโดยกำหนดสไตล์ชีท CSS:

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

Firebug Liteบางตัวก็มีให้ใช้งานในเบราว์เซอร์อื่น แต่ฉันไม่เคยใช้มัน

เครื่องมือตรวจสอบเว็บใน Safari และเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน Chrome มีตัวเลือกที่คล้ายกัน (ใน Safari เปิดใช้งาน Web ตรวจสอบผ่านการตั้งค่า: แสดงเมนูการพัฒนาในแถบเมนู .) Internet Explorer มีเครื่องมือ F12

เช่นเดียวกับ e-t172 ที่ระบุไว้ : แถบเครื่องมือสำหรับนักพัฒนาเว็บสำหรับ Firefox สามารถแสดงข้อมูลนี้ได้เช่นกัน อย่างไรก็ตาม CSS »ดูข้อมูลสไตล์ไม่แสดงสไตล์ใด ๆ "ที่สืบทอด" ("เรียงซ้อน") แต่จะมีเฉพาะข้อมูลที่เฉพาะเจาะจงกับภูมิภาคที่คุณคลิก แต่เพื่อให้ได้ภาพซ้อนทับและดูข้อมูลตัวอักษรคุณสามารถใช้ข้อมูล»แสดงข้อมูลองค์ประกอบแทน ที่จะแสดงรายละเอียดทุกครั้งที่คุณคลิกที่หน้าบางแห่ง

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

+1 สำหรับคำตอบที่ละเอียดกว่านี้

— BinaryMisfit

คุณได้ภาพหน้าจอที่จางหายไปได้อย่างไร ดูเหมือนว่า Mac โอกาสที่จะได้รับผลกระทบที่คล้ายคลึงกันใน Vista หรือ XP?

— Lazer

@ Lazer, Skitch บน Mac (แต่เงาเป็นชนิดมาตรฐานและชนิดที่ต้องการเนื่องจาก OS X มีขอบหน้าต่างบางมากถ้ามี) ไม่ทราบวิธีการทำบน Windows

— Arjan

4

หากคุณใช้ Firefox จะมีตัวค้นหาฟอนต์เสริม มันเป็นสิ่งที่Maxim Z.อธิบายไว้ในคำตอบของเขาแต่โดยอัตโนมัติดังนั้นมันจึงใช้งานได้ง่ายจริงๆ ..

— ลุดวิกไวนซีเออร์
แหล่งที่มา

Font Finder คือสิ่งที่ฉันกำลังมองหา หากมีส่วนขยายที่คล้ายกันสำหรับ Chrome เท่านั้น

— kangax

@ Kangax มีอยู่ทุกวันนี้; ดูคำตอบของ Alec

— Arjan

และ @kangax ทุกวันนี้ Firefox และ Chrome มีเครื่องมือในตัวเพื่อกำหนดแบบอักษรจริง ไม่ต้องเดาอีกต่อไป

— Arjan

4

นี่คือทางออกที่ดีที่สุดที่ฉันเคยเจอ เป็น bookmarklet / extension ที่จะ 99% ของเวลาบอกให้คุณแน่ใจว่าจะใช้แบบอักษรใดโดยการเปรียบเทียบพิกเซลของข้อความที่แสดงกับแบบอักษรทั้งหมดที่มีรวมถึง TypeKit และ Google Font API

เครื่องมือ WhatFont

ป้อนคำอธิบายรูปภาพที่นี่

ลองดูสิ

— แม็กซ์
แหล่งที่มา

ดีมากดีมาก แต่ฉันไม่คิดว่าจริง ๆ แล้วการเปรียบเทียบพิกเซล (ทุกวันนี้)? เมื่อ CSS เพิ่งบอกว่าfont-family: sans-serifนั่นคือสิ่งที่รายงาน - แต่ตัวมันเองไม่ใช่แบบอักษร เมื่อใช้font-family: someUnknownFontฉันจะได้รับ(default font)ตามผลลัพธ์ซึ่งก็คือไทม์สบน Mac ของฉัน (ทดสอบกับ bookmarklet โดยใช้JS Bin ; ภาพหน้าจอ ) ยังดีอีกครั้ง: ดีมาก!

— Arjan

@Arjun ฉันตรวจสอบรายละเอียดในสองสามเดือนก่อนดังนั้นฉันจะอธิบายเช่นเดียวกับที่ฉันจำได้ ภายใต้ฝากระโปรงมันทำสองสิ่ง มันใช้window.getComputedStyleเพื่อรับฟอนต์ตระกูล จากนั้นจะทำซ้ำสแต็กนี้เปรียบเทียบพิกเซลของแต่ละฟอนต์กับพิกเซลที่แสดง นัดแรกคือนัดที่แสดงเป็นตัวเอียงในป๊อปอัพส่วนที่เหลือจะแสดงตามปกติ (default font)ถ้าไม่มีการแข่งขันก็จะแสดง เหตุผลที่คุณเห็นsans-serifคือเนื่องจากมันตรงกับsans-serifแบบอักษรอย่างถูกต้องในขณะนี้ แต่ก็ไม่ได้แยกแยะ

— Max

Firefox เป็นเพื่อนที่ดีที่สุดของฉันสำหรับสิ่งนี้; ดูคำตอบที่อัปเดตของฉัน :-)

— Arjan

3

ฉันไม่รู้ซอฟต์แวร์ใด ๆ ฉันเพิ่งใช้ Internet Explorer และพบว่าแบบอักษรที่ใช้คือ:

font-family: จอร์เจีย, "times new roman", เวลา, serif

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

กระบวนการ:

คลิกขวาที่หน้าแรก
ค้นหาบรรทัด rel = stylesheet และ URL สไตล์ชีทที่แนบมา
คัดลอกและวางลงในเบราว์เซอร์และดาวน์โหลดไฟล์ css
เปิดในเครื่องมือแก้ไขข้อความ

หากคุณกำลังมองหาตัวอักษรในภาพที่จะไม่ถูกกำหนดนอกภาพ

_{ใช่ฉันรู้สึกเบื่อมาก มันเป็นบ่ายวันศุกร์หลังจากทั้งหมด ฉันไม่ได้โพสต์ลิงก์เนื่องจากอัปเดตสไตล์ชีทอย่างสม่ำเสมอ}

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

Uhuh, Firebug ใน Firefox หรือ Web Inspector ใน Safari ... ?

— Arjan

1

ที่ผมกล่าวว่า. ฉันเบื่อ. เปลี่ยนรสชาติของเบราว์เซอร์และดูแหล่งที่มา มีเครื่องมืออื่น ๆ แต่การทำให้มันง่ายไม่ใช่วิธีที่ผิด

— BinaryMisfit

ดีสำหรับความจริงเพียงอย่างเดียวที่สอนผู้ใช้อย่างอื่นนอกเหนือจากการใช้ Firefox เป็นประจำ

— สุ่ม

ตาม Wikipedia ทั้งสองgeorgiaและtimes new romanเป็นแบบอักษร ดังนั้นผลลัพธ์หมายถึงอะไร การรวมกันของสอง typefaces?

— Lazer

1

คุณสามารถใช้ส่วนขยาย Web Developer Firefox เพื่อดูสไตล์ทั้งหมดที่ใช้โดยส่วนเฉพาะของหน้าเว็บ ใช้เมนู CSS ดูข้อมูลสไตล์ จากนั้นคลิกที่ข้อความที่คุณต้องการวิเคราะห์และค้นหาคุณสมบัติ "font-family" ในผลลัพธ์

— Etienne Dechamps
แหล่งที่มา

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

— Arjan

1

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

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

0

นี่คือโซลูชันที่เรียบง่าย แต่มีประสิทธิภาพ: bookmarklet ที่แสดงการกำหนดค่าที่ใช้กับองค์ประกอบ (รวมถึงตระกูลแบบอักษร)

เจส Bookmarklets Site computed stylesมีหนึ่งที่ดีสำหรับงานนี้:

ไปเลย: https://www.squarefree.com/bookmarklets/webdevel.html#computed_styles

— Adriano P
แหล่งที่มา

-1

หากนั่นไม่ใช่ css แบบอินไลน์ให้เปิดหน้าเว็บในมุมมองต้นฉบับ คัดลอกที่อยู่ css เช่น "/themes/01.css" วางบนเบราว์เซอร์ url คัดลอกการส่งคืนในตัวแก้ไขข้อความหรือตัวแก้ไข css ใช้ค้นหาเพื่อปรับแบบอักษรหรือแบบอักษรที่เหมาะกับครอบครัว ตระกูลแบบอักษรที่แสดงรายการใช้เพื่อแสดงแบบอักษรของหน้าสำหรับขนาดและคุณลักษณะอื่น ๆ เช่นตัวหนาตัวเอียงและอื่น ๆ

ขอบคุณ doronto

— รับลิงก์ย้อนกลับฟรี
แหล่งที่มา