Sự thành công của trang web rất phụ thuộc vào giao diện. Có tổ hợp màu và theme phù hợp sẽ giữ người truy cập ở lại lâu hơn. Ngoài bảng màu và cấu trúc trang, font bạn chọn cũng đóng vai trò thiết yếu trong việc giữ chân khán giả.
Có thể bạn gặp một trang web hấp dẫn khi lướt web, và muốn biết nó dùng font gì. Với tiện ích mở rộng trực tuyến và công cụ Inspect Element tích hợp sẵn của trình duyệt, xác định font là nhanh chóng và dễ dàng.
Cách tìm font dùng công cụ Inspect Element
Trường hợp bạn không biết, công cụ Inspect Element tích hợp sẵn của trình duyệt cho phép bạn kiểm tra mã nguồn của trang web. Bạn có thể hiểu các yếu tố thiết kế của trang bằng cách xem CSS, HTML, và thông tin khác. Đó là cách tuyệt vời để lấy cảm hứng khi thiết kế trang của riêng bạn.
Quy trình xác định font dùng Inspect Element khá đơn giản, và bạn không cần kỹ năng lập trình. Công cụ này có sẵn trên tất cả trình duyệt, và mỗi trình duyệt có bố cục tương tự.
Đây là cách xác định font dùng công cụ Inspect của trình duyệt.
- Mở trang web bạn muốn dùng.
- Chọn văn bản có font bạn muốn xác định, và chuột phải vào nó.
- Nhấp vào Inspect (Kiểm tra) từ menu ngữ cảnh.
- Khi menu Inspect mở, nhấp vào tab Computed (Đã tính toán).
- Kéo xuống tìm phần Font-Family. Ở đây, bạn có thể tìm tên font và kiểu dáng, cũng như kích thước.
Các cách khác dùng công cụ Inspect
Nếu bạn muốn cách nhanh hơn tìm font trang web dùng Inspect, hãy thử cách này:
- Mở trang web bạn muốn dùng.
- Nhấn Ctrl + Shift + C (Cmd + Shift + C trên Mac).
- Di chuột qua văn bản để hiển thị kiểu font, kích thước, mã màu, và margin.
Bạn cũng có thể kiểm tra danh sách font dùng trên trang web bằng công cụ Inspect. Cách làm:
- Vào trang web.
- Mở mã nguồn bằng cách nhấn Ctrl + Shift + I (Cmd + Shift + I trên Mac).
- Nhấp tab Network (Mạng), sau đó chọn tab Font.
- Ở đây, bạn sẽ thấy danh sách tất cả font dùng trên trang web.
Để lấy danh sách tất cả font theo thời gian thực, bạn có thể phải làm mới trang web.
Cách xác định font dùng tiện ích mở rộng trình duyệt
Nếu bạn muốn cách tiện lợi hơn xác định font, bạn có thể muốn cài tiện ích mở rộng tìm font. Mặc dù có vài tiện ích mở rộng trình duyệt giúp phát hiện font trên web, hai cái phổ biến nhất là WhatFont và Font Finder.
Hãy xem quy trình xác định font dùng cả hai tiện ích.
1. WhatFont
WhatFont phổ biến cho việc phát hiện nhanh nhiều font cùng lúc. Cách dùng công cụ này:
- Khi WhatFont được bật trong trình duyệt, di chuột qua văn bản để hiển thị font.
- Khi bạn nhấp vào văn bản, cửa sổ bật lên sẽ xuất hiện với các chi tiết font còn lại, như kích thước font, màu, và kiểu dáng.
- Bên cạnh đó, bạn có thể chọn nhiều đoạn văn bản cùng lúc để so sánh font khác nhau trên cùng trang.
2. Font Finder
Font Finder cũng hiển thị chi tiết font khi bạn di chuột qua bất kỳ văn bản nào trên trang web. Tuy nhiên, nó cung cấp nhiều chi tiết kỹ thuật, nên có thể hơi rối nếu bạn không rành thiết kế web.
Cũng vậy, Font Finder phù hợp hơn cho nhà phát triển web muốn thay thế font hiện có bằng font mới theo thời gian thực. Điều này giúp dễ dàng thử font trước khi thay đổi vĩnh viễn.
Cách thử font dùng Font Finder:
- Chọn một phần văn bản từ trang web.
- Chuột phải vào nó và chọn Font Finder từ menu ngữ cảnh.
- Chọn Thay thế font bằng (Replace font with) và nhập tên font. Hãy thêm Calibri và xem nó thay đổi font trong bản xem trước như thế nào.
- Nếu bạn muốn đặt lại font, làm mới trang.
Kiểm tra font trong hình ảnh thì sao?
Nếu bạn muốn xác định font trong hình ảnh, tiện ích mở rộng trình duyệt và công cụ Inspect có thể không giúp. Tuy nhiên, bạn có thể thử công cụ kiểm tra hình ảnh trực tuyến như WhatFontIs, FontSquirrel, Fontspring, WhatTheFont, và nhiều cái khác.
Quy trình xác định font từ hình ảnh phần lớn giống nhau trong tất cả công cụ. Hãy thử xác định font trong hình ảnh dùng WhatTheFont.
- Nếu chưa có, tải xuống hình ảnh bạn muốn dùng.
- Nhập hình ảnh vào WhatTheFont.
- WhatTheFont sẽ tự động phát hiện văn bản trong hình ảnh. Thu nhỏ hoặc phóng to khung cắt để bao quanh font bạn muốn xác định. Nhấp nút mũi tên khi xong.
- WhatTheFont sẽ khớp font trong hình ảnh với font trong thư viện, và hiển thị font liên quan gần.
- Nếu không tìm thấy khớp tốt ngay, bạn có thể tiếp tục nhấp Hiển thị thêm kết quả (Show more results) để xem thêm font liên quan.
Phát hiện font từ web và dùng cho thiết kế của bạn
Font đóng vai trò quan trọng trong thành công của trang web hoặc thiết kế đồ họa. Nếu bạn tình cờ gặp font hấp dẫn khi lướt web, bạn có thể dễ dàng phát hiện nó dùng các phương pháp trên.