Một trang web điển hình thường bao gồm một số phần tử khác nhau với hầu hết chúng được mã hóa bằng các màu khác nhau và được viết bằng các phông chữ và kiểu dáng khác nhau. Đôi khi, chúng ta bắt gặp các trang web được thiết kế đẹp mắt đến mức khiến chúng ta muốn tìm hiểu sâu hơn về các thuộc tính của chúng; có lẽ là một chủ đề rất thanh lịch hoặc một phông chữ đẹp, chuyên nghiệp.

Những người biết cách sử dụng phông chữ và bị cuốn hút bởi chúng thường sử dụng các công cụ nhận dạng phông chữ trực tuyến miễn phí^{(free online font identifier tools)} để giúp khám phá phông chữ trên web. Các công cụ trực tuyến này yêu cầu bạn nhập URL hoặc tải lên hình ảnh có phông chữ được giới thiệu, sau đó sẽ được kiểm tra. Trong trường hợp bạn không muốn trải qua những rắc rối khi học cách sử dụng một công cụ mới, bài đăng này là dành cho bạn. Hôm nay, chúng ta sẽ thảo luận về cách người dùng có thể xác định phông chữ mà một trang web cụ thể đang sử dụng mà không cần sử dụng tiện ích mở rộng trình duyệt, ứng dụng hoặc bất kỳ công cụ trực tuyến nào.

Quy trình mà chúng ta sẽ thảo luận trong bài viết này sẽ xoay quanh một cài đặt mà hầu hết các trình duyệt web cung cấp, đó là ' Công cụ dành cho nhà phát triển^{(Developer Tools)} ' hay cụ thể là một tùy chọn có tên là Kiểm tra phần tử^{(Inspect Element)} . Ở đây, chúng ta sẽ thảo luận về cách có thể xác định phông chữ trong hai trình duyệt - Chrome , Edge và Firefox .

Xác định^(Identify) phông chữ trên trang web bằng cách sử dụng Kiểm tra phần tử^{(Inspect Element)} trong Firefox

Truy cập trang web của phông chữ mà bạn muốn xác định và nhấp chuột phải vào văn bản được viết bằng phông chữ mà bạn quan tâm.

Từ danh sách các tùy chọn hiển thị (menu ngữ cảnh), hãy nhấp vào Kiểm tra phần tử^{(Inspect Element)} . Làm^(Doing) như vậy sẽ mở Công cụ dành cho nhà phát triển^{(Developer Tools)} ở cuối trang.

Ở góc dưới cùng bên phải của phần Công cụ phát triển^{(Development Tools)} , bạn sẽ tìm thấy một tiêu đề phụ có tên là Phông chữ^(Fonts) , hãy nhấp vào nó.

Sau đó, nó sẽ hiển thị cho bạn các thuộc tính của phông chữ bạn muốn xem xét như kích thước, chiều cao dòng, trọng lượng của nó, v.v. và cả phông chữ có in nghiêng hay không, mặc dù điều đó luôn rõ ràng.

Nếu bạn muốn biết thêm về phông chữ đang được sử dụng, Firefox cũng sẽ cung cấp cho bạn điều đó. Nếu bạn cuộn xuống phần phông chữ và nhấp vào 'Tất cả phông chữ trên trang', tab phông chữ sẽ mở rộng và bạn sẽ được hiển thị tất cả các phông chữ đang được sử dụng trên trang web bạn đang duyệt tại thời điểm này và cũng là nơi chúng đang được sử dụng. Không chỉ vậy, bạn còn nhận được bản xem trước về cách một phông chữ cụ thể trông như thế nào. Di chuột qua các phông chữ trong Công cụ dành cho nhà phát triển^{(Developer Tools)} sẽ đánh dấu các phần của trang web sử dụng phông chữ đó.

Xác định phông chữ bằng Công cụ dành cho nhà phát triển^{(Developer Tools)} trong Chrome

Quá trình này tương tự như mô tả ở trên. Làm theo hai bước đầu tiên như bạn đã làm với Firefox để mở Công cụ dành cho nhà phát triển^{(Developer Tools)} ở phía bên phải của trang.

Nhấp vào tiêu đề phụ 'Đã tính'.

Cuộn^(Scroll) xuống một chút và bạn sẽ tìm thấy thông tin về phông chữ mà bạn quan tâm (họ phông chữ, kích thước, v.v.)

Rất tiếc, Chrome không cung cấp cho bạn bất kỳ thông tin bổ sung nào giống như Firefox .

Xác định^(Identify) Phông chữ^(Font) nào được sử dụng bằng Công cụ dành cho nhà phát triển Edge^{(Edge Developer Tools)}

1. Mở cạnh
2. Nhấp chuột phải và chọn văn bản
3. Chọn Kiểm tra
4. Trong Công cụ dành cho nhà phát triển^{(Developer Tools)} mở ra, hãy xem trong Máy tính^(Computed)
5. Bạn sẽ thấy chi tiết về Phông chữ.

Nếu bạn không nghĩ rằng mình không thể làm việc với Công cụ dành cho nhà phát triển^{(Developer Tools)} của trình duyệt và các công cụ trực tuyến sẽ phù hợp với bạn hơn, thì có một số công cụ trong số đó hoạt động rất tốt.

Đọc tiếp theo^{(Read next)} : Cách tìm các lựa chọn thay thế miễn phí tương tự cho Phông chữ trả phí^{(find similar free alternatives to paid Fonts)} .

Identify fonts in Chrome, Edge and Firefox using Developer Tools

A typical web page genеrally consists of several different elements with most of them coded in different colorѕ and written in different fonts and styles. Sometimes, we come across web pages so beautifully designed that they mаkе υs want to delve deep into their attributes; a very elegant theme or a nice, professіonal font, perhaps.

People who know their way around fonts and are fascinated by them often use free online font identifier tools to help discover fonts on the web. These online tools require you to enter a URL or upload an image with the font showcased, which is then inspected. In case you don’t want to go through the hassle of learning to use a new tool, this post is for you. Today, we will discuss how users can identify what font a particular web page is using without using a browser extension, an application, or any online tools.

The procedure that we will be discussing in this article will revolve around a setting that most web browsers offer, namely ‘Developer Tools,’ or to be specific, an option called Inspect Element. Here, we will discuss how fonts can be identified in two browsers – Chrome, Edge and Firefox.

Identify fonts on a webpage using Inspect Element in Firefox

Visit the web page of the font of which you want to identify and right-click on the text that is written in the font you are interested in.

From the list of options that show up (the context menu), click on Inspect Element. Doing so would open the Developer Tools on the bottom of the page.

On the bottom right corner of the Development Tools section, you will find a subhead named Fonts, click on it.

It will then display for you the properties of the font you wanted to look into like its size, line height, weight, etc., and also whether or not the font is in italics or not, though that is always apparent.

If you are interested to know more about the font in use, Firefox has you covered with that too. If you scroll down the fonts section and click on ‘All fonts on the page,’ the fonts tab will expand and you will be shown all the fonts that are being used on the web page you are browsing at the moment, and also where they are being used. Not just that, but you also get a preview of how a particular font looks. Hovering your mouse over the fonts in the Developer Tools will highlight the sections of the web page that use that font.

Identify a font using Developer Tools in Chrome

The process is similar to the one described above. Follow the first two steps as you did with Firefox to open the Developer Tools on the right side of the page.

Click on the ‘Computed’ sub-head.

Scroll down a bit and you will find information about the font you’re interested in (font’s family, size, etc.)

Unfortunately, Chrome doesn’t provide you with any additional information like Firefox does.

Identify which Font is used using Edge Developer Tools

1. Open Edge
2. Right-click and select the text
3. Select Inspect
4. In the Developer Tools that open, look under Computed
5. You will see the Font details.

If you don’t think you can’t work around with browser Developer Tools and that online tools would suit you better, there are several of them that work very well.

Read next: How to find similar free alternatives to paid Fonts.

Related posts

• Cách tải xuống Font từ Website bằng Developer Tools

• Rõ ràng Site Data cho trang web cụ thể trong Chrome or Edge sử dụng Developer Tools

• Cách thay đổi Default Font trong Chrome, Edge, Firefox browser

• Vô hiệu hóa Developer Tools bằng Edge bằng Registry or Group Policy

• Hộp Fix Blurry File Open dialog trong Google Chrome and Microsoft Edge

• Block or Allow Third-Party Cookies trong Chrome, Firefox, Edge, IE, Opera

• Lazy Loading là gì? Kích hoạt hoặc vô hiệu hóa nó trong Chrome, Firefox, Edge

• Trang web này không phải là thông báo an toàn trong Edge, Chrome or Firefox

• Cách sử dụng Chrome, Edge, Firefox, Opera Trình duyệt dưới dạng Notepad

• Cách vô hiệu hóa Geolocation bằng Firefox, Chrome và Edge

• Kích hoạt DNS trên HTTPS trong Firefox, Chrome, Edge, Opera, Android, iPhone

• Xóa tất cả Saved Passwords cùng một lúc trong Chrome, Firefox, Edge

• Cách mở News and Interests links bằng Chrome or Firefox; KHÔNG Edge

• 10 Best Chrome, Edge và Firefox Tiện ích mở rộng để lưu trang để đọc sau

• Làm thế nào để làm cho Flash work trong Chrome, Edge, Firefox NOW

• Đóng tất cả đã mở browser tabs cùng một lúc trong Chrome, Edge hoặc Firefox

• Kích hoạt Adobe Flash Player trong Chrome, Edge, Firefox, IE, Opera

• Web Cache Viewer miễn phí cho Chrome, Firefox and Edge browsers

• Làm thế nào để thay đổi default browser: Chrome, Firefox, Edge trên Windows 10

• Vô hiệu hóa hình ảnh trong Chrome, Firefox, Edge, Internet Explorer trong khi trình duyệt