Necessary tools for front-end development: whatfont bookmarklet-convenient query of fonts on webpages

When we see beautiful websites, we may want to know which fonts are used for their texts. Whatfont bookmarklet helps us easily view the font of a text segment on the webpage. It is an excellent tool for front-end development.

Usage

Use Chrome to open Logging.

A button named "whatfont" appears in the favorites bar.

Open any page and click "whatfont" in the favorites bar. Place the cursor over the text on the page to obtain the text font in real time.

Click on the page to view the font details, including font-size, font-weight, line-height, and other information.

Click the ESC key to disable "whatfont ". Is it convenient?