前端项目如何使用思源字体

在前端项目中使用思源字体（微软字体商用收费如微软雅黑）可以通过以下几种方式实现：

1. 使用 CDN 引入字体

你可以通过公共 CDN 来引入思源字体，像 Google Fonts 或 Adobe Fonts 提供的思源字体服务。

步骤：

1. 在你的 HTML 文件中添加 <link> 标签，指向思源字体的 CDN 地址。

2. <!-- 思源黑体 CDN -->
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
   
   <!-- 或者思源宋体 CDN -->
   <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
   

   在 CSS 文件中使用 font-family 来设置字体：

3. body {
     font-family: 'Noto Sans SC', sans-serif; /* 思源黑体 */
   }
   
   h1 {
     font-family: 'Noto Serif SC', serif; /* 思源宋体 */
   }
   

2. 下载字体文件并在本地使用

如果你不想依赖 CDN，可以下载思源字体并在本地项目中使用。

步骤：

1. 下载字体文件：

   • 你可以从 Google Fonts 或 Adobe 网站下载思源字体的 TTF 或 OTF 文件。

2. 在项目中引入字体文件：

   • 将下载的字体文件放到项目的 assets/fonts 文件夹中。

3. 在 CSS 中定义字体：

   • 在你的项目的 CSS 文件中通过 @font-face 引入字体文件。

 

@font-face {
  font-family: 'Noto Sans SC';
  src: url('/assets/fonts/NotoSansSC-Regular.woff2') format('woff2'),
       url('/assets/fonts/NotoSansSC-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans SC';
  src: url('/assets/fonts/NotoSansSC-Bold.woff2') format('woff2'),
       url('/assets/fonts/NotoSansSC-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

body {
  font-family: 'Noto Sans SC', sans-serif;
}

 

3. 通过包管理工具安装

你可以通过 npm 或 yarn 安装「思源黑体」或「思源宋体」相关字体库。

# 安装思源黑体
npm install @fontsource/noto-sans-sc

# 安装思源宋体
npm install @fontsource/noto-serif-sc

 然后在你的项目中引入并使用：

// 引入字体样式
import '@fontsource/noto-sans-sc';  // 思源黑体
import '@fontsource/noto-serif-sc'; // 思源宋体

 最后，在 CSS 中使用：

body {
  font-family: 'Noto Sans SC', sans-serif;
}