Tiện ích để xác định phông chữ được sử dụng trên một trang web? [đóng cửa]


9

Ví dụ: Tôi thích các phông chữ được sử dụng trên trang web: NYTimes , vì vậy một cái gì đó có thể liệt kê tất cả các phông chữ được sử dụng bởi trang web sẽ rất tuyệt!

Tôi KHÔNG muốn một tiện ích xử lý hình ảnh có thể phân tích ảnh chụp màn hình hoặc một trang web sẽ đặt câu hỏi về phông chữ và thu hẹp khỏi danh sách của nó.

Một cái gì đó có thể thu thập dữ liệu trang web và liệt kê các phông chữ của nó ... Thật tuyệt nếu nó có thể che phủ các phông chữ trên các khu vực, nhưng điều đó sẽ đi quá xa, tôi đoán vậy.


@Arjan tại sao :-(? Tôi đã đề cập rõ ràng những gì tôi không tìm kiếm, đó là chủ đề của hầu hết các câu trả lời ở đó.
Lazer

Firefox đã làm điều này rất dễ dàng hiện nay, cho một trang duy nhất; xem câu trả lời của tôi cập nhật .
Arjan

Câu trả lời:


20

Có nhiều cách để thực hiện điều này. Tôi thực sự làm điều này khá nhiều, vì tôi rất thích cách CSS hoạt động, và tôi cũng chỉ thích kiểu chữ. Hai cách tôi thích làm điều này là:

  • Sử dụng "trình kiểm tra" với trình duyệt của bạn (đây là những gì bạn đang tìm kiếm!) - Tôi sử dụng Google Chrome (vì tôi thích nó), có công cụ Thanh tra tích hợp . Bạn thực sự nên thử nó. Bạn chỉ cần truy cập một trang web, nhấp chuột phải vào bất kỳ yếu tố nào bạn muốn phân tích và nhấp vào "Kiểm tra phần tử" từ menu ngữ cảnh. Trình kiểm tra hiển thị các thuộc tính động của HTML và CSS , vì vậy nếu bạn kiểm tra một phần tử văn bản, bạn sẽ thấy thuộc tính font-familycsstrong thanh tra (ở thanh bên phải), nó sẽ cho bạn biết phông chữ là gì (xem bên dưới để biết thông tin về cách diễn giải CSS này). Bạn có thể sử dụng Fireorms cho Firefox để thực hiện một cái gì đó tương tự, nhưng tôi tin rằng công cụ Google Chrome Inspector vượt trội hơn nhiều (Tôi là nhà phát triển web - Tôi sử dụng nó cho mọi thứ!).
  • Hoặc, bạn có thể xem thủ công nguồn của trang và phân tích CSS. Đây là cách thực hiện:

    1. Khi bạn ở trên trang, hãy xem nguồn. Nếu bạn đang ở trong Internet Explorer, hãy truy cập Trang -> Xem nguồn hoặc Xem -> Nguồn. Nếu bạn đang sử dụng Firefox, Chrome hoặc bất kỳ trình duyệt hiện đại nào khác, hãy nhấn Ctrl + U (hoặc Apple + U, tùy thuộc vào hệ điều hành của bạn).

    2. Trong mã HTML, tìm kiếm nội dung văn bản mà bạn đang cố gắng phân tích. Bạn nên tìm một số thẻ có chứa văn bản và chúng có thể có các phông chữ được mã hóa cứng vào HTML (sử dụng <font>thẻ hoặc trong stylethuộc tính của một <p>hoặc <div>bao vây) hoặc nó có thể tham chiếu một số CSS (tìm kiếm một classhoặc idthuộc tính và viết chúng xuống

    3. Nếu đó là cái sau (nó tham chiếu một số CSS), hãy đi đến đầu HTML và tìm các <link>thẻ trong <head>trang. Nếu liên kết đang tham chiếu biểu định kiểu, bạn sẽ thấy nó - tất cả những gì bạn phải làm bây giờ là vào biểu định kiểu CSS đó và tìm kiếm các định danh lớp hoặc id mà bạn đã viết. Ở đâu đó, bạn sẽ tìm thấy một font-familyproerpty tương ứng (đừng quên, bạn cũng có thể đặt phông chữ trên toàn cầu trên trang web và điều này sẽ nằm dưới <body>thẻ hoặc thứ gì khác. Đây là lý do tại sao bạn nên sử dụng công cụ kiểm tra, vì khó khăn này đã được khắc phục ).

Làm thế nào để giải thích font-familycss:

Các font-familytài sản sẽ xác định những phông chữ là gì. Trong thuộc tính này, phông chữ sẽ được phân tách bằng dấu phẩy . Khi kết xuất trang, một trình duyệt sẽ xem qua danh sách này và sử dụng phông chữ đầu tiên trong đó trên máy tính . Trong nhiều trường hợp, cũng có một loại phông chữ ở cuối thuộc tính này, đây chỉ là một "trường hợp chính" để phông chữ mặc định cho thể loại đó được sử dụng nếu không có loại nào khác.

Một ví dụ: Hãy nói rằng đây là một số css cho một <p>bao vây.

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

Tại đây, trình duyệt trước tiên sẽ thử sử dụng Calibri, nếu phông chữ có sẵn. Nếu không, nó sử dụng Comic Sans MS hoặc Georgia hoặc chỉ phông chữ sans-serif mặc định nếu những cái khác không có sẵn.

Đây là cách bạn có thể tìm ra những phông chữ đang được sử dụng. Tôi chưa tìm thấy bất kỳ công cụ hữu ích và được xây dựng tốt nào trực quan hóa CSS theo cách rất hay, nhưng tôi nghĩ rằng tùy chọn Inspector sẽ phù hợp với bạn (nó không quá khó hiểu!). Tôi nghĩ rằng đây là con đường để đi.

Ví dụ về cách tìm phông chữ NYTimes bằng công cụ Inspector:

Tôi sẽ hướng dẫn bạn cách tìm phông chữ cho phần thân văn bản chính của bài viết NYTimes với Google Chrome.

  1. Truy cập một bài viết trên NYTimes.com, nhấp chuột phải vào một yếu tố văn bản bạn muốn tìm phông chữ và nhấn Inspect Element .

    Khai trương Thanh tra

  2. Nhìn vào thanh bên phải. Trong danh sách thả xuống Kiểu tính toán , bạn sẽ thấy các thuộc tính CSS cho phần tử này. Tuy nhiên, như bạn có thể thấy, hiện tại không có thuộc tính họ phông chữ, điều này có nghĩa là các phông chữ được xác định trên toàn cầu, không chỉ cho phần tử cụ thể này. Tuy nhiên, có một cách để khắc phục điều này!

    Xem các thuộc tính yếu tố

  3. Đây là những gì bạn làm: Chọn nút radio bên cạnh "Hiển thị kế thừa".

    Chọn chương trình được kế thừa

  4. Rất nhiều thuộc tính toàn cầu khác sẽ xuất hiện trong "Kiểu tính toán".

    Nhiều tài sản toàn cầu xuất hiện

  5. Cuộn xuống trong danh sách để "họ phông chữ". Nó nên có màu xám, nghĩa là nó là một tài sản toàn cầu được thừa hưởng. Tại đây, bạn có thể thấy các phông chữ được sử dụng! Ta-da!

    Dưới đây là các phông chữ!


Tôi sẽ thêm một lời giải thích ví dụ cho NYTimes ngay bây giờ.
Maxim Zaslavsky

cảm ơn ppl Tôi yêu nơi này - www.superuser.com, thậm chí nhiều hơn bây giờ :)
Lazer

@ Maximz2005, đối với một số lựa chọn Tôi không nhận được "thả xuống Kiểu tính toán". Tôi chỉ nhận được một thả xuống Style trống. Tại sao vậy?
Lazer

1
Vì thanh tra thực sự là thanh tra WebKit, tôi cho rằng phiên bản beta sau này sẽ bao gồm cả phiên bản mới hơn của WebKit? Tất nhiên, một phiên bản mới hơn có thể hiển thị các lỗi mới, nhưng tôi tự hỏi liệu có khả năng bạn vừa gặp phải một lỗi không. Có cách nào để hiển thị phiên bản WebKit được sử dụng trong Chrome không?
Arjan

1
của tôi là WebKit 532.0 @Maxim Z. Tôi đã dùng thử chrome của bạn tôi (phiên bản 3.s Something). Nó hoạt động hoàn hảo ở đó. Cuối cùng tôi có thể phát hiện phông chữ theo cách tôi muốn. Bây giờ tôi đã hiểu tính năng "kiểm tra phần tử" thực sự tuyệt vời như thế nào.
Lazer

7

Có hai điều khác nhau:

  1. Phông chữ nào thực sự được sử dụng (bởi trình duyệt / hệ điều hành).
  2. Phông chữ nào được yêu cầu (bởi người tạo trang web).

1. Phông chữ (dự phòng) nào thực sự được sử dụng

Để biết chắc chắn phông chữ nào được sử dụng trong một trình duyệt cụ thể trên máy tính / hệ điều hành của bạn, ngày nay Firefox và Chrome có các công cụ tích hợp sẵn cho việc đó. Giống như Trình kiểm tra trang Firefox có Chế độ xem Phông chữ :

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

Để biết thêm chi tiết, hãy xem 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? trên Stack Overflow. Điều đó bao gồm:

  • Văn bản có thể bao gồm các ký tự Unicode không có trong phông chữ được xác định trong CSS, vì vậy nhiều phông chữ có thể được sử dụng trong một yếu tố.
  • Không phải mỗi trình duyệt trên cùng một máy có thể sử dụng cùng một loại phông chữ (như TrueType, Apple Advanced Technology, Microsoft OpenType, OpenType PostScript) và do đó có thể sử dụng các phông chữ khác nhau. Vì vậy, bạn có thể cần xác định phông chữ nào được sử dụng trong các trình duyệt khác.

2. Phông chữ nào được yêu cầu

Để cho biết phông chữ nào được yêu cầu (bởi người tạo trang web), các công cụ như Trình kiểm tra trang Firefox tích hợp hoặc tiện ích mở rộng Firebird của nó giúp kiểm tra các quy tắc CSS. Các công cụ như vậy không cho bạn biết phông chữ nào thực sự được sử dụng , nhưng không hiển thị phông chữ nào được yêu cầu cho một vùng cụ thể hoặc thậm chí cho một từ cụ thể, được cung cấp cho biểu định kiểu CSS:

CSS trong Fireorms

Trên đây cho thấy Fireorms. Đầu tiên chọn "Hiển thị kiểu tính toán" trong menu Kiểu bên phải. Tiếp theo, nhấp vào nút mũi tên ở bên trái. Và sau đó chỉ cần nhấp vào văn bản quan tâm của bạn. Điều này sẽ cập nhật thông tin bảng kiểu CSS ở bên phải. Xem các tính năng để tìm hiểu về các chức năng CSS.

Một số Fireorms Lite cũng có sẵn cho các trình duyệt khác, nhưng tôi không bao giờ sử dụng nó.

Trình kiểm tra web trong Safari và Công cụ dành cho nhà phát triển trong Chrome có các tùy chọn tương tự. (Trong Safari, bật Trình kiểm tra web thông qua các tùy chọn: Hiển thị menu Phát triển trong thanh menu .) Internet Explorer có các công cụ F12 .

Giống như e-t172 đã lưu ý : Thanh công cụ dành cho nhà phát triển web cho Firefox cũng có thể hiển thị thông tin này. Tuy nhiên, CSS »Xem thông tin kiểu không hiển thị cho bạn bất kỳ kiểu" kế thừa "(" xếp tầng ") nào, mà chỉ thông tin dành riêng cho khu vực bạn nhấp. Thay vào đó, để có được một loại lớp phủ và để thực sự xem thông tin phông chữ, bạn có thể sử dụng Thông tin »Hiển thị thông tin thành phần thay thế. Điều đó sẽ hiển thị chi tiết bất cứ khi nào bạn nhấp vào trang ở đâu đó.


+1 Để có câu trả lời chi tiết hơn nhiều thì tôi.
BinaryMisfit

Làm thế nào bạn có được những ảnh chụp màn hình mờ dần? Trông giống như Mac, bất kỳ cơ hội nào để có được hiệu ứng tương tự trên Vista hoặc XP?
Lazer

@Lazer, Skitch trên máy Mac (nhưng bóng là loại tiêu chuẩn và loại bắt buộc, vì OS X có viền cửa sổ rất mỏng, nếu có). Không biết làm thế nào để hoàn thành nó trên Windows.
Arjan

4

Nếu bạn sử dụng Firefox thì có Trình bổ trợ Trình tìm Phông chữ . Về cơ bản, nó thực hiện những gì Maxim Z. đã mô tả trong câu trả lời của mình , nhưng tự động, vì vậy nó thực sự dễ sử dụng ..


Font Finder chính xác là những gì tôi đang tìm kiếm. Nếu chỉ có phần mở rộng tương tự cho Chrome.
kangax

@ Khangax, ngày nay có; xem câu trả lời của Alec
Arjan

Và @ Khangax, ngày nay Firefox và Chrome có các công cụ tích hợp để xác định phông chữ thực. Không cần đoán nữa.
Arjan

4

Đây là giải pháp tốt nhất mà tôi đã gặp. Đó là bookmarklet / tiện ích mở rộng 99% sẽ cho bạn biết chắc chắn phông chữ nào đang được sử dụng, bằng cách so sánh các pixel của văn bản được hiển thị với các phông chữ có sẵn, bao gồm phông chữ TypeKit và Google Font API.

Công cụ WhatFont

nhập mô tả hình ảnh ở đây

Kiểm tra nó ra.


Đẹp, rất đẹp, nhưng tôi không nghĩ rằng nó thực sự so sánh các pixel (ngày nay)? Khi CSS vừa nói font-family: sans-serifthì đó cũng là những gì đã báo cáo, nhưng bản thân nó không phải là một phông chữ. Khi sử dụng, font-family: someUnknownFonttôi nhận được (default font)kết quả, sau đó thực sự là Times trên máy Mac của tôi. (Đã thử nghiệm với bookmarklet, sử dụng JS Bin này ; ảnh chụp màn hình .) Tuy nhiên, một lần nữa: tốt đẹp!
Arjan

@Arjun Tôi đã kiểm tra nó một số chi tiết một vài tháng trước, vì vậy tôi sẽ giải thích cũng như tôi có thể nhớ. Dưới mui xe, nó làm hai việc. Nó sử dụng window.getComputedStyleđể có được họ phông chữ tính toán. Sau đó, nó lặp lại ngăn xếp này, so sánh các pixel của mỗi phông chữ với các pixel được hiển thị. Trận đấu đầu tiên là trận đấu được hiển thị bằng chữ in nghiêng trong cửa sổ bật lên, phần còn lại được hiển thị bình thường. Nếu không có trận đấu, nó sẽ hiển thị (default font). Lý do bạn nhìn thấy sans-seriflà vì nó khớp chính xác với sans-serifphông chữ, tuy nhiên hiện tại nó không phân biệt được nữa.
Tối đa

Firefox là người bạn tốt nhất mới của tôi cho việc này; xem câu trả lời cập nhật của tôi :-)
Arjan

3

Tôi không biết về bất kỳ phần mềm nào. Tôi vừa sử dụng Internet Explorer và thấy rằng phông chữ được sử dụng là:

font-family: georgia, "times new roman", times, serif

Đây là phông chữ chính. Tìm kiếm biểu định kiểu cho bất cứ điều gì với phông chữ gia đình sẽ cung cấp phần còn lại.

Quá trình:

  • Nhấp chuột phải vào Trang chủ
  • Tìm kiếm dòng rel = biểu định kiểu và URL biểu định kiểu đính kèm
  • Sao chép và dán vào trình duyệt và tải xuống tệp css.
  • Mở trong trình soạn thảo văn bản.

Nếu bạn tìm kiếm phông chữ trong hình ảnh sẽ không được xác định bên ngoài hình ảnh.

Có tôi đã vô cùng buồn chán. Đó là chiều thứ sáu sau tất cả. Tôi đã không đăng liên kết kể từ khi họ cập nhật biểu định kiểu.


Uhuh, Fireorms trong Firefox hoặc Web Inspector trong Safari ...?
Arjan

1
Như tôi đã nói. Tôi đã chán nản. Thay đổi cho hương vị Trình duyệt của bạn và xem nguồn. Có những công cụ khác, nhưng giữ cho nó đơn giản không phải là cách tiếp cận sai.
BinaryMisfit

Tốt cho thực tế một mình rằng nó dạy cho người dùng một cái gì đó ngoài việc luôn dựa vào Firefox.
ngẫu nhiên

Theo Wikipedia, cả hai georgiatimes new romanlà kiểu chữ. Vì vậy, kết quả có ý nghĩa gì? Một sự kết hợp của hai kiểu chữ đó?
Lazer

1

Bạn có thể sử dụng tiện ích mở rộng Firefox dành cho nhà phát triển web để xem tất cả các kiểu được sử dụng bởi một phần cụ thể của trang web. Sử dụng menu CSS, Xem thông tin kiểu. Sau đó nhấp vào văn bản bạn muốn phân tích và tìm kiếm thuộc tính "họ phông chữ" trong kết quả.


Thông tin »Phần tử hiển thị Thông tin hoạt động tốt hơn (nó cũng sẽ hiển thị các kiểu được kế thừa và bạn không cần phải tự tìm kiếm).
Arjan

1

Trái với những gì nhiều người đã nói, KHÔNG phải lúc nào cũng chỉ là xem nguồn, v.v. - phụ thuộc vào việc CSS có trong tài liệu hay trong tệp css bên ngoài hay không. Nếu nó ở bên ngoài, bạn không thể xem nguồn và tìm thẻ họ phông chữ vì nó không thực sự có trong tệp.

Người đăng bài khuyên sử dụng Google Chrome thực sự đã đưa ra một mẹo rất hay - tôi đã học được điều gì đó ở đây và muốn thêm một mẹo bổ sung. Trong các công cụ dành cho nhà phát triển xuất hiện trong Chrome, bạn MIGHT phải nhấp vào "Kiểu tính toán", sau đó nhấp vào hộp chọn "Hiển thị được kế thừa" rồi cuộn xuống trước khi bạn tìm thấy - đây là một ví dụ cực đoan, nhưng nơi nó hiển thị sẽ phụ thuộc vào Làm thế nào trang đã được cấu trúc.



-1

nếu đó không phải là một css nội tuyến, chỉ cần mở trang trên chế độ xem nguồn. Sao chép địa chỉ css như "/theme/01.css" dán vào url của trình duyệt. Sao chép dán trả lại trong trình soạn thảo văn bản hoặc trình soạn thảo css. Sử dụng tìm để phông chữ tốt hoặc phông chữ gia đình được thực hiện. Họ phông chữ được liệt kê sử dụng để hiển thị phông chữ trang cho kích thước và các thuộc tính khác như in đậm, in nghiêng, v.v.

Cảm ơn doronto

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.