Làm thế nào tôi có thể biết những phông chữ mà một trang web đang sử dụng?

36

Làm cách nào tôi có thể tìm ra phông chữ hoặc phông chữ mà trang web đang sử dụng? Có công cụ hoặc phần mở rộng trình duyệt nào có thể giúp công việc dễ dàng hơn không?

font-identification web-fonts canonical

— Yisela
nguồn

1

Xem câu trả lời của tôi tại Stack Overflow cho xây dựng các công cụ trong Chrome và Firefox, và một tùy chọn copy-paste cho Safari: stackoverflow.com/questions/884177/...

— Arjan

Không có 10 đại diện để trả lời nên tôi làm điều đó tại đây: tính đến thời điểm này (2018.3), Fount không khả dụng và WhatFont không thể truy cập được trong cửa hàng bổ trợ Firefox; cuối cùng tôi phải nhập DevTool của Chrome / IE / FF / Opera, "Kiểu", chỉnh sửa thuộc tính để xóa từng phông chữ và xem phông chữ được áp dụng là gì. Thật đáng tiếc khi tất cả DevTools chỉ hiển thị đầy đủ các phông chữ và không phải là phông chữ thực sự được áp dụng . Ngay cả trong FF, "kết hợp tốt nhất" không phải là kết hợp tốt nhất; cửa sổ bật lên "phù hợp nhất" hiển thị trên mọi phông chữ trong ngăn xếp ........ ngớ ngẩn phải không?

— WesternGun

@WesternGun, ý của bạn là "tất cả DevTools" là gì? Firefox và Chrome hiển thị phông chữ thực sự tốt; xem ảnh chụp màn hình trong câu trả lời tôi đã liên kết trong bình luận trước đó của tôi.

— Arjan

OK tôi bỏ qua ảnh chụp màn hình @Arjan. Bây giờ nó là hiển nhiên.

— WesternGun

44

Tùy chọn 1: Sử dụng tiện ích mở rộng trình duyệt (Dễ)

Các tiện ích mở rộng như WhatFont (có sẵn cho Chrome, Firefox và Safari) giúp dễ dàng phát hiện họ phông chữ của bất kỳ văn bản nào trong trang web. Bạn chỉ cần cài đặt tiện ích mở rộng, kích hoạt nó trên một trang web và nhấp vào yếu tố bạn muốn kiểm tra. Các kết quả được hiển thị trong một hộp nổi, luôn trong bối cảnh bạn chọn.

Tùy chọn 2: Kiểm tra thủ công CSS bằng trình kiểm tra trình duyệt (Nâng cao)

Hầu hết các trình duyệt web cho phép bạn dễ dàng tìm thấy các phông chữ bằng cách sử dụng right-click→ 'Kiểm tra' hoặc 'Kiểm tra phần tử'. Nó cũng có thể được thực hiện bằng cách nhấn F12. Điều này sẽ hiển thị một danh sách các kiểu được đính kèm vào trang web mà bạn có thể khám phá để tìm các phông chữ được sử dụng trong bất kỳ yếu tố HTML nào.

Sử dụng trình kiểm tra không đơn giản như sử dụng tiện ích mở rộng, nhưng nó có một số lợi thế. Một số hiểu biết về CSS là bắt buộc, vì bạn thường sẽ cần trải qua một số kiểu để tìm ra kiểu đang được áp dụng. Theo nguyên tắc chung, các kiểu bị gạch bỏ đang bị ghi đè, vì vậy hãy luôn tìm những kiểu đang được áp dụng sau cùng.

Tất cả các kiểu từ trang được liệt kê trong tab Kiểu , nhưng nếu bạn sử dụng tab Tính toán thay thế, bạn có thể tìm thấy các thuộc tính được áp dụng tích cực cho thành phần bạn đã chọn, bao gồm cả họ phông chữ.

Cuối cùng, một cách khác để nhanh chóng kiểm tra phông chữ nào đang được sử dụng trên toàn cầu (nhưng KHÔNG phải như thế nào hoặc ở đâu) là vào 'Ứng dụng → Khung → Phông chữ' . Ở đó, bạn sẽ tìm thấy một danh sách tất cả các phông chữ được tham chiếu (không phải hệ thống).

Phương pháp thứ hai này chậm hơn, nhưng sử dụng trình kiểm tra có thể cung cấp cho bạn cái nhìn sâu sắc về cách xây dựng toàn bộ trang. Ngoài ra, rất nhiều nhà thiết kế và nhà phát triển sử dụng nó như một công cụ để kiểm tra các thay đổi trước khi thực sự viết chúng trên biểu định kiểu (vì việc thay đổi một dòng CSS trong trình kiểm tra sẽ kích hoạt bản xem trước thời gian thực trong trình duyệt).

— Yisela
nguồn

1

Di chuyển thú vị :-) một suy nghĩ - làm thế nào để biết phông chữ nào trong ngăn xếp phông chữ là phông chữ bạn thực sự nhìn thấy trên màn hình? Tôi thường làm điều đó bằng cách dùng thử và lỗi, xóa từ phông chữ đầu tiên cho đến khi nó làm cho diện mạo thay đổi, nhưng tôi chắc chắn có một cách tốt hơn. Trong WhatFont nó có phải là chữ in nghiêng? (ps chào mừng trở lại!)

— user56reinstatemonica8

@ user568458 Cảm ơn :) Tôi chắc chắn muốn thêm ảnh chụp màn hình về quá trình tìm phông chữ với thanh tra. Tôi có một thời gian khó khăn bản thân ngay cả sau nhiều năm sử dụng nó! Nhưng thành thật mà nói, tôi thực sự không có một kỹ thuật phù hợp, tôi cũng thử và sai. Trong WhatFont tôi tin rằng nó in nghiêng có nghĩa là nó không phải là một phông chữ hệ thống.

— Yisela

@Yisela vì tò mò tại sao ảnh chụp màn hình WhatFont hiển thị màu đỏ (# ea4858) của phông chữ màu xanh? Có phải chỉ là màu bạn đã lấy trước đó hoặc một lỗi? EDIT: Ồ tôi thấy có lẽ đó là màu di chuột khi bạn chọn yếu tố đó, có vẻ không lý tưởng nhưng vẫn rất tuyệt.

— DasBeasto

@DasBeasto Đúng, đó là màu di chuột! i.imgur.com/5NLjaEV.png Điểm hay, một chiến thắng khác để kiểm tra thủ công, vì nó cho phép bạn chọn các trạng thái tương tác khác nhau.

— Yisela

3

Cũng chỉ muốn thêm, Firefox (v35.0) có trình kiểm tra phần tử tốt cho phông chữ. Bạn có thể chọn tab phông chữ sẽ cho bạn biết tất cả các chi tiết về thành phần bạn đã chọn (họ phông chữ, kiểu, kiểu tệp) hoặc có thể nhấn "hiển thị tất cả các phông chữ được sử dụng trong trang" sẽ hiển thị tất cả những gì được tải xuống từ máy chủ. Sau đó, bạn có thể truy cập tab được tính toán cũng sẽ cho bạn biết những thứ như kích thước màu, v.v. mà không có sự lộn xộn và kế thừa như Chrome.

— DasBeasto

11

Trình duyệt 'phần tử kiểm tra' không hoàn hảo

Sử dụng các công cụ dành cho nhà phát triển của trình duyệt của bạn là một cách hay để xem phông chữ nào được khai báo trong CSS của trang web. Điều này không hiển thị phông chữ nào thực sự được hiển thị mặc dù, nó chỉ hiển thị ngăn xếp phông chữ đang được áp dụng, phông chữ thực tế được hiển thị có thể thay đổi tùy theo phông chữ được cài đặt, v.v.

Một công cụ hữu ích khác là Fount .

Fount sẽ cho bạn biết phông chữ web nào trong ngăn xếp phông chữ mà bạn thực sự nhìn thấy - không chỉ những gì được cho là nhìn thấy. Nó cũng sẽ cho bạn biết kích thước phông chữ, trọng lượng và kiểu dáng.

Sử dụng Fount dễ dàng như thêm dấu trang. Không cần phải cài đặt một ứng dụng hoặc bất kỳ phần mở rộng.

Sau khi thêm dấu trang:

Đi đến bất kỳ trang web và nhấp vào bookmarklet Fount.
Nhấp vào bất kỳ loại bạn muốn xác định. Nói lại.
Để tắt Fount, chỉ cần nhấp lại vào bookmarklet.

Fount hoạt động trong Safari, Chrome, Firefox và IE8 +.

— Cái
nguồn

Fount cũng tốt vì nó cũng hoạt động với IE, nhưng WhatFont có giá tốt hơn vì nó cho bạn thấy phông chữ hiển thị thực tế cũng như phông chữ được chỉ định trong đánh dấu HTML. Vì vậy, so sánh là nhanh chóng.

— Moiz Tankiwala

1

Trang web ngừng hoạt động ... không khả dụng trong năm 2018

— WesternGun

@FaithReaper trang web (và tập lệnh) vẫn hoạt động hoàn hảo với tôi

— Cai

1

Tôi vào trang web và chỉ thấy một khối màu xám bên trái, không có hướng dẫn hoặc không có gì? Tôi không thể tải lên những hình ảnh nhưng nó trông thật kỳ lạ. fount.artequalswork.com/

— WesternGun

@FaithReaper trang web sẽ trông như thế này: i.stack.imgur.com/goShP.png (Mặc dù vậy, bạn không tải lên hình ảnh, đó chỉ là một dấu trang mà bạn sử dụng để kiểm tra phông chữ được sử dụng trên các trang web trực tiếp)

— Cai

1

Tôi thích CSSViewer mở rộng trình duyệt Chrome . Bạn chỉ cần nhấp vào nó và di chuột qua phông chữ bạn muốn xác định và nó hiển thị cho bạn họ phông chữ.

— người dùng86140
nguồn

-2

Font Downloader được tạo cho các nhà thiết kế, nhà phát triển và người đánh máy. Nó cho phép người dùng phân tích thông tin phông chữ của bất kỳ yếu tố nào trên một trang, sao chép bất kỳ mẩu thông tin nào vào bảng tạm và thực hiện thay thế nội tuyến để kiểm tra bố cục mới.

Tiện ích bổ sung này là tốt nhất để tìm phông chữ và các css khác như trọng lượng phông chữ, kích thước và nhiều trang web mẫu khác.

— Khushbu Solanki
nguồn

3

Xin chào Khushbu, chào mừng bạn đến với GDSE. Bạn có thể cho chúng tôi biết những gì và nơi chúng tôi có thể "Font Downloader"? Ngoài ra, nếu bạn được liên kết với sản phẩm, bạn phải tiết lộ liên kết của mình trong câu trả lời của bạn. Xem Làm thế nào để không trở thành người gửi thư rác .

— Cai

2

Văn bản trong câu trả lời ở trên là một bản sao và dán từ chrome.google.com/webstore/detail/font-finder/ và và hoặc add0n.com/font-finder.html

— ChrisW