WhatFont-Bookmarklet 安装和配置指南

1. 项目基础介绍和主要编程语言

项目基础介绍

WhatFont-Bookmarklet 是一个用于检测网页上元素所使用的字体的 JavaScript 脚本。它可以帮助开发者快速识别网页上使用的字体，无需查看源代码或开发者工具。该项目的主要功能是通过一个书签工具（Bookmarklet）来实现字体检测。

主要编程语言

该项目主要使用 JavaScript 编写，同时也包含少量的 CSS 用于样式控制。

2. 项目使用的关键技术和框架

关键技术

• JavaScript: 用于实现字体检测的核心逻辑。
• jQuery: 项目依赖于 jQuery 库，用于简化 DOM 操作和事件处理。
• CSS: 用于样式控制，确保字体检测工具的界面美观。

框架

该项目主要依赖于 jQuery 框架，用于简化 JavaScript 代码的编写和 DOM 操作。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

在开始安装和配置 WhatFont-Bookmarklet 之前，请确保你已经具备以下条件：

• 一个现代的网页浏览器（如 Chrome、Firefox 或 Safari）。
• 基本的 JavaScript 和 HTML 知识。

详细安装步骤

步骤 1：克隆项目仓库

首先，你需要将 WhatFont-Bookmarklet 项目克隆到本地。打开终端并运行以下命令：

git clone https://github.com/chengyin/WhatFont-Bookmarklet.git

步骤 2：打开项目目录

克隆完成后，进入项目目录：

cd WhatFont-Bookmarklet

步骤 3：查看项目文件

在项目目录中，你会看到以下主要文件：

• whatfont_core.js: 核心 JavaScript 文件，包含字体检测的逻辑。
• README.md: 项目说明文件，包含项目的详细介绍和使用方法。
• LICENSE: 项目许可证文件。

步骤 4：创建书签工具

为了使用 WhatFont-Bookmarklet，你需要创建一个书签工具。以下是具体步骤：

1. 打开浏览器的书签管理器（通常可以通过右键点击书签栏并选择“书签管理器”来访问）。
2. 点击“新建书签”或“添加书签”。
3. 在“名称”字段中输入“WhatFont”。
4. 在“网址”字段中输入以下代码：

javascript:(function(){var s=document.createElement('script');s.src='https://raw.githubusercontent.com/chengyin/WhatFont-Bookmarklet/master/whatfont_core.js';document.body.appendChild(s);})();

5. 保存书签。

步骤 5：使用书签工具

现在你已经成功创建了 WhatFont 书签工具。要使用它，只需打开你想要检测字体的网页，然后点击书签栏中的“WhatFont”书签。工具将自动加载并显示网页上使用的字体信息。

注意事项

• 确保你使用的浏览器支持书签工具（Bookmarklet）。
• 如果你在本地开发环境中使用 WhatFont-Bookmarklet，请确保你的开发服务器支持跨域请求（CORS）。

通过以上步骤，你已经成功安装并配置了 WhatFont-Bookmarklet，现在可以开始使用它来检测网页上的字体了。