我需要在使用create-react-app构建的React Web应用程序中包含Google Web字体。这是因为该应用程序将在没有Internet访问权限的wifi上提供。最直接的解决方案似乎是google-fonts-webpack-plugin,但它需要自定义webpack
配置。
是否有任何“简单”的解决方案可以自动下载和包含所有Web字体资源,而无需弹出create-react-app?
我需要在使用create-react-app构建的React Web应用程序中包含Google Web字体。这是因为该应用程序将在没有Internet访问权限的wifi上提供。最直接的解决方案似乎是google-fonts-webpack-plugin,但它需要自定义webpack
配置。
是否有任何“简单”的解决方案可以自动下载和包含所有Web字体资源,而无需弹出create-react-app?
有多种方法可以做到这一点。
例如,要使用Roboto,请执行以下操作:
yarn add typeface-roboto
或者npm install typeface-roboto --save
在 index.js 文件中:
import "typeface-roboto";
有许多npm软件包可用于许多开源字体和大多数Google字体。您可以在此处查看所有字体。所有软件包均来自该项目。
您可以从fonts.google.com下载字体。
现在,您可以将字体放在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.css
和 App.js
中进行这些操作,这取决于你的个人喜好。这篇回答是@sudo bangbang的回答的更新版本。
进入你想要在CSS中应用的任何字体,点击Download family
按钮获取ZIP文件。
解压缩ZIP文件并将文件夹移动到如下所示的src文件夹中。
之后,参考下面的代码,将src
修改为正确的URL并放置在正确的format
中。这里我使用了truetype
,基于MDN。
可用的类型有:"woff"、"woff2"、"truetype"、"opentype"、"embedded-opentype"和"svg"。
font-family
属性是自定义名称。您可以随意命名。
@font-face {
font-family: 'primary-font';
src: url(./fonts//Sriracha/Sriracha-Regular.ttf) format('truetype');
}
.primary-font {
font-family: primary-font;
}
@fontsource
包由于Typefaces项目已被弃用,我们可以使用同一作者的另一种替代包FontSource
以Poppins
为例,首先下载该包。
npm install @fontsource/poppins --save
接下来在你的index.js
文件中导入该包
import "@fontsource/poppins";
然后按照您的需求使用它
.primary-font {
font-family: "Poppins";
}
支持的字体列表在这个Github目录库中。
@font-face
CSS 访问它呢? - illiteratewriter@import url('https://fonts.googleapis.com/...')
,但是webpack不会将字体文件拉入构建中。你的意思是将该导入的内容复制到我的CSS文件中,webpack会将woff文件等包含在构建中? - code_onkel@import url('public...')
导入它,无论相对 URL 是什么。 - illiteratewriter