字体预览插件（Font Preview）

简介

字体预览插件（Font Preview） 是一款用于在 VSCode 中预览字体文件的扩展。它能够帮助您直接在编辑器中查看字体的详细信息、示例文本，以及字形的渲染效果，无需借助外部工具。

功能特性

• 显示字体名称：展示字体的多种名称信息，包括 PostScript 名称、字体家族、全名和子家族等，中英文对照。
• 显示字体指标：提供字体的基础 Metric 信息，如每 Em 单位数、上升线、下降线、字形数量等。
• 示例文本预览：使用该字体渲染示例文本，方便快速查看字体效果。
• 自动主题适配：根据 VSCode 的主题（浅色或深色），自动调整预览界面的样式，保证良好的可读性。

使用方法

1. 打开字体文件：在 VSCode 中，直接打开 .ttf、.otf、.woff 或 .woff2 格式的字体文件。
2. 查看字体预览：插件会自动激活，并在自定义编辑器中显示字体的详细信息和预览。
3. 浏览字体信息：
   • 字体名称：在页面顶部，查看字体的 PostScript 名称、字体家族、全名和子家族等信息，中英文对照。
   • 字体指标：查看字体的基础 Metric 信息，包括每 Em 单位数、上升线、下降线和字形数量等。
4. 查看示例文本：在示例文本区域，查看使用该字体渲染的文本效果。

开发者指南

项目结构

font-preview/
├── src/
│   ├── extension.ts          // 插件的激活入口
│   ├── fontCustomEditor.ts   // 自定义编辑器的实现
├── package.json              // 插件的配置文件
├── README.md                 // 插件的说明文档

主要依赖

• vscode：VSCode 扩展的 API。
• opentype.js：用于解析字体文件，获取字体信息和字形数据。

构建和运行

1. 安装依赖：

   npm install
   

2. 编译插件：

   npm run compile
   

3. 启动调试：

   • 在 VSCode 中打开插件项目。
   • 按 F5 启动插件调试，会打开一个新的 Extension Development Host 窗口。

打包发布

1. 打包插件：

   npx vsce package
   

   这将在项目根目录下生成一个 .vsix 文件。

2. 发布到 VSCode 扩展市场：

   • 登录 VSCode 扩展开发者门户。
   • 创建新的扩展，并上传打包好的 .vsix 文件。

常见问题

无法预览字体文件，出现错误提示？

• 原因：可能是字体文件格式不支持，或者文件已损坏。
• 解决方案：确保打开的字体文件是有效的 .ttf、.otf、.woff 或 .woff2 文件。

预览界面样式异常，文字不可读？

• 原因：可能是主题兼容性问题。
• 解决方案：插件已适配浅色和深色主题，如果仍有问题，请联系开发者反馈。

致谢

• 感谢 opentype.js 提供强大的字体解析功能。
• 感谢所有为 VSCode 生态做出贡献的开发者。

如果您在使用过程中有任何问题，欢迎随时联系 atomliu！