使用 Typescript 在 React 应用程序中应用全局字体答案

【问题标题】：Apply global font in React application with Typescript使用 Typescript 在 React 应用程序中应用全局字体
【发布时间】：2021-10-26 00:37:17
【问题描述】：

我使用此配置将全局 css 配置应用到基于 JavaScript 的 React 项目中：

css 文件：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'PT Sans', sans-serif;
}

App.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

但例如字体样式未应用。你知道基于 TypeScript 的 React 项目的合适配置是什么吗？

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

大多数 React 项目都有 index.scss 或 index.css 文件。您可以在root 或src 目录中找到它。

我认为你可以使用这个文件。

【讨论】：

我删除是因为没用过。
难怪我在App.tsx 文件中找不到它。首先，不要删除该文件。我记不太清楚了，但它必须从index.html、`indext.tsx`、App.tsx 或类似的东西导入。其次，可以在 index.html 所在的目录下添加一个新的 css 文件。在此处定义 css 样式并将其包含在 index.html 文件中。

【解决方案2】：

这里可能缺少一个 import 语句，用于将定义 css 的文件导入App.tsx。

尝试将以下导入语句添加到 App.tsx 的顶部以将样式应用于整个应用程序：

// App.tsx
import './yourStyle.css'

注意：您的导入应针对样式表相对于App.tsx 的路径。

查看示例here

更新

此外，您应该确保您要使用的字体“PT Sans”在您的项目中可用，因为默认情况下它可能不受支持。

为此，请按照here 的步骤操作。

【讨论】：

由于某种原因它不起作用。不知道为什么。
你说得对，它不应该工作。 Ernesto's answer中引用了另一个问题！我会更新我的。

【解决方案3】：

原因在于特异性

inline id class tag *
    0    0     0     0   1

如果 body 或任何其他标签指定了字体系列，您的样式的特异性为 1，它将覆盖您的字体

inline id class tag *
    0    0     0     1   0

它们的字体系列样式是其中一种继承样式，如果您希望您的文档具有特定的字体系列，则需要在正文或 html 标记处添加它们

body {
font-family: yow-font;
}

如果 pt sans 不是其中一种安全字体，则需要在 html 页面中添加其 url

【讨论】：