gpt4 book ai didi

reactjs - 在 create-react-app 构建中完全包含 Google Web 字体(不弹出)

转载 作者:行者123 更新时间:2023-12-03 13:33:12 27 4
gpt4 key购买 nike

我需要使用 create-react-app 在 React web 应用程序的构建中包含 Google Web 字体。这是因为该应用程序将在没有互联网接入的 WiFi 上提供服务。最直接的解决方案似乎是 google-fonts-webpack-plugin ,但它需要自定义的 webpack 配置。

是否有任何“简单”的解决方案可以自动下载并包含所有网络字体资源,而不需要从 create-react-app 中弹出?

最佳答案

有多种方法可以做到这一点。

1。导入字体

例如,要使用 Roboto,请执行以下操作

yarn add typeface-roboto

npm install typeface-roboto --save

在index.js中:

import "typeface-roboto";

许多开源字体和大多数 Google 字体都有 npm 包。您可以看到所有字体here 。所有的包都来自project .

2。手动下载字体并将其添加到样式表

您可以从fonts.google.com下载字体

fonts.google.com page

现在,您可以将字体放入 src/fonts/Lato.woff 中,并在 index.css 中使用它。

@font-face {
font-family: 'Lato';
src: local('Lato'), url(./fonts/Lato.woff) format('woff');
}

对于 ttf 字体,您应该将 truetype 而不是 ttf 作为格式参数

您可以将其导入到 index.js 中以使其可用

import './index.css';

您也可以在 App.cssApp.js 中执行这些操作。这是你的偏好。

关于reactjs - 在 create-react-app 构建中完全包含 Google Web 字体(不弹出),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52381240/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com