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

175

CSS ของฉันระบุ " font-family: Helvetica, Arial, sans-serif;" สำหรับทั้งหน้า ดูเหมือนว่า Verdana กำลังถูกใช้แทนในบางส่วน ฉันต้องการตรวจสอบสิ่งนี้

ฉันพยายามคัดลอกและวางจากเบราว์เซอร์ของฉันลงใน Word แต่ไม่ได้รักษาแบบอักษร

มีวิธีในการกำหนดแบบอักษรที่ใช้จริงสำหรับส่วนของข้อความหรือไม่?

Firebug จะให้รายชื่อตัวอักษรของฉันตามด้านบน [1] แต่ฉันไม่เห็นวิธีที่จะกำหนดว่าจะใช้ตัวอักษรตัวใดตัวหนึ่ง

ปรากฎว่ามีการใช้รายการผิดซึ่งแก้ไขปัญหา Verdana เดิมของฉัน แต่ฉันก็ยังสงสัยว่ามีวิธีการระบุแบบอักษรการแสดงผลจริง

css browser fonts

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

stackoverflow.com/questions/845/detecting-font-in-javascript

— ajm

FontFinder และ WhatFont ที่อธิบายไว้ในคำตอบด้านล่างยังคงเป็นวิธีที่หยาบมากในการตรวจจับแบบอักษรที่ใช้ ทั้งสองระบุไม่ถูกต้อง "Quanttrocentro Sans" (แบบอักษรหลัก) เมื่อฉันเลือก؋สัญลักษณ์Aghani ซึ่งไม่มีในแบบอักษรนี้

— คำถามล้นใน

@QuestionOverflow ปัจจุบัน Firefox และ Chrome มีเครื่องมือในตัวเพื่อกำหนดแบบอักษร พวกเขาจะแสดงแบบอักษรสำหรับแต่ละสัญลักษณ์ดังนั้นจะแสดงให้คุณเห็นว่าแบบอักษรใดที่ใช้สำหรับ that นั้นเช่นกัน

— Arjan

@Arjan: ยังคงเป็นกรณีนี้ในปี 2020?

— กลืน elysium

@devouredelysium คุณเห็นคำตอบของฉันหรือไม่ เพียงเลือกสัญลักษณ์เดียวเพื่อดูว่าจะใช้แบบอักษรใด

— Arjan

50

ต่อคำตอบของวิลเฟรดฮิวจ์ , Firefox ในขณะนี้สนับสนุนนี้โดยกำเนิด บทความนี้มีรายละเอียดเพิ่มเติม

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

— Jeremy Kauffman
แหล่งที่มา

7

ไม่มีเหตุผลที่จะใช้สิ่งนี้ในขณะนี้ที่เครื่องมือของ Firefox> นักพัฒนาเว็บ> ผู้ตรวจสอบ> แบบอักษรบอกคุณ (คำตอบของ Wilfred Hughes)

— skierpage

1

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

— Zabba

3

"โดยเริ่มต้นใน Firefox 47 มุมมองแบบอักษรจะถูกปิดใช้งานตามค่าเริ่มต้นเรากำลังดำเนินการแทนที่แบบเต็มรูปแบบมากขึ้นในขณะนี้หากคุณต้องการดูมุมมองแบบอักษรให้ไปที่ about: config ค้นหา devtools การตั้งค่า fontinspector.enabled และตั้งค่าเป็นจริง " ดูdeveloper.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/...

— Daniel Le

1

เห็นได้ชัดว่าdevtools.fontinspector.enabledจำเป็นต้องใช้การตั้งค่าใน Firefox 47 เท่านั้น: "ใน Firefox 47 เท่านั้นมุมมองแบบอักษรจะถูกปิดใช้งานตามค่าเริ่มต้นหากคุณต้องการดูมุมมองแบบอักษรใน Firefox 47 ให้ไปที่about:configค้นหาการตั้งค่าdevtools.fontinspector.enabledและตั้งค่าtrueก่อนและหลัง Firefox 47 มุมมองแบบอักษรเปิดใช้งานตามค่าเริ่มต้น " , @DanielLe

— Arjan

1

@DanielLe แน่นอนฉันเข้าใจว่ามันถูกต้องในเวลาที่คุณคัดลอกข้อความ :-)

— Arjan

151

ทุกวันนี้ Chrome และ Firefox มีเครื่องมือในตัว แต่ Safari ต้องการให้คุณคัดลอกข้อความและตรวจสอบ

ก่อนอื่นให้เลือกข้อความ ใน Firefox ตัวตรวจสอบหน้ามีมุมมองแบบอักษร :

สิ่งนี้จะบอกคุณว่ามีการดาวน์โหลดแบบอักษรหรือไม่และมีการใช้รูปแบบใดเช่นปกติ, ExtraLight, Italic, BoldItalic และทั้งหมด

สำหรับ Chrome ไปที่ "องค์ประกอบ" ของ DevTools ไปที่แท็บ "คำนวณ" แล้วเลื่อนลงไปจนถึงส่วนที่เรียกว่า "แบบอักษรที่แสดงผล" ซึ่งแตกต่างจากกับ Firefox สิ่งนี้จะแสดงเฉพาะชื่อแบบอักษรพื้นฐานไม่ใช่สไตล์เฉพาะที่อาจใช้:

ภาพหน้าจอด้านบนแสดงว่าแบบอักษรหลายแบบอาจแสดงเป็นข้อความ Unicode Chrome บอกคุณว่าร่ายมนตร์ 6 อัน ("Pekka" และที่ว่าง) กำลังใช้ "Arial" และอีกหนึ่ง ("웃") ใช้ "Apple SD Gothic Neo":

Arial - ไฟล์ในเครื่อง (6 glyphs)
Apple SD Gothic Neo - ไฟล์ในเครื่อง (1 glyph)

CSS ที่แท้จริงกำหนด:

font-family: Arial,"Helvetica Neue",Helvetica,sans-serif

แต่แบบอักษรเหล่านั้นมักจะไม่มีอักขระพิเศษมากมาย เนื่องจากข้อมูลตัวอักษรทำงานตามองค์ประกอบ HTML ซึ่งข้อความ Unicode ในองค์ประกอบสามารถใช้แบบอักษรหลายตัวได้จริงจึงแสดงแบบอักษรหลายแบบเช่นกัน หากมีข้อสงสัยให้คลิกสองครั้งที่ข้อความในบานหน้าต่าง HTML และกำจัดข้อความที่คุณไม่สนใจจากนั้นเมื่อเลือกองค์ประกอบรอบข้างอีกครั้งคุณจะเห็นเพียงตัวเลือกเดียว ในกรณีนี้มันจะบอกคุณว่าเบราว์เซอร์ทั้งสองใช้ "Apple SD Gothic Neo Normal" สำหรับตัวอักษร "웃"

น่าเสียดายที่เบราว์เซอร์ที่แตกต่างกัน (และแม้แต่เบราว์เซอร์เวอร์ชันเดียวกัน) ในเครื่องเดียวกันอาจใช้แบบอักษรที่แตกต่างกันเนื่องจากประเภทของฟอนต์ที่สนับสนุน / ต้องการโดยเบราว์เซอร์ บน Mac เช่น Safari อาจต้องการเทคโนโลยีขั้นสูงของ Apple ในขณะที่ Firefox รองรับ Microsoft OpenType (ซึ่งอาจทำให้เกิดปัญหาสำหรับภาษาอาหรับหลังจากติดตั้ง Microsoft Office บน Mac) หรือสำหรับอักขระ "웃" ในภาพหน้าจอด้านบน Chrome และ Firefox บน Mac ของฉันทุกวันนี้ชอบ "Apple SD Gothic Neo" (ซึ่งเป็น OpenType PostScript) แต่ Firefox รุ่นเก่าใช้ "AppleGothic Regular" แทน (ซึ่งเป็นฟอนต์ TrueType) .

สำหรับเบราว์เซอร์ที่ไม่มีมุมมองแบบอักษรที่คล้ายกันเพียงคัดลอกและวางส่วนของข้อความลงในโปรแกรมประมวลผลคำหรือตัวแก้ไข Rich Text ให้เลือกข้อความที่ต้องการและดูชื่อที่แสดงในรายการแบบอักษรแบบหล่น บน Mac ของฉันสิ่งนี้ไม่ทำงานเมื่อวางจาก Firefox (ที่สำหรับ "웃" "Apple SD Gothic Neo" ของ Firefox ถูกแปลงเป็น "AppleMyungjo" เมื่อวาง) แต่ทำงานได้ดีสำหรับ Safari และ Chrome:

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

1

คุณรู้หรือไม่ว่า Safari มีปลั๊กอินหรือสิ่งนี้

— Andry

4

ใน Chrome 47 ตรวจสอบให้แน่ใจว่าคุณเลื่อนไปที่ด้านล่างของส่วนคำนวณ การขยายfont-familyคุณสมบัติตามที่ปรากฏ (ตามลำดับตัวอักษร) จะไม่แสดงแบบอักษรที่กำลังโหลด ข้อมูลนี้จะปรากฏขึ้นที่ด้านล่าง

— Merchako

1

@ Merchako จะเกิดอะไรขึ้นเมื่อแบบอักษรที่คำนวณของคุณเป็นแบบอักษรทั่วไปเช่น "serif" และ "sans-serif" แล้วคุณจะได้รับแบบอักษรที่แท้จริงได้อย่างไร

— Pacerier

2

@Pacerier ใน Chrome เพียงเลื่อนลงไปจนสุดในแท็บคำนวณ ใน Firefox ดูแท็บแยก

— Arjan

1

@TMG ฉันจินตนาการได้ว่าเว็บฟอนต์อาจไม่ต้องการนามแฝง แต่สามารถอ้างถึง URL โดยตรง นี่เป็นเว็บไซต์สาธารณะที่เราสามารถดูได้หรือไม่? ถ้าไม่ Firefox จะแสดงอะไร

— Arjan

32

Firefox 22+ จะแสดงแบบอักษรที่ใช้งานอยู่ในปัจจุบันโดยไม่มีส่วนขยายใด ๆ

— Wilfred Hughes
แหล่งที่มา

1

ตอนนี้ควรเป็นคำตอบที่ชัดเจน ไม่จำเป็นต้องติดตั้งส่วนขยาย

— Dan Eastwell

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

— b1nary

30

WhatFontเป็นส่วนขยายของ Chrome ที่จะบอกคุณโดยเฉพาะว่าตัวอักษรใดในกองฟอนต์ที่กำลังโหลด

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

6

สำหรับฉันมันบอกว่ามีการประกาศแบบอักษร แต่ไม่ใช่แบบอักษรที่ใช้จริง

— panzi

3

อ้างอิงจากบทความนี้ ( updates.html5rocks.com/2013/09/… ) ตอนนี้เครื่องมือ Dev สามารถบอกคุณได้ว่าแบบอักษรที่ใช้จริงเป็นอย่างไร

— yorch

WhatFont พยายามตรวจจับแบบอักษรที่แสดงผล แต่ดูเหมือนจะไม่ประสบความสำเร็จในการทำเช่นนั้นgithub.com/chengyin/WhatFont-Bookmarklet/issues/13

— Chris Marisic

7

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

— โจนาธาน
แหล่งที่มา

ถึงตอนนี้นี่เป็นคำตอบที่ดีที่สุด

— Ingo Kegel

1

คุณสามารถลองตรวจสอบส่วนเฉพาะนั้นด้วย Firebug สำหรับ Firefox มันควรจะให้คุณสมบัติที่แน่นอนทั้งหมดแก่คุณ

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

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

— lavaturtle

1

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

— RichieHindle

Safari 4 Beta มี WebInspector เกินไป (อาจจะเป็นวางเพลิงผิว)

— vikingosegundo

1

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

— jeroen

2

Firebug ปัจจุบัน (1.11.4 หรืออาจก่อนหน้านี้) เน้นแบบอักษรปัจจุบันเป็นสีน้ำเงิน

— Mark Vrabel

1

ปลั๊กอิน "FontFinder" ที่กล่าวถึงโดย jeremy ดูเหมือนจะไม่ทำงานที่นี่โดยให้แบบอักษรแรกของรายการ CSS โดยไม่คำนึงถึงแบบอักษรที่แสดงผลจริง (Firefox 4.0rc1 บน Linux) ปลั๊กอินต่อไปนี้จะให้ตัวอักษร "ถูกต้อง" ดูเหมือนว่า

แบบอักษรบริบท

— เดฟโฟกท์
แหล่งที่มา

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

— Jukka K. Korpela

0

ตามวิธีการวัดข้อความและสคริปต์จาก Lalit Patel ฉันได้สร้างbookmarkletsที่สามารถเดาแบบอักษรที่ใช้สำหรับข้อความที่เลือกในปัจจุบัน (หรือbodyถ้าไม่มีการเลือก) ดูเหมือนว่าจะทำงานได้ดีมากสำหรับฉันในการหาตัวอักษรที่ใช้ในสแต็ก! (มันไม่สามารถบอกคุณได้ว่าsans-serifแผนที่ใดที่จริงแล้ว)

คว้าพวกเขาที่นี่: https://alanhogan.com/bookmarklets#font-stack-full

แหล่งที่มาบน GitHub

ดูเพิ่มเติม: CodePen นี้ซึ่งส่วนใหญ่ใช้รหัสเดียวกัน ทดลองใช้งานโดยเลือกย่อหน้าที่แตกต่างกันและดูตาราง / เดาการอัปเดต!

— อลันเอช
แหล่งที่มา