Cách tìm, kiểm tra Font chữ trên Website bằng Source HTML

Nếu bạn bị hấp dẫn bởi một font chữ trên một website bất kì và muốn tìm cách tải về cho bằng được nhưng không biết làm sao? Hôm nay, Sforum.vn sẽ hướng dẫn bạn cách tìm font chữ trên website bằng cách view source HTML (kiểm tra phần tử của trình duyệt) cũng như sử dụng tiện ích mở rộng trên máy tính cực kỳ dễ dàng.

Mời bạn đọc tìm hiểu ngay trong bài viết dưới đây nhé.

Cách tìm font chữ của website bằng Source HTML

Nếu như bạn chưa biết thì cách view source HTML trên trình duyệt thường được dùng để kiểm tra mã nguồn của một trang web. Bạn có thể thấy được các dòng CSS, HTML và những thông tin khác của website đó. Đối với những bạn học lập trình, thiết kế web thì có thể học hỏi, phân tích, lấy cảm hứng thiết kế thông qua cách thức này. Để tìm font chữ trên website bằng view source html, bạn thực hiện theo 1 trong 2 cách dưới đây:

Cách 1

Bước 1: Hãy mở một trang website bạn muốn sử dụng.

Bước 2: Quét chọn vào văn bản chứa font chữ bạn muốn tìm kiếm > Nhấn chuột phải, chọn vào mục Kiểm tra để mở trình view source.

Bước 3: Trình source sẽ hiển thị ra và bạn hãy tìm tới tab Computed được viền đỏ trong hình dưới đây > Cuộn xuống và tìm thẻ font-family, như hình dưới đây sẽ là font Helvetica Neue. Bạn cũng có thể thấy được kích thước font qua thẻ font-size.

Cách 2

Bước 1: Mở trang web bạn muốn sử dụng > Nhấn tổ hợp phím Ctrl + Shift + C, trình view source sẽ hiển thị.

Bước 2: Lúc này bạn chỉ cần di chuyển chuột đến phần văn bản mà bạn muốn tìm font chữ thì nó sẽ tự động hiển thị font chữ, mã màu của font, canh lề (margin), kích thước chữ.

Tìm font chữ bằng tiện ích mở rộng

Nếu bạn không muốn tìm kiếm bằng cách view source html thì bạn cũng có thể thực hiện cách tiện lợi hơn là sử dụng tiện ích mở rộng. Dưới đây là 2 tiện ích giúp bạn phát hiện font chữ trên website khá phổ biến đó là What Font - find font và Font Finder.

What Font - find font

Bước 1: Thêm tiện ích mở rộng What Font - find font cho Chrome hoặc Cốc Cốc theo link tại đây.

Bước 2: Bạn chỉ nhấn vào biểu tượng của tiện ích này góc trên bên phải màn hình để kích hoạt > Sau đó, bạn hãy rê chuột đến bất cứ chỗ văn bản nào bạn muốn và click chuột một cái để hiển thị chi tiết tên font, kích thước...

Font Finder

Bước 1: Thêm tiện ích Font Finder cho Chorme/Cốc Cốc theo link tại đây.

Bước 2: Nhấn vào biểu tượng của tiện ích để bật tính năng tìm kiếm.

Sau đó rê chuột đến văn bản chứa font chữ cần tìm và nhấn vào đó. Lúc này trên màn hình máy tính sẽ hiển thị một bảng thông số bao gồm tên font chữ, độ đậm của font, kích thước font, màu sắc...

Tìm font chữ bằng hình ảnh với WhatTheFont

Ngoài ra các cách trên, bạn cũng có thể tìm font chữ bằng cách nhờ vào các website tìm kiếm font chữ bằng hình ảnh như WhatTheFont, WhatFontIs , FontSquirrel , Fontspring. Cách thức thực hiện trên các website trên là tương tự nhau nên mình sẽ chỉ hướng dẫn trên WhatTheFont thôi nhé!

Bước 1: Bạn hãy chụp màn hình phần văn bản chưa font chữ bạn muốn tìm kiếm.

Bước 2: Truy cập vào trang web của WhatTheFont theo link tại đây.

Bước 3: Kéo và thả trực tiếp ảnh chụp màn hình ở bước 1 vào website.

Nhấn vào mũi tên xanh như hình dưới đây để tự động nhận dạng font chữ.

Sau đó một danh sách font chữ có đường nét tương đồng, liên quan sẽ hiện ra.

Bước 4: Nếu bạn không tìm thấy kết quả ngay lập tức thì bạn có thể nhấn vào nút Show more result (Hiển thị thêm kết quả) để tìm kiếm.

Kết luận

Cuối cùng, trong những cách hướng dẫn trên thì mình thấy cách chính xác nhất là tìm font kiếm chữ bằng cách view source html và dùng tiện ích mở rộng. Còn cách cuối cùng thì bạn có thể dùng để tham khảo thêm nhiều font chữ khác liên quan làm cảm hứng. Chúc bạn thực hiện thành công nhé!