# ElectronCustomFont

**Repository Path**: scenario-samples/electron-custom-font

## Basic Information

- **Project Name**: ElectronCustomFont
- **Description**: Electron自定义字体是公共关键技术，如文档编辑、排版印刷时，需要使用自定义字体确保文档输出符合用户需求。
 
本示例使用@font-face在网页上加载并使用自定义字体。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-09
- **Last Updated**: 2026-01-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Electron自定义字体

## 介绍
Electron自定义字体是公共关键技术，如文档编辑、排版印刷时，需要使用自定义字体确保文档输出符合用户需求。

本示例使用@font-face在网页上加载并使用自定义字体。

## 效果预览
<img src="screenshots/font.png" width="400">

## 约束与限制

- 本示例支持API Version 20 Release及以上版本。
- 本示例支持HarmonyOS 6.0.0 Release SDK及以上版本。
- 本示例需要使用DevEco Studio 6.0.0 Release及以上版本进行编译运行。

## 使用说明
下载字体文件放在fonts目录下并修改index.html中@font-face的scr: url路径后，会在第一段文字展示下载字体样式。



## 实现思路
渲染进程通过@font-face加载字体文件，为网页文字自定义字体。
```
@font-face {
  font-family: 'MyFontTtf'; /* 自定义字体名称（后续调用用这个） */
  src: url('../fonts/XXX.ttf') format('truetype'); /* 关键：路径指向 fonts/XXX.ttf*/
  font-style: normal; /* 字体样式（正常/斜体） */
  font-display: block; /* 强制等待字体加载，避免不生效或闪烁 */
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  font-family: 'MyFontTtf', sans-serif !important; /* 调用自定义字体 */
  color: #2c3e50;
}

/* 自定义字体展示区域 */
.custom-font-box {
  font-family: 'MyFontTtf', sans-serif !important; /* !important 确保优先级 */
  color: #2c3e50;
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
}
```

## 工程目录
```
app
├──font               // 字体目录
├──renderer           // 渲染进程模块
│  └──index.html      // 主窗口加载的页面
├──main.js            // 主进程    
├──electron_white.png // 应用图标
└──package.json       // 配置程序入口
```

## 参考文档