时间戳

首页 > 解决方案 > 如何在 create-react-app 项目中使用本地字体文件

css - 如何在 create-react-app 项目中使用本地字体文件

问题描述

在我使用创建的 react 项目中，我在文件夹中create-react-app放置了一个名为的字体文件。CaviarDreams.ttf/asset

在默认index.css文件中，我这样做了：

@font-face {
  font-family: 'CaviarDreams';
  src: url('assets/CaviarDreams.ttf') format('truetype'),
}

body {
  margin: 0;
  font-family: "CaviarDreams";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background: #f2f2f2;
}

但是，字体根本没有改变。我也试过了App.css，但还是一样。

难道我做错了什么？

标签： cssreactjs

解决方案

ttf 格式不支持 100% 的 Web。

在 Web 中使用之前，您必须将桌面字体转换为 Web 字体。

试试 - https://www.fontsquirrel.com/tools/webfont-generator（在线网络字体生成器）

并下载网络字体并相应地添加 css。

推荐阅读