首页react使用思源黑体

react使用思源黑体

时间: 2025-04-24 10:39:26 浏览: 23

### 如何在 React 项目中应用思源黑体 #### 安装字体文件为了能够在 React 应用程序中使用思源黑体，可以先通过 Web 字体服务提供商获取该字体。一种方法是从 Google Fonts 或 Adobe Fonts 获取链接并将其嵌入到项目的 HTML 文件头部。另一种方式是下载字体文件至本地资源目录下，在 CSS 中定义 @font-face 规则来加载这些字体文件[^1]： ```css @font-face { font-family: 'Source Han Sans'; src: url('./fonts/SourceHanSans-Regular.otf') format('opentype'); } ``` #### 修改全局样式表接着应当编辑应用程序中的全局样式表 (通常是 `index.css` 或者创建一个新的)，向其中加入如下代码片段以便设置默认字体族为刚刚引入的思源黑体[^2]: ```css body { margin: 0; padding: 0; font-family: 'Source Han Sans', sans-serif; /* 使用自定义字体 */ } ``` #### 更新组件内的内联样式或类名如果希望仅针对特定组件或者页面部分应用此字体，则可以在相应 JSX 组件内部指定 inline-style 属性或是新增 class 类型来进行局部覆盖[^3]： ```jsx import React from "react"; function MyComponent() { const style = { fontFamily: "'Source Han Sans'" }; return ( <div> <h1 style={style}>这是一个标题</h1> <p className="custom-font">这是一段文字。</p> </div> ); } export default MyComponent; ``` 同时还需要确保 `.custom-font` 的 CSS 样式被正确定义于对应的样式文件里: ```css .custom-font { font-family: 'Source Han Sans', sans-serif !important; } ```

阅读全文