reactjs – 如何在React.js中使用Google字体？
发布时间：2020-12-15 20:55:32 所属栏目：百科 来源：网络整理
导读：我用React.js和webpack构建了一个网站。 我想在网页中使用Google字体，因此我将链接放在该部分中。 Google Fonts link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet" 并设置CSS stylebody{ font-family: 'Bungee Inline',
|
我用React.js和webpack构建了一个网站。
我想在网页中使用Google字体，因此我将链接放在该部分中。 Google Fonts <link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"> 并设置CSS <style>
body{
font-family: 'Bungee Inline',cursive;
}
</style>
但是，它不起作用。 我怎么解决这个问题？
在某种主要或第一个加载CSS文件中，只需：
@import url(‘https://fonts.googleapis.com/css?family=Source Sans Pro：regular，bold，italic& subset = latin，latin-ext’); 您不需要包含任何类型的@ font-face等。您从Google的API中获得的响应已准备就绪，并允许您像平常一样使用字体系列。 然后在你的主要React应用程序JavaScript中，在顶部放置如下内容： import’./assets/css/fonts.css’; 我实际上做了一个app.css导入fonts.css与几个字体导入。只是为了组织(现在我知道我的所有字体都在哪里)。要记住的重要一点是先导入字体。 请记住，导入到React应用程序的任何组件都应在导入样式后导入。特别是如果这些组件也导入自己的样式。这样您就可以确定样式的顺序。这就是为什么最好在主文件的顶部导入字体(不要忘记检查你的最终捆绑的CSS文件，以仔细检查你是否遇到麻烦)。 您可以通过Google Font API提供一些选项，以便在加载字体等时更高效。请参阅官方文档：https://developers.google.com/fonts/docs/getting_started 编辑，注意：如果您正在处理“离线”应用程序，那么您可能确实需要下载字体并通过Webpack加载。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |