Làm cách nào tôi có thể xác định phông chữ nào trình duyệt đang thực sự sử dụng để hiển thị một số văn bản?


175

CSS của tôi chỉ định " font-family: Helvetica, Arial, sans-serif;" cho toàn bộ trang. Có vẻ như Verdana đang được sử dụng thay thế trên một số phần. Tôi muốn có thể xác minh điều này.

Tôi đã thử sao chép và dán từ trình duyệt của mình vào Word, nhưng nó không giữ được phông chữ.

Có cách nào để xác định phông chữ nào đang thực sự được sử dụng cho một phần của văn bản không?

Fireorms sẽ cung cấp cho tôi danh sách các phông chữ như trên [1], nhưng tôi không thấy cách nào để xác định một trong những phông chữ đang được sử dụng.

  1. Hóa ra danh sách sai đã được sử dụng, điều này đã giải quyết vấn đề Verdana ban đầu của tôi. Nhưng tôi vẫn tò mò liệu có cách nào để xác định phông chữ hiển thị thực tế không.


Font Downloader và WhatFont được mô tả trong các câu trả lời dưới đây vẫn là những cách rất thô sơ để phát hiện phông chữ được sử dụng. Cả hai đều chỉ sai "Quanttrocentro Sans" (phông chữ chính) khi tôi chọn một ؋biểu tượng Aghani không có sẵn trong phông chữ này.
Câu hỏi tràn

@QuestionOverflow, ngày nay Firefox và Chrome có các công cụ tích hợp để xác định phông chữ. Họ sẽ hiển thị phông chữ cho mỗi glyph, do đó sẽ cho bạn thấy phông chữ nào được sử dụng cho điều đó.
Arjan

@Arjan: đây có còn là trường hợp vào năm 2020 không?
nuốt chửng elysium

@devouredelysium, bạn có thấy câu trả lời của tôi không? Chỉ cần chọn một glyph duy nhất để xem phông chữ nào được sử dụng.
Arjan

Câu trả lời:


50

Theo câu trả lời của Wilfred Hughes , Firefox hiện hỗ trợ điều này. Bài viết này có nhiều chi tiết hơn .

Câu trả lời ban đầu này đã tham chiếu plugin "Trình tìm phông chữ", nhưng chỉ vì nó có từ 4 năm trước. Việc các câu trả lời cũ tồn tại như thế này và cộng đồng không thể cập nhật chúng là một trong số ít những thất bại còn lại của Stack Overflow.


7
Không có lý do để sử dụng ngay bây giờ vì Công cụ của Firefox> Nhà phát triển web> Người kiểm tra> Phông chữ cho bạn biết (câu trả lời của Wilfred Hughes)
trượt tuyết

1
Thật không may, Firefox 47 không còn có tab Phông chữ được tham chiếu trong blog này mà bạn đã liên kết tới: Bài viết này có nhiều chi tiết hơn
Zabba

3
"Bắt đầu trong Firefox 47, chế độ xem Phông chữ bị tắt theo mặc định. Chúng tôi đang làm việc với một sự thay thế đầy đủ tính năng hơn. Hiện tại, nếu bạn muốn xem chế độ xem Phông chữ, hãy truy cập about: config, tìm các devtools tùy chọn. fontinspector.enables và đặt nó thành true. " Xem developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/ .
Daniel Le

1
Rõ ràng, thiết lập devtools.fontinspector.enabledchỉ cần thiết trong Firefox 47: "Trong Firefox 47 chỉ , quan điểm Fonts bị tắt theo mặc định Nếu bạn muốn xem các Fonts xem trong Firefox 47, truy cập. about:config, Tìm ra sở thích devtools.fontinspector.enabled, và đặt nó vào truetrước và sau. Firefox 47, chế độ xem Phông chữ được bật theo mặc định. " , @DanielLe.
Arjan

1
@DanielLe, tất nhiên tôi hiểu nó là chính xác tại thời điểm bạn sao chép văn bản :-)
Arjan

151

Ngày nay Chrome và Firefox có các công cụ tích hợp sẵn cho việc đó, nhưng Safari cần bạn sao chép một số văn bản và điều tra điều đó.

Đầu tiên, chọn một số văn bản. Trong Firefox, Trình kiểm tra trang có chế độ xem Phông chữ :

Chế độ xem phông chữ của Firefox

Điều này cũng sẽ cho bạn biết nếu các phông chữ được tải xuống và kiểu nào được sử dụng, chẳng hạn như Thông thường, ExtraLight, Italic, BoldItalic và tất cả.

Đối với Chrome, hãy truy cập "Các phần tử" của DevTools, chuyển đến tab "Đã tính" và cuộn xuống phần được gọi là "Phông chữ được kết xuất". Không giống như Firefox, điều này chỉ hiển thị tên phông chữ cơ sở, không phải bất kỳ kiểu cụ thể nào mà nó có thể đang sử dụng:

Thanh tra web Chrome

Các ảnh chụp màn hình ở trên cho thấy nhiều phông chữ có thể được hiển thị cho văn bản Unicode. Chrome cho bạn biết 6 glyphes ("Pekka" và không gian) đang sử dụng "Arial" và một ("") đang sử dụng "Apple SD Gothic Neo":

Arial - Tệp cục bộ (6 glyphs)
Apple SD Gothic Neo - Tệp cục bộ (1 glyph)

CSS thực tế xác định:

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

Nhưng những phông chữ đó thường không bao gồm nhiều ký tự đặc biệt. Vì thông tin phông chữ hoạt động trên mỗi phần tử HTML, trong đó văn bản Unicode trong một phần tử thực sự có thể sử dụng nhiều phông chữ, nó cũng hiển thị nhiều phông chữ. Khi nghi ngờ, chỉ cần nhấp đúp vào văn bản trong ngăn HTML và loại bỏ văn bản bạn không quan tâm. Sau đó, khi chọn lại thành phần xung quanh, bạn sẽ chỉ thấy một tùy chọn. Trong trường hợp này, nó sẽ cho bạn biết rằng cả hai trình duyệt đã sử dụng "Apple SD Gothic Neo chính quy" cho ký tự "".

Thật không may, các trình duyệt khác nhau (và thậm chí các phiên bản khác nhau của một trình duyệt) trên cùng một máy có thể sử dụng các phông chữ khác nhau, do các loại phông chữ được trình duyệt hỗ trợ / ưa thích. Ví dụ, trên máy Mac, Safari có thể thích Công nghệ nâng cao của Apple trong khi Firefox hỗ trợ Microsoft OpenType (có thể gây ra sự cố cho tiếng Ả Rập sau khi cài đặt Microsoft Office trên máy Mac). Hoặc đối với ký tự "" trong ảnh chụp màn hình ở trên, Chrome và Firefox trên máy Mac của tôi hiện nay thích "Apple SD Gothic Neo" (là OpenType PostScript) nhưng các phiên bản cũ hơn của Firefox đã sử dụng "AppleGothic chính quy" thay vào đó (là phông chữ TrueType) .

Đối với các trình duyệt không có chế độ xem phông chữ tương tự, chỉ cần sao chép và dán một đoạn văn bản vào trình xử lý văn bản hoặc trình soạn thảo Rich Text, chọn một số văn bản cụ thể và xem tên nào hiển thị trong danh sách thả xuống phông chữ. Trên máy Mac của tôi, tính năng này không hoạt động khi dán từ Firefox (trong đó "Apple SD Gothic Neo" của Firefox được chuyển đổi thành "AppleMyungjo" khi dán), nhưng hoạt động tốt cho Safari và Chrome:

Văn bản được dán từ trình duyệt vào trình soạn thảo văn bản phong phú


1
Bạn có biết Safari có plugin hay thứ gì không?
Andry

4
Trong Chrome 47, đảm bảo bạn cuộn xuống cuối phần Tính toán. Mở rộng font-familythuộc tính khi nó xuất hiện (theo thứ tự bảng chữ cái) sẽ không hiển thị phông chữ nào đang được tải. Thông tin này xuất hiện ở phía dưới.
Merchako

1
@Merchako, Điều gì xảy ra khi phông chữ được tính toán của bạn là một phông chữ chung chung như "serif" và "sans-serif"? Sau đó, làm thế nào để bạn có được phông chữ thực tế ?
Pacerier

2
@Pacerier, trong Chrome chỉ cần cuộn xuống tất cả các cách trong tab Tính toán; trong Firefox thấy tab riêng.
Arjan

1
@TMG, tôi có thể tưởng tượng phông chữ web có thể không cần bí danh, nhưng có thể tham khảo trực tiếp một số URL. Đây có phải là một trang web công cộng mà chúng ta có thể nhìn vào? Nếu không, Firefox hiển thị cái gì?
Arjan


30

WhatFont là một tiện ích mở rộng của Chrome sẽ cho bạn biết cụ thể phông chữ nào trong ngăn xếp phông chữ đang được tải.


6
Đối với tôi nó nói phông chữ nào được khai báo, nhưng không phải phông chữ nào thực sự được sử dụng.
panzi

3
Theo bài viết này ( Updates.html5rocks.com/2013/09/ Khăn ), Dev Tools hiện có thể cho bạn biết phông chữ thực sự được hiển thị là gì.
vào

WhatFont cố gắng phát hiện phông chữ được hiển thị nhưng dường như không thực hiện thành công github.com/chengyin/WhatFont-Bookmarklet/issues/13
Chris Marisic

7

Đối với các phiên bản hiện tại của Firefox (kể từ phiên bản 7), có một tiện ích bổ sung có tên là "fontinfo" sẽ báo cáo phông chữ thực tế đang được sử dụng (chứ không phải là những gì thuộc tính họ phông chữ CSS nói), có tính đến các trường hợp trình duyệt rơi vào một phông chữ khác nhau vì họ phông chữ được yêu cầu không có sẵn hoặc không hỗ trợ các ký tự được sử dụng trong văn bản.


Đến bây giờ, đây là câu trả lời hay nhất
Ingo Kegel

1

Bạn có thể thử kiểm tra phần cụ thể đó với Fireorms cho Firefox. Nó sẽ cung cấp cho bạn tất cả các thuộc tính chính xác.


Điều đó vẫn đưa cho tôi danh sách, không phải danh sách cụ thể mà nó đang sử dụng ... Nhưng trong lần kiểm tra thứ hai, Verdana bằng cách nào đó đã lọt vào danh sách họ phông chữ, đó sẽ là nguyên nhân của vấn đề ban đầu của tôi. Vì vậy, cảm ơn.
lavaturtle

1
Fireorms cũng sẽ cho bạn biết các quy tắc nào được kích hoạt để cung cấp cho phần tử phông chữ đó - rất hữu ích để tìm ra lỗi CSS của bạn.
RichieHulum

Safari 4 Beta cũng có WebInspector (có thể là một con
bọ lửa

1
Tôi nghĩ bạn sẽ luôn có được danh sách đầy đủ, bất cứ công cụ nào bạn sử dụng. Phông chữ được sử dụng là phông chữ đầu tiên trong danh sách được cài đặt trên máy tính của bạn.
jeroen

2
Firebird hiện tại (1.11.4, cũng có thể sớm hơn) làm nổi bật phông chữ hiện tại màu xanh lam.
Đánh dấu Vrabel

1

Plugin "Font Downloader" được đề cập bởi jeremy dường như không hoạt động ở đây, đưa ra phông chữ đầu tiên của danh sách CSS bất kể phông chữ được hiển thị thực sự (Firefox 4.0rc1 trên Linux). Tuy nhiên, các plugin sau đây cung cấp cho bạn phông chữ "chính xác".

Phông chữ bối cảnh


Thật không may, ngay cả Phông chữ ngữ cảnh chỉ hiển thị họ CSS được tính toán, có thể là serif hoặc sans-serif chẳng hạn. Ngoài ra, nếu một số ký tự không có trong phông chữ được tính toán và trình duyệt chọn nó từ một phông chữ khác, Phông chữ bối cảnh vẫn hiển thị họ phông chữ được tính toán, không phải phông chữ thực.
Jukka K. Korpela

0

Dựa trên cách tiếp cận đo lường văn bản và tập lệnh từ Lalit Patel, tôi đã tạo ra các bookmarklet có thể đoán phông chữ đang được sử dụng cho văn bản hiện được chọn (hoặc body, nếu không có gì được chọn). Nó dường như hoạt động rất tốt đối với tôi để tìm ra phông chữ nào trong ngăn xếp được sử dụng! (Nó không thể cho bạn biết những gìsans-serif thực sự ánh xạ tới.)

Lấy chúng ở đây: https://alanhogan.com/bookmarklets#font-stack-full

Nguồn là trên GitHub .

Xem thêm: CodePen này , sử dụng hầu hết cùng một mã. Hãy thử bằng cách chọn các đoạn khác nhau và xem cập nhật bảng / đoán!

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.