我正在使用create-react-app开发一个React项目。
我使用的是Sass，并且sass文件可以正确编译。
我有本地字体，我想嵌入到应用程序。
我相信在我的sass文件中，我正确地使用了@font-face规则。下面是其中一种字体：
/* poppins-200 - latin_latin-ext */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'someName';
font-style: normal;
font-weight: 200;
src: url('/assets/fonts/poppins-v20-latin_latin-ext-200.eot'); /* IE9 Compat Modes */
src: url('/assets/fonts/poppins-v20-latin_latin-ext-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/assets/fonts/poppins-v20-latin_latin-ext-200.woff2') format('woff2'), /* Super Modern Browsers */
url('/assets/fonts/poppins-v20-latin_latin-ext-200.woff') format('woff'), /* Modern Browsers */
url('/assets/fonts/poppins-v20-latin_latin-ext-200.ttf') format('truetype'), /* Safari, Android, iOS */
url('/assets/fonts/poppins-v20-latin_latin-ext-200.svg#Poppins') format('svg'); /* Legacy iOS */
}这是我的sass类，我将它分配给<p>元素：
.someClassName{
font-family: 'someName';
font-size: 28px;
line-height: 28px;
color: #090909;
padding: 0px;
margin: 0px;
}但是<p>元素没有以正确的字体出现在应用程序中。
我在Chrome的Web开发者工具控制台中为每种字体收到了这种类型的错误消息：
Failed to decode downloaded font: http://localhost:3002/assets/fonts/poppins-v20-latin_latin-ext-200.woff2在Firefox中：
downloadable font: rejected by sanitizer (font-family: "someName" style:normal weight:200 stretch:100 src index:1) source: http://localhost:3002/assets/fonts/poppins-v20-latin_latin-ext-200.woff2
downloadable font: rejected by sanitizer (font-family: "someName" style:normal weight:200 stretch:100 src index:2) source: http://localhost:3002/assets/fonts/poppins-v20-latin_latin-ext-200.woff
downloadable font: rejected by sanitizer (font-family: "someName" style:normal weight:200 stretch:100 src index:3) source: http://localhost:3002/assets/fonts/poppins-v20-latin_latin-ext-200.ttf
downloadable font: no supported format found (font-family: "someName" style:normal weight:200 stretch:100 src index:5) source: (end of source list)我用哪种字体都没关系，我试过三种不相关的字体，都是从谷歌字体下载的，每次都是一样的问题。
谁能告诉我这是怎么回事？
2条答案
按热度按时间eanckbw91#
另外，我在.scss文件中使用了我自己的名字作为字体家族，在那里我使用了@font-face规则。
而不是这个：
这使得浏览器使用一些默认字体而不是Poppins
我应该这样写：
htrmnn0y2#
对于有兴趣的人，我已经把问题整理好了。
事实证明，使用create-react-app创建的应用程序可以开箱即用地处理.scss文件。
**1）**我正在编辑.scss文件，并获取以下脚本将其动态转换为.css文件：“changeSassToCSS”：“sass --watch src/scss：src/assets/css”
**2）**我正在将.css文件导入index.js和App.js文件
**1）**转储.css文件
**2）**转储了从.scss转换到.css的脚本
**3）**将.scss文件导入我的index.js和App.js文件。